@tylertech/forge-ai 0.3.1 → 0.4.0

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 (7) hide show
  1. package/custom-elements.json +400 -332
  2. package/dist/ai-chat-header/ai-chat-header.d.ts +21 -0
  3. package/dist/ai-chat-header/ai-chat-header.mjs +56 -22
  4. package/dist/ai-empty-state/ai-empty-state.d.ts +2 -2
  5. package/dist/ai-empty-state/ai-empty-state.mjs +86 -99
  6. package/dist/ai-suggestions/ai-suggestions.scss.mjs +1 -1
  7. package/package.json +59 -59
package/dist/ai-chat-header/ai-chat-header.d.ts CHANGED
@@ -24,8 +24,17 @@ export type MinimizeIconType = 'default' | 'panel';
24
24
  *
25
25
  * @tag forge-ai-chat-header
26
26
  *
27
+ * @slot icon - Slot for custom icon (default: forge-ai-icon)
27
28
  * @slot title - Slot for custom title text (default: "AI Assistant")
28
29
  *
30
+ * @property {boolean} showExpandButton - Controls whether the expand button is visible
31
+ * @property {boolean} showMinimizeButton - Controls whether the minimize button is visible
32
+ * @property {boolean} expanded - Indicates the current expanded state for displaying the appropriate expand/collapse icon
33
+ * @property {MinimizeIconType} minimizeIcon - Controls which minimize icon to display ('default' | 'panel')
34
+ * @property {boolean} showDropdownMenu - Controls whether the dropdown menu is visible (default: true)
35
+ * @property {boolean} showClearChat - Controls whether the clear chat menu item is visible (default: true)
36
+ * @property {boolean} showInfo - Controls whether the info menu item is visible (default: true)
37
+ *
29
38
  * @event forge-ai-chat-header-expand - Fired when the expand button is clicked
30
39
  * @event forge-ai-chat-header-minimize - Fired when the minimize button is clicked
31
40
  * @event forge-ai-chat-header-clear - Fired when the clear chat option is selected
@@ -50,5 +59,17 @@ export declare class AiChatHeaderComponent extends LitElement {
50
59
  * Controls which minimize icon to display
51
60
  */
52
61
  minimizeIcon: MinimizeIconType;
62
+ /**
63
+ * Controls whether the dropdown menu is visible
64
+ */
65
+ showDropdownMenu: boolean;
66
+ /**
67
+ * Controls whether the clear chat menu item is visible
68
+ */
69
+ showClearChat: boolean;
70
+ /**
71
+ * Controls whether the info menu item is visible
72
+ */
73
+ showInfo: boolean;
53
74
  render(): TemplateResult;
54
75
  }
package/dist/ai-chat-header/ai-chat-header.mjs CHANGED
@@ -20,9 +20,10 @@ var __decorateClass = (decorators, target, key, kind) => {
20
20
  return result;
21
21
  };
22
22
  var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
23
+ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
23
24
  var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
24
25
  var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
25
- var _AiChatHeaderComponent_instances, handleExpandClick_fn, handleMinimizeClick_fn, handleDropdownChange_fn;
26
+ var _iconSlot, _AiChatHeaderComponent_instances, handleExpandClick_fn, handleMinimizeClick_fn, handleDropdownChange_fn;
26
27
  const AiChatHeaderComponentTagName = "forge-ai-chat-header";
27
28
  let AiChatHeaderComponent = class extends LitElement {
28
29
  constructor() {
@@ -32,37 +33,60 @@ let AiChatHeaderComponent = class extends LitElement {
32
33
  this.showMinimizeButton = false;
33
34
  this.expanded = false;
34
35
  this.minimizeIcon = "default";
36
+ this.showDropdownMenu = true;
37
+ this.showClearChat = true;
38
+ this.showInfo = true;
39
+ __privateAdd(this, _iconSlot, html`
40
+ <slot name="icon">
41
+ <forge-ai-icon></forge-ai-icon>
42
+ </slot>
43
+ `);
35
44
  }
36
45
  render() {
37
46
  return html`
38
47
  <div class="header forge-toolbar forge-toolbar--no-divider">
39
48
  <div class="start">
40
- <forge-ai-icon></forge-ai-icon>
49
+ ${__privateGet(this, _iconSlot)}
41
50
  <slot name="title">
42
51
  <h1>AI Assistant</h1>
43
52
  </slot>
44
53
  </div>
45
54
  <div class="end">
46
- <forge-ai-dropdown-menu
47
- variant="icon-button"
48
- selection-mode="none"
49
- @forge-ai-dropdown-menu-change=${__privateMethod(this, _AiChatHeaderComponent_instances, handleDropdownChange_fn)}>
50
- <svg
51
- slot="trigger-content"
52
- xmlns="http://www.w3.org/2000/svg"
53
- viewBox="0 0 24 24"
54
- class="forge-icon ai-icon-button">
55
- <path fill="none" d="M0 0h24v24H0z" />
56
- <path
57
- d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2" />
58
- </svg>
59
- <forge-ai-dropdown-menu-item value="clear-chat">
60
- <span>Clear chat</span>
61
- </forge-ai-dropdown-menu-item>
62
- <forge-ai-dropdown-menu-item value="info">
63
- <span>Info</span>
64
- </forge-ai-dropdown-menu-item>
65
- </forge-ai-dropdown-menu>
55
+ ${when(
56
+ this.showDropdownMenu && (this.showClearChat || this.showInfo),
57
+ () => html`
58
+ <forge-ai-dropdown-menu
59
+ variant="icon-button"
60
+ selection-mode="none"
61
+ @forge-ai-dropdown-menu-change=${__privateMethod(this, _AiChatHeaderComponent_instances, handleDropdownChange_fn)}>
62
+ <svg
63
+ slot="trigger-content"
64
+ xmlns="http://www.w3.org/2000/svg"
65
+ viewBox="0 0 24 24"
66
+ class="forge-icon ai-icon-button">
67
+ <path fill="none" d="M0 0h24v24H0z" />
68
+ <path
69
+ d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2" />
70
+ </svg>
71
+ ${when(
72
+ this.showClearChat,
73
+ () => html`
74
+ <forge-ai-dropdown-menu-item value="clear-chat">
75
+ <span>Clear chat</span>
76
+ </forge-ai-dropdown-menu-item>
77
+ `
78
+ )}
79
+ ${when(
80
+ this.showInfo,
81
+ () => html`
82
+ <forge-ai-dropdown-menu-item value="info">
83
+ <span>Info</span>
84
+ </forge-ai-dropdown-menu-item>
85
+ `
86
+ )}
87
+ </forge-ai-dropdown-menu>
88
+ `
89
+ )}
66
90
  ${when(
67
91
  this.showExpandButton,
68
92
  () => html`
@@ -140,6 +164,7 @@ let AiChatHeaderComponent = class extends LitElement {
140
164
  `;
141
165
  }
142
166
  };
167
+ _iconSlot = /* @__PURE__ */ new WeakMap();
143
168
  _AiChatHeaderComponent_instances = /* @__PURE__ */ new WeakSet();
144
169
  handleExpandClick_fn = function() {
145
170
  const event = new CustomEvent("forge-ai-chat-header-expand", {
@@ -189,6 +214,15 @@ __decorateClass([
189
214
  __decorateClass([
190
215
  property({ attribute: "minimize-icon" })
191
216
  ], AiChatHeaderComponent.prototype, "minimizeIcon", 2);
217
+ __decorateClass([
218
+ property({ type: Boolean, attribute: "show-dropdown-menu" })
219
+ ], AiChatHeaderComponent.prototype, "showDropdownMenu", 2);
220
+ __decorateClass([
221
+ property({ type: Boolean, attribute: "show-clear-chat" })
222
+ ], AiChatHeaderComponent.prototype, "showClearChat", 2);
223
+ __decorateClass([
224
+ property({ type: Boolean, attribute: "show-info" })
225
+ ], AiChatHeaderComponent.prototype, "showInfo", 2);
192
226
  AiChatHeaderComponent = __decorateClass([
193
227
  customElement(AiChatHeaderComponentTagName)
194
228
  ], AiChatHeaderComponent);
package/dist/ai-empty-state/ai-empty-state.d.ts CHANGED
@@ -8,12 +8,12 @@ export declare const AiEmptyStateComponentTagName: keyof HTMLElementTagNameMap;
8
8
  /**
9
9
  * @tag forge-ai-empty-state
10
10
  *
11
- * @slot - The custom welcome message content.
11
+ * @slot - The welcome message content (default: "Welcome to AI Assistant! Start a conversation by asking a question or describing what you'd like help with.").
12
+ * @slot icon - The custom icon to display instead of the default books graphic.
12
13
  * @slot actions - The actions or suggestions to display below the message.
13
14
  */
14
15
  export declare class AiEmptyStateComponent extends LitElement {
15
16
  #private;
16
17
  static styles: import('lit').CSSResult;
17
- private _slottedNodes;
18
18
  render(): TemplateResult;
19
19
  }
package/dist/ai-empty-state/ai-empty-state.mjs CHANGED
@@ -1,8 +1,6 @@
1
1
  import { unsafeCSS, LitElement, html } from "lit";
2
- import { queryAssignedNodes, customElement } from "lit/decorators.js";
3
- import { when } from "lit/directives/when.js";
2
+ import { customElement } from "lit/decorators.js";
4
3
  import styles from "./ai-empty-state.scss.mjs";
5
- var __defProp = Object.defineProperty;
6
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
7
5
  var __typeError = (msg) => {
8
6
  throw TypeError(msg);
@@ -11,122 +9,111 @@ var __decorateClass = (decorators, target, key, kind) => {
11
9
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
12
10
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
13
11
  if (decorator = decorators[i])
14
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
15
- if (kind && result) __defProp(target, key, result);
12
+ result = decorator(result) || result;
16
13
  return result;
17
14
  };
18
15
  var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
19
16
  var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
20
17
  var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
21
- var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
22
- var _messageSlot, _defaultMessage, _AiEmptyStateComponent_instances, messageContent_get, handleSlotChange_fn;
18
+ var _defaultIcon, _messageSlot, _iconSlot;
23
19
  const AiEmptyStateComponentTagName = "forge-ai-empty-state";
24
20
  let AiEmptyStateComponent = class extends LitElement {
25
21
  constructor() {
26
22
  super(...arguments);
27
- __privateAdd(this, _AiEmptyStateComponent_instances);
28
- __privateAdd(this, _messageSlot, html`<slot @slotchange=${__privateMethod(this, _AiEmptyStateComponent_instances, handleSlotChange_fn)}></slot>`);
29
- __privateAdd(this, _defaultMessage, html`Welcome to AI Assistant! Start a conversation by asking a question or describing what
30
- you'd like help with.`);
23
+ __privateAdd(this, _defaultIcon, html`
24
+ <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 92 92" class="graphic">
25
+ <defs>
26
+ <style>
27
+ .cls-1,
28
+ .cls-7 {
29
+ fill: none;
30
+ }
31
+ .cls-2 {
32
+ fill: #d0dbf4;
33
+ fill-rule: evenodd;
34
+ }
35
+ .cls-3 {
36
+ fill: #fff;
37
+ stroke-width: 2.5px;
38
+ }
39
+ .cls-3,
40
+ .cls-4,
41
+ .cls-5 {
42
+ stroke: #586ab1;
43
+ stroke-linecap: round;
44
+ stroke-linejoin: round;
45
+ }
46
+ .cls-4 {
47
+ fill: #fcbf12;
48
+ }
49
+ .cls-4,
50
+ .cls-5 {
51
+ stroke-width: 2px;
52
+ }
53
+ .cls-5 {
54
+ fill: #5cc5cd;
55
+ }
56
+ .cls-6 {
57
+ fill: #586ab1;
58
+ }
59
+ .cls-7 {
60
+ stroke: #d1d1d1;
61
+ stroke-miterlimit: 10;
62
+ stroke-width: 0.75px;
63
+ }
64
+ </style>
65
+ </defs>
66
+ <title>books-spot</title>
67
+ <rect class="cls-1" x="0.09" y="0.05" width="92" height="92" />
68
+ <path class="cls-2" d="M46.1,82a36,36,0,1,0-36-36A36,36,0,0,0,46.1,82Z" />
69
+ <rect class="cls-3" x="13.81" y="64.02" width="64.9" height="8.3" rx="1" />
70
+ <rect class="cls-4" x="12.19" y="61.41" width="67.72" height="3.69" rx="1" />
71
+ <rect class="cls-4" x="12.19" y="71.99" width="67.72" height="3.69" rx="1" />
72
+ <rect
73
+ class="cls-5"
74
+ x="25.75"
75
+ y="8.77"
76
+ width="12.26"
77
+ height="51.94"
78
+ rx="1"
79
+ transform="translate(14.61 -9.14) rotate(21.06)" />
80
+ <rect
81
+ class="cls-6"
82
+ x="20.89"
83
+ y="47.21"
84
+ width="10.63"
85
+ height="4.51"
86
+ transform="translate(19.53 -6.11) rotate(21.06)" />
87
+ <line class="cls-7" x1="15.05" y1="67.62" x2="77.45" y2="67.69" />
88
+ <line class="cls-7" x1="15.05" y1="69.49" x2="77.45" y2="69.55" />
89
+ <rect class="cls-4" x="47.18" y="8.29" width="12.26" height="51.94" rx="1" />
90
+ <rect class="cls-6" x="47.99" y="47.79" width="10.63" height="4.51" />
91
+ <polygon class="cls-6" points="55.47 17.96 53.08 15.96 50.75 17.96 50.75 8.81 55.47 8.81 55.47 17.96" />
92
+ <rect class="cls-5" x="59.69" y="8.29" width="12.26" height="51.94" rx="1" />
93
+ <rect class="cls-6" x="60.49" y="47.79" width="10.63" height="4.51" />
94
+ </svg>
95
+ `);
96
+ __privateAdd(this, _messageSlot, html`
97
+ <slot
98
+ >Welcome to AI Assistant! Start a conversation by asking a question or describing what you'd like help with.</slot
99
+ >
100
+ `);
101
+ __privateAdd(this, _iconSlot, html` <slot name="icon"> ${__privateGet(this, _defaultIcon)} </slot> `);
31
102
  }
32
103
  render() {
33
104
  return html` <div class="forge-page-state">
34
105
  <div class="welcome-container">
35
- <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 92 92" class="graphic">
36
- <defs>
37
- <style>
38
- .cls-1,
39
- .cls-7 {
40
- fill: none;
41
- }
42
- .cls-2 {
43
- fill: #d0dbf4;
44
- fill-rule: evenodd;
45
- }
46
- .cls-3 {
47
- fill: #fff;
48
- stroke-width: 2.5px;
49
- }
50
- .cls-3,
51
- .cls-4,
52
- .cls-5 {
53
- stroke: #586ab1;
54
- stroke-linecap: round;
55
- stroke-linejoin: round;
56
- }
57
- .cls-4 {
58
- fill: #fcbf12;
59
- }
60
- .cls-4,
61
- .cls-5 {
62
- stroke-width: 2px;
63
- }
64
- .cls-5 {
65
- fill: #5cc5cd;
66
- }
67
- .cls-6 {
68
- fill: #586ab1;
69
- }
70
- .cls-7 {
71
- stroke: #d1d1d1;
72
- stroke-miterlimit: 10;
73
- stroke-width: 0.75px;
74
- }
75
- </style>
76
- </defs>
77
- <title>books-spot</title>
78
- <rect class="cls-1" x="0.09" y="0.05" width="92" height="92" />
79
- <path class="cls-2" d="M46.1,82a36,36,0,1,0-36-36A36,36,0,0,0,46.1,82Z" />
80
- <rect class="cls-3" x="13.81" y="64.02" width="64.9" height="8.3" rx="1" />
81
- <rect class="cls-4" x="12.19" y="61.41" width="67.72" height="3.69" rx="1" />
82
- <rect class="cls-4" x="12.19" y="71.99" width="67.72" height="3.69" rx="1" />
83
- <rect
84
- class="cls-5"
85
- x="25.75"
86
- y="8.77"
87
- width="12.26"
88
- height="51.94"
89
- rx="1"
90
- transform="translate(14.61 -9.14) rotate(21.06)" />
91
- <rect
92
- class="cls-6"
93
- x="20.89"
94
- y="47.21"
95
- width="10.63"
96
- height="4.51"
97
- transform="translate(19.53 -6.11) rotate(21.06)" />
98
- <line class="cls-7" x1="15.05" y1="67.62" x2="77.45" y2="67.69" />
99
- <line class="cls-7" x1="15.05" y1="69.49" x2="77.45" y2="69.55" />
100
- <rect class="cls-4" x="47.18" y="8.29" width="12.26" height="51.94" rx="1" />
101
- <rect class="cls-6" x="47.99" y="47.79" width="10.63" height="4.51" />
102
- <polygon class="cls-6" points="55.47 17.96 53.08 15.96 50.75 17.96 50.75 8.81 55.47 8.81 55.47 17.96" />
103
- <rect class="cls-5" x="59.69" y="8.29" width="12.26" height="51.94" rx="1" />
104
- <rect class="cls-6" x="60.49" y="47.79" width="10.63" height="4.51" />
105
- </svg>
106
- <div class="forge-page-state__message message">${__privateGet(this, _AiEmptyStateComponent_instances, messageContent_get)}</div>
106
+ ${__privateGet(this, _iconSlot)}
107
+ <div class="forge-page-state__message message">${__privateGet(this, _messageSlot)}</div>
107
108
  <slot name="actions"></slot>
108
109
  </div>
109
110
  </div>`;
110
111
  }
111
112
  };
113
+ _defaultIcon = /* @__PURE__ */ new WeakMap();
112
114
  _messageSlot = /* @__PURE__ */ new WeakMap();
113
- _defaultMessage = /* @__PURE__ */ new WeakMap();
114
- _AiEmptyStateComponent_instances = /* @__PURE__ */ new WeakSet();
115
- messageContent_get = function() {
116
- const hasCustomContent = this._slottedNodes.length > 0;
117
- return when(
118
- hasCustomContent,
119
- () => __privateGet(this, _messageSlot),
120
- () => __privateGet(this, _defaultMessage)
121
- );
122
- };
123
- handleSlotChange_fn = function() {
124
- this.requestUpdate();
125
- };
115
+ _iconSlot = /* @__PURE__ */ new WeakMap();
126
116
  AiEmptyStateComponent.styles = unsafeCSS(styles);
127
- __decorateClass([
128
- queryAssignedNodes({ flatten: true })
129
- ], AiEmptyStateComponent.prototype, "_slottedNodes", 2);
130
117
  AiEmptyStateComponent = __decorateClass([
131
118
  customElement(AiEmptyStateComponentTagName)
132
119
  ], AiEmptyStateComponent);
package/dist/ai-suggestions/ai-suggestions.scss.mjs CHANGED
@@ -1,4 +1,4 @@
1
- const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\n.forge-button {\n --_button-primary-color: var(--forge-button-primary-color, var(--forge-theme-primary, #3f51b5));\n --_button-text-color: var(--forge-button-text-color, var(--_button-primary-color));\n --_button-disabled-color: var(--forge-button-disabled-color, var(--forge-theme-surface-container, #e0e0e0));\n --_button-padding: var(--forge-button-padding, var(--forge-spacing-medium, 16px));\n --_button-display: var(--forge-button-display, inline-grid);\n --_button-justify: var(--forge-button-justify, center);\n --_button-shape: var(--forge-button-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n --_button-height: var(--forge-button-height, 36px);\n --_button-min-width: var(--forge-button-min-width, 64px);\n --_button-spacing: var(--forge-button-spacing, var(--forge-spacing-xsmall, 8px));\n --_button-border-width: var(--forge-button-border-width, medium);\n --_button-border-style: var(--forge-button-border-style, none);\n --_button-border-color: var(--forge-button-border-color, currentColor);\n --_button-shape-start-start-radius: var(--forge-button-shape-start-start-radius, var(--_button-shape));\n --_button-shape-start-end-radius: var(--forge-button-shape-start-end-radius, var(--_button-shape));\n --_button-shape-end-start-radius: var(--forge-button-shape-end-start-radius, var(--_button-shape));\n --_button-shape-end-end-radius: var(--forge-button-shape-end-end-radius, var(--_button-shape));\n --_button-padding-block: var(--forge-button-padding-block, var(--_button-0));\n --_button-padding-inline: var(--forge-button-padding-inline, var(--_button-padding));\n --_button-background: var(--forge-button-background, transparent);\n --_button-hover-background: var(--forge-button-hover-background, var(--_button-background));\n --_button-active-background: var(--forge-button-active-background, var(--_button-background));\n --_button-color: var(--forge-button-color, var(--_button-text-color));\n --_button-icon-size: var(--forge-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));\n --_button-shadow: var(--forge-button-shadow, none);\n --_button-hover-shadow: var(--forge-button-hover-shadow, none);\n --_button-active-shadow: var(--forge-button-active-shadow, none);\n --_button-cursor: var(--forge-button-cursor, pointer);\n --_button-transition-duration: var(--forge-button-transition-duration, var(--forge-animation-duration-short3, 150ms));\n --_button-transition-timing: var(--forge-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n --_button-text-padding-inline: var(--forge-button-text-padding-inline, var(--forge-spacing-xsmall, 8px));\n --_button-outlined-background: var(--forge-button-outlined-background, transparent);\n --_button-outlined-color: var(--forge-button-outlined-color, var(--_button-primary-color));\n --_button-outlined-border-width: var(--forge-button-outlined-border-width, var(--forge-border-thin, 1px));\n --_button-outlined-border-style: var(--forge-button-outlined-border-style, solid);\n --_button-outlined-border-color: var(--forge-button-outlined-border-color, var(--_button-primary-color));\n --_button-tonal-background: var(--forge-button-tonal-background, var(--forge-theme-primary-container, #d1d5ed));\n --_button-tonal-disabled-background: var(--forge-button-tonal-disabled-background, var(--_button-disabled-color));\n --_button-tonal-color: var(--forge-button-tonal-color, var(--forge-theme-on-primary-container, #222c62));\n --_button-tonal-disabled-color: var(--forge-button-tonal-disabled-color, var(--_button-disabled-text-color));\n --_button-filled-background: var(--forge-button-filled-background, var(--_button-primary-color));\n --_button-filled-disabled-background: var(--forge-button-filled-disabled-background, var(--_button-disabled-color));\n --_button-filled-color: var(--forge-button-filled-color, var(--forge-theme-on-primary, #ffffff));\n --_button-filled-disabled-color: var(--forge-button-filled-disabled-color, var(--_button-disabled-text-color));\n --_button-raised-background: var(--forge-button-raised-background, var(--_button-primary-color));\n --_button-raised-disabled-background: var(--forge-button-raised-disabled-background, var(--_button-disabled-color));\n --_button-raised-color: var(--forge-button-raised-color, var(--forge-theme-on-primary, #ffffff));\n --_button-raised-disabled-color: var(--forge-button-raised-disabled-color, var(--_button-disabled-text-color));\n --_button-raised-shadow: var(--forge-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));\n --_button-raised-hover-shadow: var(--forge-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));\n --_button-raised-active-shadow: var(--forge-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));\n --_button-raised-disabled-shadow: var(--forge-button-raised-disabled-shadow, none);\n --_button-link-color: var(--forge-button-link-color, var(--_button-primary-color));\n --_button-link-text-decoration: var(--forge-button-link-text-decoration, underline);\n --_button-link-height: var(--forge-button-link-height, auto);\n --_button-link-padding: var(--forge-button-link-padding, 0);\n --_button-link-line-height: var(--forge-button-link-line-height, normal);\n --_button-link-width: var(--forge-button-link-width, auto);\n --_button-link-hover-text-decoration: var(--forge-button-link-hover-text-decoration, none);\n --_button-link-active-opacity: var(--forge-button-link-active-opacity, 0.65);\n --_button-link-transition-duration: var(--forge-button-link-transition-duration, var(--forge-animation-duration-short3, 150ms));\n --_button-link-transition-timing: var(--forge-button-link-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n --_button-disabled-cursor: var(--forge-button-disabled-cursor, not-allowed);\n --_button-disabled-text-color: var(--forge-button-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));\n --_button-disabled-background: var(--forge-button-disabled-background, transparent);\n --_button-disabled-border-color: var(--forge-button-disabled-border-color, var(--_button-disabled-color));\n --_button-disabled-shadow: var(--forge-button-disabled-shadow, none);\n --_button-dense-height: var(--forge-button-dense-height, 24px);\n --_button-pill-shape: var(--forge-button-pill-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n --_button-pill-padding-inline: var(--forge-button-pill-padding-inline, var(--forge-spacing-small, 12px));\n --_button-focus-indicator-offset: var(--forge-button-focus-indicator-offset, 4px);\n --_button-text-focus-indicator-offset: var(--forge-button-text-focus-indicator-offset, 0px);\n --_button-link-focus-indicator-offset: var(--forge-button-link-focus-indicator-offset, 2px);\n --_button-popover-icon-transition-duration: var(--forge-button-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));\n --_button-popover-icon-transition-timing: var(--forge-button-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n --_button-popover-icon-open-rotation: var(--forge-button-popover-icon-open-rotation, 180deg);\n}\n\n.forge-button {\n display: var(--_button-display);\n position: relative;\n outline: none;\n vertical-align: middle;\n -webkit-tap-highlight-color: transparent;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-button-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, 0.875)));\n font-weight: var(--forge-typography-button-font-weight, 500);\n line-height: var(--forge-typography-button-line-height, normal);\n letter-spacing: var(--forge-typography-button-letter-spacing, 0.0714285714em);\n text-transform: var(--forge-typography-button-text-transform, inherit);\n text-decoration: var(--forge-typography-button-text-decoration, inherit);\n position: relative;\n display: var(--_button-display);\n grid-auto-flow: column;\n align-items: center;\n justify-content: var(--_button-justify);\n gap: var(--_button-spacing);\n z-index: 0;\n box-sizing: border-box;\n min-inline-size: var(--_button-min-width);\n height: var(--_button-height);\n inline-size: 100%;\n border-width: var(--_button-border-width);\n border-style: var(--_button-border-style);\n border-color: var(--_button-border-color);\n border-start-start-radius: var(--_button-shape-start-start-radius);\n border-start-end-radius: var(--_button-shape-start-end-radius);\n border-end-start-radius: var(--_button-shape-end-start-radius);\n border-end-end-radius: var(--_button-shape-end-end-radius);\n padding-block: var(--_button-padding-block);\n padding-inline: var(--_button-padding-inline);\n box-shadow: var(--_button-shadow);\n outline: none;\n user-select: none;\n -webkit-appearance: none;\n vertical-align: middle;\n text-decoration: none;\n white-space: nowrap;\n background: var(--_button-background);\n color: var(--_button-color);\n cursor: var(--_button-cursor);\n transition-property: box-shadow, background;\n transition-duration: var(--_button-transition-duration);\n transition-timing-function: var(--_button-transition-timing);\n}\n\n.forge-button::-moz-focus-inner {\n padding: 0;\n border: 0;\n}\n\n.forge-button:hover {\n --_button-shadow: var(--_button-hover-shadow);\n background: var(--_button-hover-background);\n}\n\n.forge-button:active {\n --_button-shadow: var(--_button-active-shadow);\n background: var(--_button-active-background);\n}\n\n.forge-button {\n position: relative;\n inline-size: auto;\n}\n\n.forge-button:not(:disabled):not(.forge-button--link) {\n --_state-layer-display: var(--forge-state-layer-display, flex);\n --_state-layer-color: var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));\n --_state-layer-hover-color: var(--forge-state-layer-hover-color, var(--_state-layer-color));\n --_state-layer-hover-opacity: var(--forge-state-layer-hover-opacity, 0.08);\n --_state-layer-pressed-color: var(--forge-state-layer-pressed-color, var(--_state-layer-color));\n --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.12);\n --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 15ms);\n --_state-layer-pressed-duration: var(--forge-state-layer-pressed-duration, 105ms);\n --_state-layer-animation-duration: var(--forge-state-layer-animation-duration, 375ms);\n}\n\n.forge-button:not(:disabled):not(.forge-button--link)::before {\n opacity: 0;\n position: absolute;\n background-color: var(--_state-layer-hover-color);\n inset: 0;\n transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;\n --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 100ms);\n content: "";\n opacity: 0;\n border-radius: inherit;\n}\n\n.forge-button:not(:disabled):not(.forge-button--link):hover::before {\n background-color: var(--_state-layer-hover-color);\n opacity: var(--_state-layer-hover-opacity);\n}\n\n.forge-button:not(:disabled):not(.forge-button--link):active::before {\n opacity: var(--_state-layer-pressed-opacity);\n transition-duration: var(--_state-layer-pressed-duration);\n --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.18);\n}\n\n@keyframes forge-focus-indicator-outward-grow {\n from {\n outline-width: 0;\n }\n to {\n outline-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-outward-shrink {\n from {\n outline-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-inward-grow {\n from {\n border-width: 0;\n }\n to {\n border-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-inward-shrink {\n from {\n border-width: var(--_focus-indicator-active-width);\n }\n}\n.forge-button:not(:disabled) {\n outline: none;\n}\n\n.forge-button:not(:disabled):focus-visible::after {\n --_focus-indicator-display: var(--forge-focus-indicator-display, flex);\n --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));\n --_focus-indicator-active-width: var(--forge-focus-indicator-active-width, 6px);\n --_focus-indicator-color: var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n --_focus-indicator-shape: var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));\n --_focus-indicator-duration: var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));\n --_focus-indicator-easing: var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));\n --_focus-indicator-shape-start-start: var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));\n --_focus-indicator-shape-start-end: var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));\n --_focus-indicator-shape-end-end: var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));\n --_focus-indicator-shape-end-start: var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));\n --_focus-indicator-outward-offset: var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));\n --_focus-indicator-inward-offset: var(--forge-focus-indicator-inward-offset, 0px);\n --_focus-indicator-offset-block: var(--forge-focus-indicator-offset-block, 0);\n --_focus-indicator-offset-inline: var(--forge-focus-indicator-offset-inline, 0);\n}\n\n.forge-button:not(:disabled):focus-visible::after {\n animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);\n animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);\n animation-timing-function: var(--_focus-indicator-easing);\n box-sizing: border-box;\n color: var(--_focus-indicator-color);\n display: none;\n pointer-events: none;\n position: absolute;\n margin-block: var(--_focus-indicator-offset-block);\n margin-inline: var(--_focus-indicator-offset-inline);\n animation-name: forge-focus-indicator-outward-grow, forge-focus-indicator-outward-shrink;\n border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));\n border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));\n border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));\n border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));\n inset: calc(-1 * var(--_focus-indicator-outward-offset));\n outline: var(--_focus-indicator-width) solid currentColor;\n content: "";\n display: block;\n}\n\n.forge-button:not(:disabled) {\n --forge-focus-indicator-color: var(--_button-primary-color);\n}\n\n.forge-button:disabled {\n cursor: var(--_button-disabled-cursor);\n --_button-background: var(--_button-disabled-background);\n --_button-color: var(--_button-disabled-text-color);\n --_button-shadow: var(--_button-disabled-shadow);\n pointer-events: none;\n pointer-events: initial;\n}\n\n.forge-button:where(:not(.forge-button--outlined, .forge-button--tonal, .forge-button--filled, .forge-button--raised, .forge-button--link)), .forge-button--text {\n --_button-padding-inline: var(--_button-text-padding-inline);\n}\n\n.forge-button--outlined {\n --_button-background: var(--_button-outlined-background);\n --_button-color: var(--_button-outlined-color);\n --_button-border-width: var(--_button-outlined-border-width);\n --_button-border-style: var(--_button-outlined-border-style);\n --_button-border-color: var(--_button-outlined-border-color);\n}\n\n.forge-button--outlined:disabled {\n --_button-border-color: var(--_button-disabled-border-color);\n}\n\n.forge-button--tonal {\n --_button-background: var(--_button-tonal-background);\n --_button-color: var(--_button-tonal-color);\n}\n\n.forge-button--tonal:disabled {\n --_button-background: var(--_button-tonal-disabled-background);\n --_button-color: var(--_button-tonal-disabled-color);\n}\n\n.forge-button--filled, .forge-button--raised {\n --_button-background: var(--_button-filled-background);\n --_button-color: var(--_button-filled-color);\n --forge-state-layer-color: var(--_button-filled-color);\n}\n\n.forge-button--filled:disabled, .forge-button--raised:disabled {\n --_button-background: var(--_button-filled-disabled-background);\n --_button-color: var(--_button-filled-disabled-color);\n}\n\n.forge-button--raised {\n --_button-background: var(--_button-raised-background);\n --_button-color: var(--_button-raised-color);\n --_button-shadow: var(--_button-raised-shadow);\n}\n\n.forge-button--raised:hover {\n --_button-shadow: var(--_button-raised-hover-shadow);\n}\n\n.forge-button--raised:active {\n --_button-shadow: var(--_button-raised-active-shadow);\n}\n\n.forge-button--raised:disabled {\n --_button-background: var(--_button-raised-disabled-background);\n --_button-color: var(--_button-raised-disabled-color);\n --_button-shadow: var(--_button-raised-disabled-shadow);\n}\n\n.forge-button--link {\n --_button-color: var(--_button-link-color);\n --_button-height: var(--_button-link-height);\n --_button-padding: var(--_button-link-padding);\n --_button-focus-indicator-offset: var(--_button-link-focus-indicator-offset);\n text-decoration: var(--_button-link-text-decoration);\n line-height: var(--_button-link-line-height);\n transition: opacity var(--_button-link-transition-duration) var(--_button-link-transition-timing);\n inline-size: var(--_button-link-width);\n}\n\n.forge-button--link:hover {\n text-decoration: var(--_button-link-hover-text-decoration);\n}\n\n.forge-button--link:active {\n opacity: var(--_button-link-active-opacity);\n}\n\n.forge-button--pill {\n --_button-shape: var(--_button-pill-shape);\n --_button-padding-inline: var(--_button-pill-padding-inline);\n --forge-focus-indicator-shape: var(--_button-pill-shape);\n}\n\n.forge-button {\n --forge-icon-font-size: var(--_button-icon-size);\n}\n\n.forge-button--dense {\n --_button-height: var(--_button-dense-height);\n}\n\n:host {\n display: block;\n width: 100%;\n}\n\n.scroll-container {\n overflow: scroll;\n scrollbar-width: none;\n -webkit-overflow-scrolling: touch;\n width: 100%;\n height: 100%;\n}\n\n.suggestions-container {\n min-width: 100%;\n display: table;\n}\n\n.suggestions-inline {\n display: flex;\n align-items: center;\n flex-direction: row;\n flex-wrap: nowrap;\n width: max-content;\n gap: var(--forge-spacing-small, 12px);\n}\n\n.suggestions-block {\n display: flex;\n align-items: center;\n flex-direction: column;\n gap: var(--forge-spacing-small, 12px);\n}\n.suggestions-block > button {\n width: 100%;\n}\n\n.suggestion {\n --forge-button-shape: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n --forge-button-tonal-background: var(--forge-theme-tertiary-container, #d0d7ff);\n --forge-button-tonal-color: var(--forge-theme-on-tertiary-container, #213189);\n --forge-button-height: 32px;\n}';
1
+ const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\n.forge-button {\n --_button-primary-color: var(--forge-button-primary-color, var(--forge-theme-primary, #3f51b5));\n --_button-text-color: var(--forge-button-text-color, var(--_button-primary-color));\n --_button-disabled-color: var(--forge-button-disabled-color, var(--forge-theme-surface-container, #e0e0e0));\n --_button-padding: var(--forge-button-padding, var(--forge-spacing-medium, 16px));\n --_button-display: var(--forge-button-display, inline-grid);\n --_button-justify: var(--forge-button-justify, center);\n --_button-shape: var(--forge-button-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n --_button-height: var(--forge-button-height, 36px);\n --_button-min-width: var(--forge-button-min-width, 64px);\n --_button-spacing: var(--forge-button-spacing, var(--forge-spacing-xsmall, 8px));\n --_button-border-width: var(--forge-button-border-width, medium);\n --_button-border-style: var(--forge-button-border-style, none);\n --_button-border-color: var(--forge-button-border-color, currentColor);\n --_button-shape-start-start-radius: var(--forge-button-shape-start-start-radius, var(--_button-shape));\n --_button-shape-start-end-radius: var(--forge-button-shape-start-end-radius, var(--_button-shape));\n --_button-shape-end-start-radius: var(--forge-button-shape-end-start-radius, var(--_button-shape));\n --_button-shape-end-end-radius: var(--forge-button-shape-end-end-radius, var(--_button-shape));\n --_button-padding-block: var(--forge-button-padding-block, var(--_button-0));\n --_button-padding-inline: var(--forge-button-padding-inline, var(--_button-padding));\n --_button-background: var(--forge-button-background, transparent);\n --_button-hover-background: var(--forge-button-hover-background, var(--_button-background));\n --_button-active-background: var(--forge-button-active-background, var(--_button-background));\n --_button-color: var(--forge-button-color, var(--_button-text-color));\n --_button-icon-size: var(--forge-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));\n --_button-shadow: var(--forge-button-shadow, none);\n --_button-hover-shadow: var(--forge-button-hover-shadow, none);\n --_button-active-shadow: var(--forge-button-active-shadow, none);\n --_button-cursor: var(--forge-button-cursor, pointer);\n --_button-transition-duration: var(--forge-button-transition-duration, var(--forge-animation-duration-short3, 150ms));\n --_button-transition-timing: var(--forge-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n --_button-text-padding-inline: var(--forge-button-text-padding-inline, var(--forge-spacing-xsmall, 8px));\n --_button-outlined-background: var(--forge-button-outlined-background, transparent);\n --_button-outlined-color: var(--forge-button-outlined-color, var(--_button-primary-color));\n --_button-outlined-border-width: var(--forge-button-outlined-border-width, var(--forge-border-thin, 1px));\n --_button-outlined-border-style: var(--forge-button-outlined-border-style, solid);\n --_button-outlined-border-color: var(--forge-button-outlined-border-color, var(--_button-primary-color));\n --_button-tonal-background: var(--forge-button-tonal-background, var(--forge-theme-primary-container, #d1d5ed));\n --_button-tonal-disabled-background: var(--forge-button-tonal-disabled-background, var(--_button-disabled-color));\n --_button-tonal-color: var(--forge-button-tonal-color, var(--forge-theme-on-primary-container, #222c62));\n --_button-tonal-disabled-color: var(--forge-button-tonal-disabled-color, var(--_button-disabled-text-color));\n --_button-filled-background: var(--forge-button-filled-background, var(--_button-primary-color));\n --_button-filled-disabled-background: var(--forge-button-filled-disabled-background, var(--_button-disabled-color));\n --_button-filled-color: var(--forge-button-filled-color, var(--forge-theme-on-primary, #ffffff));\n --_button-filled-disabled-color: var(--forge-button-filled-disabled-color, var(--_button-disabled-text-color));\n --_button-raised-background: var(--forge-button-raised-background, var(--_button-primary-color));\n --_button-raised-disabled-background: var(--forge-button-raised-disabled-background, var(--_button-disabled-color));\n --_button-raised-color: var(--forge-button-raised-color, var(--forge-theme-on-primary, #ffffff));\n --_button-raised-disabled-color: var(--forge-button-raised-disabled-color, var(--_button-disabled-text-color));\n --_button-raised-shadow: var(--forge-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));\n --_button-raised-hover-shadow: var(--forge-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));\n --_button-raised-active-shadow: var(--forge-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));\n --_button-raised-disabled-shadow: var(--forge-button-raised-disabled-shadow, none);\n --_button-link-color: var(--forge-button-link-color, var(--_button-primary-color));\n --_button-link-text-decoration: var(--forge-button-link-text-decoration, underline);\n --_button-link-height: var(--forge-button-link-height, auto);\n --_button-link-padding: var(--forge-button-link-padding, 0);\n --_button-link-line-height: var(--forge-button-link-line-height, normal);\n --_button-link-width: var(--forge-button-link-width, auto);\n --_button-link-hover-text-decoration: var(--forge-button-link-hover-text-decoration, none);\n --_button-link-active-opacity: var(--forge-button-link-active-opacity, 0.65);\n --_button-link-transition-duration: var(--forge-button-link-transition-duration, var(--forge-animation-duration-short3, 150ms));\n --_button-link-transition-timing: var(--forge-button-link-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n --_button-disabled-cursor: var(--forge-button-disabled-cursor, not-allowed);\n --_button-disabled-text-color: var(--forge-button-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));\n --_button-disabled-background: var(--forge-button-disabled-background, transparent);\n --_button-disabled-border-color: var(--forge-button-disabled-border-color, var(--_button-disabled-color));\n --_button-disabled-shadow: var(--forge-button-disabled-shadow, none);\n --_button-dense-height: var(--forge-button-dense-height, 24px);\n --_button-pill-shape: var(--forge-button-pill-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n --_button-pill-padding-inline: var(--forge-button-pill-padding-inline, var(--forge-spacing-small, 12px));\n --_button-focus-indicator-offset: var(--forge-button-focus-indicator-offset, 4px);\n --_button-text-focus-indicator-offset: var(--forge-button-text-focus-indicator-offset, 0px);\n --_button-link-focus-indicator-offset: var(--forge-button-link-focus-indicator-offset, 2px);\n --_button-popover-icon-transition-duration: var(--forge-button-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));\n --_button-popover-icon-transition-timing: var(--forge-button-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n --_button-popover-icon-open-rotation: var(--forge-button-popover-icon-open-rotation, 180deg);\n}\n\n.forge-button {\n display: var(--_button-display);\n position: relative;\n outline: none;\n vertical-align: middle;\n -webkit-tap-highlight-color: transparent;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-button-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, 0.875)));\n font-weight: var(--forge-typography-button-font-weight, 500);\n line-height: var(--forge-typography-button-line-height, normal);\n letter-spacing: var(--forge-typography-button-letter-spacing, 0.0714285714em);\n text-transform: var(--forge-typography-button-text-transform, inherit);\n text-decoration: var(--forge-typography-button-text-decoration, inherit);\n position: relative;\n display: var(--_button-display);\n grid-auto-flow: column;\n align-items: center;\n justify-content: var(--_button-justify);\n gap: var(--_button-spacing);\n z-index: 0;\n box-sizing: border-box;\n min-inline-size: var(--_button-min-width);\n height: var(--_button-height);\n inline-size: 100%;\n border-width: var(--_button-border-width);\n border-style: var(--_button-border-style);\n border-color: var(--_button-border-color);\n border-start-start-radius: var(--_button-shape-start-start-radius);\n border-start-end-radius: var(--_button-shape-start-end-radius);\n border-end-start-radius: var(--_button-shape-end-start-radius);\n border-end-end-radius: var(--_button-shape-end-end-radius);\n padding-block: var(--_button-padding-block);\n padding-inline: var(--_button-padding-inline);\n box-shadow: var(--_button-shadow);\n outline: none;\n user-select: none;\n -webkit-appearance: none;\n vertical-align: middle;\n text-decoration: none;\n white-space: nowrap;\n background: var(--_button-background);\n color: var(--_button-color);\n cursor: var(--_button-cursor);\n transition-property: box-shadow, background;\n transition-duration: var(--_button-transition-duration);\n transition-timing-function: var(--_button-transition-timing);\n}\n\n.forge-button::-moz-focus-inner {\n padding: 0;\n border: 0;\n}\n\n.forge-button:hover {\n --_button-shadow: var(--_button-hover-shadow);\n background: var(--_button-hover-background);\n}\n\n.forge-button:active {\n --_button-shadow: var(--_button-active-shadow);\n background: var(--_button-active-background);\n}\n\n.forge-button {\n position: relative;\n inline-size: auto;\n}\n\n.forge-button:not(:disabled):not(.forge-button--link) {\n --_state-layer-display: var(--forge-state-layer-display, flex);\n --_state-layer-color: var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));\n --_state-layer-hover-color: var(--forge-state-layer-hover-color, var(--_state-layer-color));\n --_state-layer-hover-opacity: var(--forge-state-layer-hover-opacity, 0.08);\n --_state-layer-pressed-color: var(--forge-state-layer-pressed-color, var(--_state-layer-color));\n --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.12);\n --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 15ms);\n --_state-layer-pressed-duration: var(--forge-state-layer-pressed-duration, 105ms);\n --_state-layer-animation-duration: var(--forge-state-layer-animation-duration, 375ms);\n}\n\n.forge-button:not(:disabled):not(.forge-button--link)::before {\n opacity: 0;\n position: absolute;\n background-color: var(--_state-layer-hover-color);\n inset: 0;\n transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;\n --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 100ms);\n content: "";\n opacity: 0;\n border-radius: inherit;\n}\n\n.forge-button:not(:disabled):not(.forge-button--link):hover::before {\n background-color: var(--_state-layer-hover-color);\n opacity: var(--_state-layer-hover-opacity);\n}\n\n.forge-button:not(:disabled):not(.forge-button--link):active::before {\n opacity: var(--_state-layer-pressed-opacity);\n transition-duration: var(--_state-layer-pressed-duration);\n --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.18);\n}\n\n@keyframes forge-focus-indicator-outward-grow {\n from {\n outline-width: 0;\n }\n to {\n outline-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-outward-shrink {\n from {\n outline-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-inward-grow {\n from {\n border-width: 0;\n }\n to {\n border-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-inward-shrink {\n from {\n border-width: var(--_focus-indicator-active-width);\n }\n}\n.forge-button:not(:disabled) {\n outline: none;\n}\n\n.forge-button:not(:disabled):focus-visible::after {\n --_focus-indicator-display: var(--forge-focus-indicator-display, flex);\n --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));\n --_focus-indicator-active-width: var(--forge-focus-indicator-active-width, 6px);\n --_focus-indicator-color: var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n --_focus-indicator-shape: var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));\n --_focus-indicator-duration: var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));\n --_focus-indicator-easing: var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));\n --_focus-indicator-shape-start-start: var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));\n --_focus-indicator-shape-start-end: var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));\n --_focus-indicator-shape-end-end: var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));\n --_focus-indicator-shape-end-start: var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));\n --_focus-indicator-outward-offset: var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));\n --_focus-indicator-inward-offset: var(--forge-focus-indicator-inward-offset, 0px);\n --_focus-indicator-offset-block: var(--forge-focus-indicator-offset-block, 0);\n --_focus-indicator-offset-inline: var(--forge-focus-indicator-offset-inline, 0);\n}\n\n.forge-button:not(:disabled):focus-visible::after {\n animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);\n animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);\n animation-timing-function: var(--_focus-indicator-easing);\n box-sizing: border-box;\n color: var(--_focus-indicator-color);\n display: none;\n pointer-events: none;\n position: absolute;\n margin-block: var(--_focus-indicator-offset-block);\n margin-inline: var(--_focus-indicator-offset-inline);\n animation-name: forge-focus-indicator-outward-grow, forge-focus-indicator-outward-shrink;\n border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));\n border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));\n border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));\n border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));\n inset: calc(-1 * var(--_focus-indicator-outward-offset));\n outline: var(--_focus-indicator-width) solid currentColor;\n content: "";\n display: block;\n}\n\n.forge-button:not(:disabled) {\n --forge-focus-indicator-color: var(--_button-primary-color);\n}\n\n.forge-button:disabled {\n cursor: var(--_button-disabled-cursor);\n --_button-background: var(--_button-disabled-background);\n --_button-color: var(--_button-disabled-text-color);\n --_button-shadow: var(--_button-disabled-shadow);\n pointer-events: none;\n pointer-events: initial;\n}\n\n.forge-button:where(:not(.forge-button--outlined, .forge-button--tonal, .forge-button--filled, .forge-button--raised, .forge-button--link)), .forge-button--text {\n --_button-padding-inline: var(--_button-text-padding-inline);\n}\n\n.forge-button--outlined {\n --_button-background: var(--_button-outlined-background);\n --_button-color: var(--_button-outlined-color);\n --_button-border-width: var(--_button-outlined-border-width);\n --_button-border-style: var(--_button-outlined-border-style);\n --_button-border-color: var(--_button-outlined-border-color);\n}\n\n.forge-button--outlined:disabled {\n --_button-border-color: var(--_button-disabled-border-color);\n}\n\n.forge-button--tonal {\n --_button-background: var(--_button-tonal-background);\n --_button-color: var(--_button-tonal-color);\n}\n\n.forge-button--tonal:disabled {\n --_button-background: var(--_button-tonal-disabled-background);\n --_button-color: var(--_button-tonal-disabled-color);\n}\n\n.forge-button--filled, .forge-button--raised {\n --_button-background: var(--_button-filled-background);\n --_button-color: var(--_button-filled-color);\n --forge-state-layer-color: var(--_button-filled-color);\n}\n\n.forge-button--filled:disabled, .forge-button--raised:disabled {\n --_button-background: var(--_button-filled-disabled-background);\n --_button-color: var(--_button-filled-disabled-color);\n}\n\n.forge-button--raised {\n --_button-background: var(--_button-raised-background);\n --_button-color: var(--_button-raised-color);\n --_button-shadow: var(--_button-raised-shadow);\n}\n\n.forge-button--raised:hover {\n --_button-shadow: var(--_button-raised-hover-shadow);\n}\n\n.forge-button--raised:active {\n --_button-shadow: var(--_button-raised-active-shadow);\n}\n\n.forge-button--raised:disabled {\n --_button-background: var(--_button-raised-disabled-background);\n --_button-color: var(--_button-raised-disabled-color);\n --_button-shadow: var(--_button-raised-disabled-shadow);\n}\n\n.forge-button--link {\n --_button-color: var(--_button-link-color);\n --_button-height: var(--_button-link-height);\n --_button-padding: var(--_button-link-padding);\n --_button-focus-indicator-offset: var(--_button-link-focus-indicator-offset);\n text-decoration: var(--_button-link-text-decoration);\n line-height: var(--_button-link-line-height);\n transition: opacity var(--_button-link-transition-duration) var(--_button-link-transition-timing);\n inline-size: var(--_button-link-width);\n}\n\n.forge-button--link:hover {\n text-decoration: var(--_button-link-hover-text-decoration);\n}\n\n.forge-button--link:active {\n opacity: var(--_button-link-active-opacity);\n}\n\n.forge-button--pill {\n --_button-shape: var(--_button-pill-shape);\n --_button-padding-inline: var(--_button-pill-padding-inline);\n --forge-focus-indicator-shape: var(--_button-pill-shape);\n}\n\n.forge-button {\n --forge-icon-font-size: var(--_button-icon-size);\n}\n\n.forge-button--dense {\n --_button-height: var(--_button-dense-height);\n}\n\n:host {\n display: block;\n width: 100%;\n}\n\n.scroll-container {\n overflow: scroll;\n scrollbar-width: none;\n -webkit-overflow-scrolling: touch;\n width: 100%;\n height: 100%;\n}\n\n.suggestions-container {\n min-width: 100%;\n display: table;\n}\n\n.suggestions-inline {\n display: flex;\n align-items: center;\n flex-direction: row;\n flex-wrap: nowrap;\n width: max-content;\n gap: var(--forge-spacing-small, 12px);\n}\n\n.suggestions-block {\n display: flex;\n align-items: center;\n flex-direction: column;\n gap: var(--forge-spacing-small, 12px);\n}\n.suggestions-block > button {\n width: 100%;\n}\n\n.suggestion {\n --forge-button-shape: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n --forge-button-tonal-background: var(--forge-theme-tertiary-container, #d0d7ff);\n --forge-button-tonal-color: var(--forge-theme-on-tertiary-container, #213189);\n}';
2
2
  export {
3
3
  styles as default
4
4
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tylertech/forge-ai",
3
- "version": "0.3.1",
3
+ "version": "0.4.0",
4
4
  "description": "A library of Tyler Forge™ AI chat interface web components.",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Tyler Technologies, Inc.",
@@ -38,63 +38,6 @@
38
38
  "type": "git",
39
39
  "url": "git+https://github.com/tyler-technologies-oss/forge-ai.git"
40
40
  },
41
- "dependencies": {
42
- "@floating-ui/dom": "^1.7.4",
43
- "@tylertech/tyler-icons": "2.0.4",
44
- "lit": "3.3.1"
45
- },
46
- "peerDependencies": {
47
- "@tylertech/forge": "^3.0.0"
48
- },
49
- "devDependencies": {
50
- "@custom-elements-manifest/analyzer": "0.10.10",
51
- "@esm-bundle/chai": "4.3.4-fix.0",
52
- "@open-wc/testing": "4.0.0",
53
- "@repo/prettier-config": "",
54
- "@storybook/addon-a11y": "9.1.12",
55
- "@storybook/addon-docs": "9.1.12",
56
- "@storybook/addon-links": "9.1.12",
57
- "@storybook/addon-themes": "9.1.12",
58
- "@storybook/web-components-vite": "9.1.12",
59
- "@tylertech/forge": "3.11.0",
60
- "@tylertech/stylelint-rules": "5.1.2",
61
- "@types/cssbeautify": "^0.3.5",
62
- "@types/mocha": "10.0.10",
63
- "@types/node": "24.8.0",
64
- "@types/react": "^18.3.26",
65
- "@types/sinon": "17.0.4",
66
- "@ungap/structured-clone": "^1.3.0",
67
- "@vueless/storybook-dark-mode": "9.0.9",
68
- "@wc-toolkit/jsdoc-tags": "^1.1.0",
69
- "@web/dev-server-esbuild": "1.0.4",
70
- "@web/dev-server-rollup": "0.6.4",
71
- "@web/test-runner": "0.20.2",
72
- "@web/test-runner-commands": "0.9.0",
73
- "@web/test-runner-junit-reporter": "0.8.0",
74
- "@web/test-runner-playwright": "0.11.1",
75
- "cssbeautify": "^0.3.1",
76
- "custom-element-svelte-integration": "^1.2.0",
77
- "custom-element-vuejs-integration": "^1.4.0",
78
- "eslint": "9.37.0",
79
- "glob": "11.0.3",
80
- "lit-analyzer": "2.0.3",
81
- "plop": "4.0.4",
82
- "postcss-lit": "1.3.1",
83
- "react": "^18.3.1",
84
- "react-dom": "^18.3.1",
85
- "react-ga4": "^2.1.0",
86
- "remark-gfm": "4.0.1",
87
- "rimraf": "6.0.1",
88
- "sass": "1.93.2",
89
- "sinon": "21.0.0",
90
- "storybook": "9.1.12",
91
- "stylelint": "16.25.0",
92
- "stylelint-config-standard": "39.0.1",
93
- "typescript": "~5.9.3",
94
- "vite": "7.1.10",
95
- "vite-plugin-dts": "4.5.4",
96
- "vite-tsconfig-paths": "5.1.4"
97
- },
98
41
  "scripts": {
99
42
  "dev": "vite src/dev/ -c vite.config.mts",
100
43
  "start": "pnpm run storybook",
@@ -118,5 +61,62 @@
118
61
  "test:ci": "wtr --group lib",
119
62
  "ci:package": "tar -czvhf deployment-assets.tar.gz -C cdn-deployment/@tylertech/forge-ai .",
120
63
  "plop": "plop"
64
+ },
65
+ "dependencies": {
66
+ "@floating-ui/dom": "^1.7.4",
67
+ "@tylertech/tyler-icons": "catalog:",
68
+ "lit": "catalog:"
69
+ },
70
+ "peerDependencies": {
71
+ "@tylertech/forge": "^3.0.0"
72
+ },
73
+ "devDependencies": {
74
+ "@custom-elements-manifest/analyzer": "catalog:",
75
+ "@esm-bundle/chai": "catalog:",
76
+ "@open-wc/testing": "catalog:",
77
+ "@repo/prettier-config": "workspace:",
78
+ "@storybook/addon-a11y": "catalog:",
79
+ "@storybook/addon-docs": "catalog:",
80
+ "@storybook/addon-links": "catalog:",
81
+ "@storybook/addon-themes": "catalog:",
82
+ "@storybook/web-components-vite": "catalog:",
83
+ "@tylertech/forge": "catalog:",
84
+ "@tylertech/stylelint-rules": "catalog:",
85
+ "@types/cssbeautify": "^0.3.5",
86
+ "@types/mocha": "catalog:",
87
+ "@types/node": "catalog:",
88
+ "@types/react": "^18.3.26",
89
+ "@types/sinon": "catalog:",
90
+ "@ungap/structured-clone": "^1.3.0",
91
+ "@vueless/storybook-dark-mode": "catalog:",
92
+ "@wc-toolkit/jsdoc-tags": "^1.1.0",
93
+ "@web/dev-server-esbuild": "catalog:",
94
+ "@web/dev-server-rollup": "catalog:",
95
+ "@web/test-runner": "catalog:",
96
+ "@web/test-runner-commands": "catalog:",
97
+ "@web/test-runner-junit-reporter": "catalog:",
98
+ "@web/test-runner-playwright": "catalog:",
99
+ "cssbeautify": "^0.3.1",
100
+ "custom-element-svelte-integration": "^1.2.0",
101
+ "custom-element-vuejs-integration": "^1.4.0",
102
+ "eslint": "catalog:",
103
+ "glob": "catalog:",
104
+ "lit-analyzer": "catalog:",
105
+ "plop": "catalog:",
106
+ "postcss-lit": "catalog:",
107
+ "react": "^18.3.1",
108
+ "react-dom": "^18.3.1",
109
+ "react-ga4": "^2.1.0",
110
+ "remark-gfm": "catalog:",
111
+ "rimraf": "catalog:",
112
+ "sass": "catalog:",
113
+ "sinon": "catalog:",
114
+ "storybook": "catalog:",
115
+ "stylelint": "catalog:",
116
+ "stylelint-config-standard": "catalog:",
117
+ "typescript": "~5.9.3",
118
+ "vite": "catalog:",
119
+ "vite-plugin-dts": "catalog:",
120
+ "vite-tsconfig-paths": "catalog:"
121
121
  }
122
- }
122
+ }