@tylertech/forge 3.9.0-dev.3 → 3.9.0-dev.4

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 (63) hide show
  1. package/custom-elements.json +1245 -1714
  2. package/dist/lib.js +17 -95
  3. package/dist/lib.js.map +3 -3
  4. package/dist/vscode.css-custom-data.json +133 -140
  5. package/dist/vscode.html-custom-data.json +101 -143
  6. package/esm/core/utils/dismissible-stack.d.ts +3 -2
  7. package/esm/core/utils/dismissible-stack.js +3 -2
  8. package/esm/date-picker/base/base-date-picker-adapter.js +0 -3
  9. package/esm/dialog/dialog-core.js +8 -0
  10. package/esm/drawer/mini-drawer/mini-drawer.js +1 -1
  11. package/esm/icon-button/icon-button-core.js +2 -11
  12. package/esm/split-view/split-view-panel/split-view-panel.js +1 -1
  13. package/esm/table/table-constants.d.ts +1 -0
  14. package/esm/table/table-constants.js +1 -0
  15. package/esm/table/table-core.js +2 -1
  16. package/esm/table/table.d.ts +2 -0
  17. package/esm/table/table.js +1 -0
  18. package/package.json +5 -5
  19. package/sass/calendar/calendar-menu/_variables.scss +1 -1
  20. package/sass/color-picker/_mixins.scss +5 -5
  21. package/sass/core/styles/theme/_color-utils.scss +1 -1
  22. package/sass/core/styles/tokens/app-bar/app-bar/_tokens.scss +1 -1
  23. package/sass/drawer/mini-drawer/mini-drawer.scss +0 -1
  24. package/esm/data-table/body/body.d.ts +0 -33
  25. package/esm/data-table/body/body.js +0 -42
  26. package/esm/data-table/body/index.d.ts +0 -6
  27. package/esm/data-table/body/index.js +0 -6
  28. package/esm/data-table/cell/cell.d.ts +0 -33
  29. package/esm/data-table/cell/cell.js +0 -42
  30. package/esm/data-table/cell/index.d.ts +0 -6
  31. package/esm/data-table/cell/index.js +0 -6
  32. package/esm/data-table/column/column.d.ts +0 -33
  33. package/esm/data-table/column/column.js +0 -42
  34. package/esm/data-table/column/index.d.ts +0 -6
  35. package/esm/data-table/column/index.js +0 -6
  36. package/esm/data-table/footer/footer.d.ts +0 -33
  37. package/esm/data-table/footer/footer.js +0 -42
  38. package/esm/data-table/footer/index.d.ts +0 -6
  39. package/esm/data-table/footer/index.js +0 -6
  40. package/esm/data-table/head/head.d.ts +0 -33
  41. package/esm/data-table/head/head.js +0 -42
  42. package/esm/data-table/head/index.d.ts +0 -6
  43. package/esm/data-table/head/index.js +0 -6
  44. package/esm/data-table/index.d.ts +0 -12
  45. package/esm/data-table/index.js +0 -12
  46. package/esm/data-table/row/index.d.ts +0 -6
  47. package/esm/data-table/row/index.js +0 -6
  48. package/esm/data-table/row/row.d.ts +0 -33
  49. package/esm/data-table/row/row.js +0 -42
  50. package/esm/data-table/table/index.d.ts +0 -6
  51. package/esm/data-table/table/index.js +0 -6
  52. package/esm/data-table/table/table.d.ts +0 -36
  53. package/esm/data-table/table/table.js +0 -40
  54. package/sass/data-table/_core.scss +0 -52
  55. package/sass/data-table/_token-utils.scss +0 -15
  56. package/sass/data-table/body/body.scss +0 -27
  57. package/sass/data-table/cell/cell.scss +0 -27
  58. package/sass/data-table/column/column.scss +0 -27
  59. package/sass/data-table/footer/footer.scss +0 -27
  60. package/sass/data-table/head/head.scss +0 -27
  61. package/sass/data-table/index.scss +0 -12
  62. package/sass/data-table/row/row.scss +0 -27
  63. package/sass/data-table/table/table.scss +0 -16
@@ -127,9 +127,25 @@
127
127
  "references": []
128
128
  },
129
129
  {
130
- "name": "forge-badge",
131
- "description": "\n---\n\n\n### **Slots:**\n - _default_ - Default content placed inside the badge.\n- **start** - Content placed before the default content.\n- **end** - Content placed after the default content.\n\n### **CSS Properties:**\n - **--forge-badge-background** - The background color. _(default: undefined)_\n- **--forge-badge-color** - The text color. _(default: undefined)_\n- **--forge-badge-shape** - The shape radius. _(default: undefined)_\n- **--forge-badge-padding-inline** - The inline padding. _(default: undefined)_\n- **--forge-badge-padding-block** - The block padding. _(default: undefined)_\n- **--forge-badge-border-width** - The border width. _(default: undefined)_\n- **--forge-badge-border-color** - The border color. _(default: undefined)_\n- **--forge-badge-border-style** - The border style. _(default: undefined)_\n- **--forge-badge-gap** - The spacing between the content within the badge. _(default: undefined)_",
132
- "attributes": [],
130
+ "name": "forge-avatar",
131
+ "description": "Avatars represent an entity via text or image.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for avatar content if not provided via text/imageUrl.\n\n### **CSS Properties:**\n - **--forge-avatar-background** - The background color of the avatar. _(default: undefined)_\n- **--forge-avatar-shape** - The border radius of the avatar, defaults to 50%. _(default: undefined)_\n- **--forge-avatar-color** - The text color of the avatar. _(default: undefined)_\n- **--forge-avatar-size** - The height and width of the avatar. _(default: undefined)_\n- **--forge-avatar-transition-duration** - The transition duration for animations. _(default: undefined)_\n- **--forge-avatar-transition-timing** - The transition timing function for animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.",
132
+ "attributes": [
133
+ {
134
+ "name": "text",
135
+ "description": "The text to display in the avatar.",
136
+ "values": []
137
+ },
138
+ {
139
+ "name": "letter-count",
140
+ "description": "Controls the number of letters to display from the text. By default the text is split on spaces and the first character of each word is used.",
141
+ "values": []
142
+ },
143
+ {
144
+ "name": "image-url",
145
+ "description": "The background image URL to use.",
146
+ "values": []
147
+ }
148
+ ],
133
149
  "references": []
134
150
  },
135
151
  {
@@ -150,25 +166,9 @@
150
166
  "references": []
151
167
  },
152
168
  {
153
- "name": "forge-avatar",
154
- "description": "Avatars represent an entity via text or image.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for avatar content if not provided via text/imageUrl.\n\n### **CSS Properties:**\n - **--forge-avatar-background** - The background color of the avatar. _(default: undefined)_\n- **--forge-avatar-shape** - The border radius of the avatar, defaults to 50%. _(default: undefined)_\n- **--forge-avatar-color** - The text color of the avatar. _(default: undefined)_\n- **--forge-avatar-size** - The height and width of the avatar. _(default: undefined)_\n- **--forge-avatar-transition-duration** - The transition duration for animations. _(default: undefined)_\n- **--forge-avatar-transition-timing** - The transition timing function for animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.",
155
- "attributes": [
156
- {
157
- "name": "text",
158
- "description": "The text to display in the avatar.",
159
- "values": []
160
- },
161
- {
162
- "name": "letter-count",
163
- "description": "Controls the number of letters to display from the text. By default the text is split on spaces and the first character of each word is used.",
164
- "values": []
165
- },
166
- {
167
- "name": "image-url",
168
- "description": "The background image URL to use.",
169
- "values": []
170
- }
171
- ],
169
+ "name": "forge-badge",
170
+ "description": "\n---\n\n\n### **Slots:**\n - _default_ - Default content placed inside the badge.\n- **start** - Content placed before the default content.\n- **end** - Content placed after the default content.\n\n### **CSS Properties:**\n - **--forge-badge-background** - The background color. _(default: undefined)_\n- **--forge-badge-color** - The text color. _(default: undefined)_\n- **--forge-badge-shape** - The shape radius. _(default: undefined)_\n- **--forge-badge-padding-inline** - The inline padding. _(default: undefined)_\n- **--forge-badge-padding-block** - The block padding. _(default: undefined)_\n- **--forge-badge-border-width** - The border width. _(default: undefined)_\n- **--forge-badge-border-color** - The border color. _(default: undefined)_\n- **--forge-badge-border-style** - The border style. _(default: undefined)_\n- **--forge-badge-gap** - The spacing between the content within the badge. _(default: undefined)_",
171
+ "attributes": [],
172
172
  "references": []
173
173
  },
174
174
  {
@@ -1268,49 +1268,49 @@
1268
1268
  "references": []
1269
1269
  },
1270
1270
  {
1271
- "name": "forge-label-value",
1272
- "description": "Label-value pairs are used to display a label and a value in a compact format.\n---\n\n\n### **Slots:**\n - **label** - The label to display.\n- **value** - The value to display.\n- **icon** - An icon to display next to the label.\n\n### **CSS Properties:**\n - **--forge-label-value-align** - Aligns the label and value. Possible values: `start` (default), `center`, `end`. _(default: undefined)_\n- **--forge-label-value-label-spacing** - The spacing between the label and value. _(default: undefined)_\n- **--forge-label-value-label-block-start-spacing** - The block start spacing for the label. _(default: undefined)_\n- **--forge-label-value-label-block-end-spacing** - The block end spacing for the label. _(default: undefined)_\n- **--forge-label-value-label-color** - The color to apply to the label. _(default: undefined)_\n- **--forge-label-value-icon-spacing** - The spacing between the icon and the label. _(default: undefined)_\n- **--forge-label-value-inline-label-spacing** - The spacing between the label and value when displayed inline. _(default: undefined)_\n- **--forge-label-value-empty-color** - The color to apply to the value when empty. _(default: undefined)_\n- **--forge-label-value-empty-style** - The font-style to apply to the value when empty. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root layout container element.\n- **label** - The label container element.\n- **value** - The value container element.\n- **icon** - The icon container element.",
1271
+ "name": "forge-label",
1272
+ "description": "The Forge Label component is used to associate a text label with a compatible Forge component.\n---\n\n\n### **Methods:**\n - **update(): _void_** - Updates the targeted element with the label's current text content.",
1273
1273
  "attributes": [
1274
1274
  {
1275
- "name": "empty",
1276
- "description": "If present, the value will be displayed in an alternative emphasized style.",
1275
+ "name": "for",
1276
+ "description": "The id of the associated element.",
1277
1277
  "values": []
1278
1278
  },
1279
1279
  {
1280
- "name": "ellipsis",
1281
- "description": "If present, the value will be truncated with an ellipsis if it overflows its container.",
1280
+ "name": "dynamic",
1281
+ "description": "Propagates changes in the label's text content to the associated element.",
1282
1282
  "values": []
1283
1283
  },
1284
1284
  {
1285
- "name": "inline",
1286
- "description": "If present, the label and value will be displayed on the same line.",
1285
+ "name": "non-interactive",
1286
+ "description": "Removes click handling from the label.",
1287
+ "values": []
1288
+ },
1289
+ {
1290
+ "name": "legend",
1291
+ "description": "Whether or not the label should be associated with an ancestor element.",
1287
1292
  "values": []
1288
1293
  }
1289
1294
  ],
1290
1295
  "references": []
1291
1296
  },
1292
1297
  {
1293
- "name": "forge-label",
1294
- "description": "The Forge Label component is used to associate a text label with a compatible Forge component.\n---\n\n\n### **Methods:**\n - **update(): _void_** - Updates the targeted element with the label's current text content.",
1298
+ "name": "forge-label-value",
1299
+ "description": "Label-value pairs are used to display a label and a value in a compact format.\n---\n\n\n### **Slots:**\n - **label** - The label to display.\n- **value** - The value to display.\n- **icon** - An icon to display next to the label.\n\n### **CSS Properties:**\n - **--forge-label-value-align** - Aligns the label and value. Possible values: `start` (default), `center`, `end`. _(default: undefined)_\n- **--forge-label-value-label-spacing** - The spacing between the label and value. _(default: undefined)_\n- **--forge-label-value-label-block-start-spacing** - The block start spacing for the label. _(default: undefined)_\n- **--forge-label-value-label-block-end-spacing** - The block end spacing for the label. _(default: undefined)_\n- **--forge-label-value-label-color** - The color to apply to the label. _(default: undefined)_\n- **--forge-label-value-icon-spacing** - The spacing between the icon and the label. _(default: undefined)_\n- **--forge-label-value-inline-label-spacing** - The spacing between the label and value when displayed inline. _(default: undefined)_\n- **--forge-label-value-empty-color** - The color to apply to the value when empty. _(default: undefined)_\n- **--forge-label-value-empty-style** - The font-style to apply to the value when empty. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root layout container element.\n- **label** - The label container element.\n- **value** - The value container element.\n- **icon** - The icon container element.",
1295
1300
  "attributes": [
1296
1301
  {
1297
- "name": "for",
1298
- "description": "The id of the associated element.",
1299
- "values": []
1300
- },
1301
- {
1302
- "name": "dynamic",
1303
- "description": "Propagates changes in the label's text content to the associated element.",
1302
+ "name": "empty",
1303
+ "description": "If present, the value will be displayed in an alternative emphasized style.",
1304
1304
  "values": []
1305
1305
  },
1306
1306
  {
1307
- "name": "non-interactive",
1308
- "description": "Removes click handling from the label.",
1307
+ "name": "ellipsis",
1308
+ "description": "If present, the value will be truncated with an ellipsis if it overflows its container.",
1309
1309
  "values": []
1310
1310
  },
1311
1311
  {
1312
- "name": "legend",
1313
- "description": "Whether or not the label should be associated with an ancestor element.",
1312
+ "name": "inline",
1313
+ "description": "If present, the label and value will be displayed on the same line.",
1314
1314
  "values": []
1315
1315
  }
1316
1316
  ],
@@ -2074,7 +2074,7 @@
2074
2074
  },
2075
2075
  {
2076
2076
  "name": "forge-table",
2077
- "description": "\n---\n\n\n### **Events:**\n - **forge-table-row-click** - Dispatched when a row is clicked. Only applies when `allow-row-click` is specified.\n- **forge-table-select** - Dispatched when a row is selected. Only applies when `select` is specified.\n- **forge-table-select-double** - Dispatched when a row is double-clicked. Only applies when `select` is specified.\n- **forge-table-select-all** - Dispatched when the select all checkbox is toggled. Only applies when `select` and `multiselect` is specified.\n- **forge-table-sort** - Dispatched when a column is sorted.\n- **forge-table-filter** - Dispatched when a column is filtered. Only applies when `filter` is specified.\n- **forge-table-initialized** - Dispatched when the table is initialized in the DOM for the first time.\n- **forge-table-column-resize** - Dispatched when a column is resized.\n- **forge-table-body-rendered** - Dispatched when the table body is rendered.\n\n### **Methods:**\n - **hideColumn(columnIndex: _number_): _void_** - Hides a column from the table.\n- **showColumn(columnIndex: _number_): _void_** - Shows a hidden column in th table.\n- **isColumnHidden(columnIndex: _number_): _boolean_** - Determines if a column at the given index is hidden or not.\n- **getSelectedRows(): _any[]_** - Returns the selected row instances.\n- **selectRow(data: _any_): _void_** - Selects a row in the table. Only applicable if `select` is true.\n- **selectRows(data: _any[]_, preserveExisting: _boolean_): _void_** - Selects one or more rows in the table. Only applicable if `select` is true.\n- **deselectRow(data: _any_): _void_** - Deselects a single row in the table.\n- **deselectRows(data: _any[]_): _void_** - Deselects one or more rows in the table.\n- **clearSelections(): _void_** - Clears all selected table rows.\n- **render(): _void_** - Forces the table to re-render based on its current configuration.\n- **expandRow(rowIndex: _any_, template: _TableViewTemplate_): _Promise<void>_** - Expands a collapsed row.\n- **collapseRow(rowIndex: _number_): _Promise<void>_** - Collapses an expanded row.\n- **isRowExpanded(rowIndex: _number_): _boolean_** - Checks if a row is expanded or not.\n- **selectRowsByIndex(indexes: _number | number[]_, preserveExisting: _boolean_): _void_** - Selects a rows by an index or array of indexes.\n- **deselectRowsByIndex(indexes: _number | number[]_): _void_** - Deselects a rows by an index or array of indexes.\n- **isRowSelected(rowData: _{ [key: string]: any }_): _boolean_** - Checks if a row is selected or not.",
2077
+ "description": "\n---\n\n\n### **Events:**\n - **forge-table-row-click** - Dispatched when a row is clicked. Only applies when `allow-row-click` is specified.\n- **forge-table-select** - Dispatched when a row is selected. Only applies when `select` is specified.\n- **forge-table-select-double** - Dispatched when a row is double-clicked. Only applies when `select` is specified.\n- **forge-table-select-all** - Dispatched when the select all checkbox is toggled. Only applies when `select` and `multiselect` is specified.\n- **forge-table-sort** - Dispatched when a column is sorted.\n- **forge-table-filter** - Dispatched when a column is filtered. Only applies when `filter` is specified.\n- **forge-table-initialized** - Dispatched when the table is initialized in the DOM for the first time.\n- **forge-table-column-resize** - Dispatched when a column is resized.\n- **forge-table-before-body-rendered** - Dispatched before the table body is rendered.\n- **forge-table-body-rendered** - Dispatched when the table body is rendered.\n\n### **Methods:**\n - **hideColumn(columnIndex: _number_): _void_** - Hides a column from the table.\n- **showColumn(columnIndex: _number_): _void_** - Shows a hidden column in th table.\n- **isColumnHidden(columnIndex: _number_): _boolean_** - Determines if a column at the given index is hidden or not.\n- **getSelectedRows(): _any[]_** - Returns the selected row instances.\n- **selectRow(data: _any_): _void_** - Selects a row in the table. Only applicable if `select` is true.\n- **selectRows(data: _any[]_, preserveExisting: _boolean_): _void_** - Selects one or more rows in the table. Only applicable if `select` is true.\n- **deselectRow(data: _any_): _void_** - Deselects a single row in the table.\n- **deselectRows(data: _any[]_): _void_** - Deselects one or more rows in the table.\n- **clearSelections(): _void_** - Clears all selected table rows.\n- **render(): _void_** - Forces the table to re-render based on its current configuration.\n- **expandRow(rowIndex: _any_, template: _TableViewTemplate_): _Promise<void>_** - Expands a collapsed row.\n- **collapseRow(rowIndex: _number_): _Promise<void>_** - Collapses an expanded row.\n- **isRowExpanded(rowIndex: _number_): _boolean_** - Checks if a row is expanded or not.\n- **selectRowsByIndex(indexes: _number | number[]_, preserveExisting: _boolean_): _void_** - Selects a rows by an index or array of indexes.\n- **deselectRowsByIndex(indexes: _number | number[]_): _void_** - Deselects a rows by an index or array of indexes.\n- **isRowSelected(rowData: _{ [key: string]: any }_): _boolean_** - Checks if a row is selected or not.",
2078
2078
  "attributes": [
2079
2079
  {
2080
2080
  "name": "select",
@@ -2916,48 +2916,6 @@
2916
2916
  ],
2917
2917
  "references": []
2918
2918
  },
2919
- {
2920
- "name": "forge-data-table-body",
2921
- "description": "Represents the body section of a data table.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for body content.\n\n### **CSS Parts:**\n - **root** - The root container element.",
2922
- "attributes": [],
2923
- "references": []
2924
- },
2925
- {
2926
- "name": "forge-data-table-cell",
2927
- "description": "Represents a cell in a data table.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for cell content.\n\n### **CSS Parts:**\n - **root** - The root container element.",
2928
- "attributes": [],
2929
- "references": []
2930
- },
2931
- {
2932
- "name": "forge-data-table-column",
2933
- "description": "Represents a column in a data table.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for column content.\n\n### **CSS Parts:**\n - **root** - The root container element.",
2934
- "attributes": [],
2935
- "references": []
2936
- },
2937
- {
2938
- "name": "forge-data-table-footer",
2939
- "description": "Represents the footer section of a data table.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for footer content.\n\n### **CSS Parts:**\n - **root** - The root container element.",
2940
- "attributes": [],
2941
- "references": []
2942
- },
2943
- {
2944
- "name": "forge-data-table-head",
2945
- "description": "Represents the header section of a data table.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for head content.\n\n### **CSS Parts:**\n - **root** - The root container element.",
2946
- "attributes": [],
2947
- "references": []
2948
- },
2949
- {
2950
- "name": "forge-data-table-row",
2951
- "description": "Represents a row in a data table.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for row content.\n\n### **CSS Parts:**\n - **root** - The root container element.",
2952
- "attributes": [],
2953
- "references": []
2954
- },
2955
- {
2956
- "name": "forge-data-table",
2957
- "description": "Data tables display information in a grid-like format of rows and columns.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for data table content.\n\n### **CSS Parts:**\n - **root** - The root container element.",
2958
- "attributes": [],
2959
- "references": []
2960
- },
2961
2919
  {
2962
2920
  "name": "forge-deprecated-button",
2963
2921
  "description": "@deprecated Use the `<forge-button>` element instead.\n\n\n---\n",
@@ -3091,63 +3049,6 @@
3091
3049
  ],
3092
3050
  "references": []
3093
3051
  },
3094
- {
3095
- "name": "forge-list-item",
3096
- "description": "List items are individual rows of content inside of a list.\n---\n\n\n### **Events:**\n - **forge-list-item-select** - Fires when the list item is selected.\n\n### **Slots:**\n - _default_ - The primary text.\n- **secondary-text** - The secondary text.\n- **tertiary-text** - The tertiary text.\n- **start** - The start content.\n- **end** - The end element.\n\n### **CSS Properties:**\n - **--forge-list-item-background** - The background color. _(default: undefined)_\n- **--forge-list-item-shape** - The shape of the list item. _(default: undefined)_\n- **--forge-list-item-padding** - The padding inside of the container element. _(default: undefined)_\n- **--forge-list-item-wrap-padding** - The padding inside of the container element when `wrap` is enabled. _(default: undefined)_\n- **--forge-list-item-margin** - The margin around the host element. _(default: undefined)_\n- **--forge-list-item-height** - The height of the container. _(default: undefined)_\n- **--forge-list-item-indent** - The margin inline state when in the indented state. _(default: undefined)_\n- **--forge-list-item-cursor** - The cursor when interactive. _(default: undefined)_\n- **--forge-list-item-gap** - The gap between the slotted content. _(default: undefined)_\n- **--forge-list-item-text-color** - The text color of the text. _(default: undefined)_\n- **--forge-list-item-text-font-size** - The font size of the text. _(default: undefined)_\n- **--forge-list-item-text-font-weight** - The font weight of the text. _(default: undefined)_\n- **--forge-list-item-text-line-height** - The line height of the text. _(default: undefined)_\n- **--forge-list-item-selected-color** - The foreground color when in the selected state. _(default: undefined)_\n- **--forge-list-item-selected-background** - The background color when in the selected state. _(default: undefined)_\n- **--forge-list-item-selected-opacity** - The opacity of the background color when in the selected state. _(default: undefined)_\n- **--forge-list-item-start-selected-color** - The color of the start content when in the selected state. _(default: undefined)_\n- **--forge-list-item-end-selected-color** - The color of the end content when in the selected state. _(default: undefined)_\n- **--forge-list-item-selected-text-color** - The color of the text when in the selected state. _(default: undefined)_\n- **--forge-list-item-disabled-opacity** - The opacity of the element when in the disabled state. _(default: undefined)_\n- **--forge-list-item-disabled-cursor** - The cursor when in the disabled state. _(default: undefined)_\n- **--forge-list-item-one-line-height** - The line height when in the one/single line state. _(default: undefined)_\n- **--forge-list-item-two-line-height** - The line height when in the two line state. _(default: undefined)_\n- **--forge-list-item-three-line-height** - The line height when in the three line state. _(default: undefined)_\n- **--forge-list-item-dense-one-line-height** - The line height when in the dense one/single line state. _(default: undefined)_\n- **--forge-list-item-dense-two-line-height** - The line height when in the dense two line state. _(default: undefined)_\n- **--forge-list-item-dense-three-line-height** - The line height when in the dense three line state. _(default: undefined)_\n- **--forge-list-item-dense-font-size** - The font size when in the dense state. _(default: undefined)_\n- **--forge-list-item-dense-indent** - The margin inline state when in the dense indented state. _(default: undefined)_\n- **--forge-list-item-dense-gap** - The gap between the slotted content when in the dense state. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **text-container** - The container for the text content.\n- **focus-indicator** - The forwarded focus indicator's internal indicator element.\n- **state-layer** - The forwarded state layer's internal surface element.",
3097
- "attributes": [
3098
- {
3099
- "name": "selected",
3100
- "description": "Applies the selected state to the list item.",
3101
- "values": []
3102
- },
3103
- {
3104
- "name": "active",
3105
- "description": "Applies the active state to the list item by emulating its focused state.",
3106
- "values": []
3107
- },
3108
- {
3109
- "name": "value",
3110
- "description": "The unique value of the list item.",
3111
- "values": []
3112
- },
3113
- {
3114
- "name": "dense",
3115
- "description": "Applies the dense state to the list item.",
3116
- "values": []
3117
- },
3118
- {
3119
- "name": "indented",
3120
- "description": "Applies the indented state by adding margin to the start of the list item.",
3121
- "values": []
3122
- },
3123
- {
3124
- "name": "two-line",
3125
- "description": "Sets the list item height to support at least two lines of text.",
3126
- "values": []
3127
- },
3128
- {
3129
- "name": "three-line",
3130
- "description": "Sets the list item height to support at least three lines of text.",
3131
- "values": []
3132
- },
3133
- {
3134
- "name": "wrap",
3135
- "description": "Sets the list item to wrap its text content.",
3136
- "values": []
3137
- },
3138
- {
3139
- "name": "noninteractive",
3140
- "description": "Controls whether the list item will automatically attach itself to interactive slotted elements or not.",
3141
- "values": []
3142
- },
3143
- {
3144
- "name": "focus-propagation",
3145
- "description": "Controls whether the interactive element will receive focus if a non-interactive element is clicked within the list item.",
3146
- "values": []
3147
- }
3148
- ],
3149
- "references": []
3150
- },
3151
3052
  {
3152
3053
  "name": "forge-meter",
3153
3054
  "description": "Meters display a scalar value within a defined range.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the meter's label.\n- **value** - A textual representation of the meter's value.\n\n### **CSS Properties:**\n - **--forge-meter-background** - The background color of the meter. _(default: undefined)_\n- **--forge-meter-color** - The color of the meter's bar. _(default: undefined)_\n- **--forge-meter-height** - The block size of the meter. _(default: undefined)_\n- **--forge-meter-shape** - The border radius of the meter. _(default: undefined)_\n- **--forge-meter-bar-inner-shape** - The border radius of the meter's bar. _(default: undefined)_\n- **--forge-meter-tickmarks** - The number of tickmarks to display. _(default: undefined)_\n- **--forge-meter-tickmark-opacity** - The opacity of the tickmarks. _(default: undefined)_\n- **--forge-meter-transition-duration** - The duration of transitions. _(default: undefined)_\n- **--forge-meter-transition-timing** - The timing function of transitions. _(default: undefined)_\n- **--forge-theme-success** - The color of the bar when the value is optimal. _(default: undefined)_\n- **--forge-theme-success-container-low** - The color of the track when the value is optimal. _(default: undefined)_\n- **--forge-theme-warning** - The color of the bar when the value is suboptimal. _(default: undefined)_\n- **--forge-theme-warning-container-low** - The color of the track when the value is suboptimal. _(default: undefined)_\n- **--forge-theme-error** - The color of the bar when the value is least optimal. _(default: undefined)_\n- **--forge-theme-error-container-low** - The color of the track when the value is least optimal. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **track** - The element comprising the meter's background.\n- **bar** - The bar representing the value.",
@@ -3230,6 +3131,63 @@
3230
3131
  ],
3231
3132
  "references": []
3232
3133
  },
3134
+ {
3135
+ "name": "forge-list-item",
3136
+ "description": "List items are individual rows of content inside of a list.\n---\n\n\n### **Events:**\n - **forge-list-item-select** - Fires when the list item is selected.\n\n### **Slots:**\n - _default_ - The primary text.\n- **secondary-text** - The secondary text.\n- **tertiary-text** - The tertiary text.\n- **start** - The start content.\n- **end** - The end element.\n\n### **CSS Properties:**\n - **--forge-list-item-background** - The background color. _(default: undefined)_\n- **--forge-list-item-shape** - The shape of the list item. _(default: undefined)_\n- **--forge-list-item-padding** - The padding inside of the container element. _(default: undefined)_\n- **--forge-list-item-wrap-padding** - The padding inside of the container element when `wrap` is enabled. _(default: undefined)_\n- **--forge-list-item-margin** - The margin around the host element. _(default: undefined)_\n- **--forge-list-item-height** - The height of the container. _(default: undefined)_\n- **--forge-list-item-indent** - The margin inline state when in the indented state. _(default: undefined)_\n- **--forge-list-item-cursor** - The cursor when interactive. _(default: undefined)_\n- **--forge-list-item-gap** - The gap between the slotted content. _(default: undefined)_\n- **--forge-list-item-text-color** - The text color of the text. _(default: undefined)_\n- **--forge-list-item-text-font-size** - The font size of the text. _(default: undefined)_\n- **--forge-list-item-text-font-weight** - The font weight of the text. _(default: undefined)_\n- **--forge-list-item-text-line-height** - The line height of the text. _(default: undefined)_\n- **--forge-list-item-selected-color** - The foreground color when in the selected state. _(default: undefined)_\n- **--forge-list-item-selected-background** - The background color when in the selected state. _(default: undefined)_\n- **--forge-list-item-selected-opacity** - The opacity of the background color when in the selected state. _(default: undefined)_\n- **--forge-list-item-start-selected-color** - The color of the start content when in the selected state. _(default: undefined)_\n- **--forge-list-item-end-selected-color** - The color of the end content when in the selected state. _(default: undefined)_\n- **--forge-list-item-selected-text-color** - The color of the text when in the selected state. _(default: undefined)_\n- **--forge-list-item-disabled-opacity** - The opacity of the element when in the disabled state. _(default: undefined)_\n- **--forge-list-item-disabled-cursor** - The cursor when in the disabled state. _(default: undefined)_\n- **--forge-list-item-one-line-height** - The line height when in the one/single line state. _(default: undefined)_\n- **--forge-list-item-two-line-height** - The line height when in the two line state. _(default: undefined)_\n- **--forge-list-item-three-line-height** - The line height when in the three line state. _(default: undefined)_\n- **--forge-list-item-dense-one-line-height** - The line height when in the dense one/single line state. _(default: undefined)_\n- **--forge-list-item-dense-two-line-height** - The line height when in the dense two line state. _(default: undefined)_\n- **--forge-list-item-dense-three-line-height** - The line height when in the dense three line state. _(default: undefined)_\n- **--forge-list-item-dense-font-size** - The font size when in the dense state. _(default: undefined)_\n- **--forge-list-item-dense-indent** - The margin inline state when in the dense indented state. _(default: undefined)_\n- **--forge-list-item-dense-gap** - The gap between the slotted content when in the dense state. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **text-container** - The container for the text content.\n- **focus-indicator** - The forwarded focus indicator's internal indicator element.\n- **state-layer** - The forwarded state layer's internal surface element.",
3137
+ "attributes": [
3138
+ {
3139
+ "name": "selected",
3140
+ "description": "Applies the selected state to the list item.",
3141
+ "values": []
3142
+ },
3143
+ {
3144
+ "name": "active",
3145
+ "description": "Applies the active state to the list item by emulating its focused state.",
3146
+ "values": []
3147
+ },
3148
+ {
3149
+ "name": "value",
3150
+ "description": "The unique value of the list item.",
3151
+ "values": []
3152
+ },
3153
+ {
3154
+ "name": "dense",
3155
+ "description": "Applies the dense state to the list item.",
3156
+ "values": []
3157
+ },
3158
+ {
3159
+ "name": "indented",
3160
+ "description": "Applies the indented state by adding margin to the start of the list item.",
3161
+ "values": []
3162
+ },
3163
+ {
3164
+ "name": "two-line",
3165
+ "description": "Sets the list item height to support at least two lines of text.",
3166
+ "values": []
3167
+ },
3168
+ {
3169
+ "name": "three-line",
3170
+ "description": "Sets the list item height to support at least three lines of text.",
3171
+ "values": []
3172
+ },
3173
+ {
3174
+ "name": "wrap",
3175
+ "description": "Sets the list item to wrap its text content.",
3176
+ "values": []
3177
+ },
3178
+ {
3179
+ "name": "noninteractive",
3180
+ "description": "Controls whether the list item will automatically attach itself to interactive slotted elements or not.",
3181
+ "values": []
3182
+ },
3183
+ {
3184
+ "name": "focus-propagation",
3185
+ "description": "Controls whether the interactive element will receive focus if a non-interactive element is clicked within the list item.",
3186
+ "values": []
3187
+ }
3188
+ ],
3189
+ "references": []
3190
+ },
3233
3191
  {
3234
3192
  "name": "forge-meter-group",
3235
3193
  "description": "Meter groups display several meters together on one track.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for grouped `<forge-meter>` elements.\n- **label** - Positions a label above the meter group.\n- **value** - A textual representation of the meter's value.\n\n### **CSS Properties:**\n - **--forge-meter-group-background** - The background color of the meter group. _(default: undefined)_\n- **--forge-meter-group-height** - The block size of the meter group. _(default: undefined)_\n- **--forge-meter-group-shape** - The border radius of the meter group. _(default: undefined)_\n- **--forge-meter-group-tickmarks** - The number of tickmarks to display. _(default: undefined)_\n- **--forge-meter-group-tickmark-color** - The color of the tickmarks. _(default: undefined)_\n- **--forge-meter-group-tickmark-opacity** - The opacity of the tickmarks. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **track** - The element comprising the meter group's background.",
@@ -42,7 +42,7 @@ export declare class DismissibleStack<T extends IDismissible> {
42
42
  private constructor();
43
43
  static get instance(): DismissibleStack<IDismissible>;
44
44
  /**
45
- * Dismisses all elements in the stack that have been presented after the provided element.
45
+ * Dismisses all elements in the stack that are descendants and have been presented after the provided element.
46
46
  * @param el The element to dismiss
47
47
  * @param state The state to pass to the dismiss method of each element
48
48
  */
@@ -84,7 +84,8 @@ export declare class DismissibleStack<T extends IDismissible> {
84
84
  */
85
85
  isMostRecent(el: T): boolean;
86
86
  /**
87
- * Returns all elements in the dismissible queue.
87
+ * Gets all elements in the dismissible queue.
88
+ * @returns An array of all elements in the dismissible queue.
88
89
  */
89
90
  getAll(): T[];
90
91
  }
@@ -45,7 +45,7 @@ export class DismissibleStack {
45
45
  return window[DISMISSIBLE_STACK_INSTANCE_KEY];
46
46
  }
47
47
  /**
48
- * Dismisses all elements in the stack that have been presented after the provided element.
48
+ * Dismisses all elements in the stack that are descendants and have been presented after the provided element.
49
49
  * @param el The element to dismiss
50
50
  * @param state The state to pass to the dismiss method of each element
51
51
  */
@@ -141,7 +141,8 @@ export class DismissibleStack {
141
141
  return elements[elements.length - 1] === el;
142
142
  }
143
143
  /**
144
- * Returns all elements in the dismissible queue.
144
+ * Gets all elements in the dismissible queue.
145
+ * @returns An array of all elements in the dismissible queue.
145
146
  */
146
147
  getAll() {
147
148
  return Array.from(this._dismissibleElements);
@@ -173,9 +173,6 @@ export class BaseDatePickerAdapter extends BaseAdapter {
173
173
  return;
174
174
  }
175
175
  const iconButtonElement = this._createToggleElement();
176
- // if (textField.density === 'extra-small') {
177
- // iconButtonElement.density = 'small';
178
- // }
179
176
  textField.appendChild(iconButtonElement);
180
177
  this._toggleElement = iconButtonElement;
181
178
  }
@@ -248,6 +248,14 @@ export class DialogCore {
248
248
  value = Boolean(value);
249
249
  if (this._persistent !== value) {
250
250
  this._persistent = value;
251
+ if (this._adapter.isConnected && this._open) {
252
+ if (this._persistent) {
253
+ this._adapter.removeBackdropDismissListener(this._backdropDismissListener);
254
+ }
255
+ else {
256
+ this._adapter.addBackdropDismissListener(this._backdropDismissListener);
257
+ }
258
+ }
251
259
  this._adapter.toggleHostAttribute(DIALOG_CONSTANTS.attributes.PERSISTENT, this._persistent);
252
260
  }
253
261
  }
@@ -8,7 +8,7 @@ import { attachShadowTemplate, customElement } from '@tylertech/forge-core';
8
8
  import { BaseDrawerAdapter, BaseDrawerComponent, BaseDrawerCore } from '../base';
9
9
  import { MINI_DRAWER_CONSTANTS } from './mini-drawer-constants';
10
10
  const template = '<template><div class=\"root\" part=\"root\"><div class=\"forge-drawer mini\" part=\"container\"><slot name=\"header\"></slot><div class=\"content\" part=\"content\"><slot></slot></div><slot name=\"footer\"></slot></div></div></template>';
11
- const styles = ':host{--_mini-drawer-width:var(--forge-mini-drawer-width, 56px);--_mini-drawer-min-width:var(--forge-mini-drawer-min-width, var(--_mini-drawer-width));--_mini-drawer-hover-width:var(--forge-mini-drawer-hover-width, var(--forge-drawer-width, 256px));--_mini-drawer-transition-duration:var(--forge-mini-drawer-transition-duration, var(--forge-animation-duration-short4, 200ms));--_mini-drawer-transition-easing:var(--forge-mini-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_mini-drawer-transition-delay:var(--forge-mini-drawer-transition-delay, 300ms);--_mini-drawer-hover-transition-duration:var(--forge-mini-drawer-hover-transition-duration, var(--forge-animation-duration-medium2, 300ms));--_mini-drawer-hover-transition-easing:var(--forge-mini-drawer-hover-transition-easing, var(--_mini-drawer-transition-easing));--_mini-drawer-hover-transition-delay:var(--forge-mini-drawer-hover-transition-delay, var(--forge-animation-duration-medium2, 300ms))}:host{display:grid;box-sizing:border-box;height:100%;overflow:hidden!important;width:var(--_mini-drawer-width);overflow:visible!important;--forge-divider-margin:4px 0}:host([direction=right]){min-width:var(--_mini-drawer-width);width:auto}:host([direction=right]) .root{position:relative}:host(:not([open])){display:none}:host([hover]) .right{position:absolute;right:0}:host([hover]) .forge-drawer:hover{width:var(--_mini-drawer-hover-width)!important;transition:width var(--_mini-drawer-hover-transition-duration) var(--_mini-drawer-hover-transition-easing) var(--_mini-drawer-hover-transition-delay)}:host([hover]) .forge-drawer:hover .content{overflow:auto;overflow:overlay}.forge-drawer{--_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));--_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));--_drawer-width:var(--forge-drawer-width, 256px);--_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));--_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));--_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms))}.forge-drawer{width:var(--_drawer-width);height:100%;box-sizing:border-box;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;background-color:var(--_drawer-background);border-color:var(--_drawer-border-color);transition-property:transform;transition-duration:var(--_drawer-transition-duration);transition-timing-function:var(--_drawer-transition-easing)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer .content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:flex;flex-direction:column;grid-row:2}.forge-drawer .content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-drawer .content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,calc(var(--forge-shape-full,9999px) * var(--forge-shape-factor,1)));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-drawer .content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-drawer.left{border-right-width:var(--_drawer-border-width);border-right-style:solid}.forge-drawer.right{border-left-width:var(--_drawer-border-width);border-left-style:solid}.forge-drawer.right.closing{transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.right.closed{transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer.closing{transform:translateX(-100%);left:0;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.closed{transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer.no-transition{transition:none!important}.root{z-index:var(--forge-z-index-surface,1);height:100%;min-width:var(--_mini-drawer-min-width)}.forge-drawer.mini{width:var(--_mini-drawer-width);z-index:var(--forge-z-index-surface,1);transition:width var(--_mini-drawer-transition-duration) var(--_mini-drawer-transition-easing)}.forge-drawer.mini .content{overflow:hidden}.forge-drawer.closed{width:0}';
11
+ const styles = ':host{--_mini-drawer-width:var(--forge-mini-drawer-width, 56px);--_mini-drawer-min-width:var(--forge-mini-drawer-min-width, var(--_mini-drawer-width));--_mini-drawer-hover-width:var(--forge-mini-drawer-hover-width, var(--forge-drawer-width, 256px));--_mini-drawer-transition-duration:var(--forge-mini-drawer-transition-duration, var(--forge-animation-duration-short4, 200ms));--_mini-drawer-transition-easing:var(--forge-mini-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_mini-drawer-transition-delay:var(--forge-mini-drawer-transition-delay, 300ms);--_mini-drawer-hover-transition-duration:var(--forge-mini-drawer-hover-transition-duration, var(--forge-animation-duration-medium2, 300ms));--_mini-drawer-hover-transition-easing:var(--forge-mini-drawer-hover-transition-easing, var(--_mini-drawer-transition-easing));--_mini-drawer-hover-transition-delay:var(--forge-mini-drawer-hover-transition-delay, var(--forge-animation-duration-medium2, 300ms))}:host{display:grid;box-sizing:border-box;height:100%;overflow:hidden!important;width:var(--_mini-drawer-width);overflow:visible!important;--forge-divider-margin:4px 0}:host([direction=right]){min-width:var(--_mini-drawer-width);width:auto}:host([direction=right]) .root{position:relative}:host(:not([open])){display:none}:host([hover]) .right{position:absolute;right:0}:host([hover]) .forge-drawer:hover{width:var(--_mini-drawer-hover-width)!important;transition:width var(--_mini-drawer-hover-transition-duration) var(--_mini-drawer-hover-transition-easing) var(--_mini-drawer-hover-transition-delay)}:host([hover]) .forge-drawer:hover .content{overflow:auto}.forge-drawer{--_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));--_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));--_drawer-width:var(--forge-drawer-width, 256px);--_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));--_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));--_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms))}.forge-drawer{width:var(--_drawer-width);height:100%;box-sizing:border-box;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;background-color:var(--_drawer-background);border-color:var(--_drawer-border-color);transition-property:transform;transition-duration:var(--_drawer-transition-duration);transition-timing-function:var(--_drawer-transition-easing)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer .content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:flex;flex-direction:column;grid-row:2}.forge-drawer .content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-drawer .content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,calc(var(--forge-shape-full,9999px) * var(--forge-shape-factor,1)));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-drawer .content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-drawer.left{border-right-width:var(--_drawer-border-width);border-right-style:solid}.forge-drawer.right{border-left-width:var(--_drawer-border-width);border-left-style:solid}.forge-drawer.right.closing{transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.right.closed{transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer.closing{transform:translateX(-100%);left:0;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.closed{transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer.no-transition{transition:none!important}.root{z-index:var(--forge-z-index-surface,1);height:100%;min-width:var(--_mini-drawer-min-width)}.forge-drawer.mini{width:var(--_mini-drawer-width);z-index:var(--forge-z-index-surface,1);transition:width var(--_mini-drawer-transition-duration) var(--_mini-drawer-transition-easing)}.forge-drawer.mini .content{overflow:hidden}.forge-drawer.closed{width:0}';
12
12
  /**
13
13
  * @tag forge-mini-drawer
14
14
  *
@@ -29,18 +29,9 @@ export class IconButtonCore extends BaseButtonCore {
29
29
  // Update internal state first so listeners can access the new state
30
30
  const originalPressed = this._pressed;
31
31
  this._pressed = !this._pressed;
32
- const event = new CustomEvent(ICON_BUTTON_CONSTANTS.events.TOGGLE, {
33
- detail: {
34
- pressed: this._pressed,
35
- toggle: this._toggle
36
- },
37
- bubbles: true,
38
- cancelable: true,
39
- composed: true
40
- });
41
- this._adapter.dispatchHostEvent(event);
32
+ const cancelled = !this._adapter.emitHostEvent(ICON_BUTTON_CONSTANTS.events.TOGGLE, this.pressed, true, true);
42
33
  this._pressed = originalPressed;
43
- if (event.defaultPrevented) {
34
+ if (cancelled) {
44
35
  return;
45
36
  }
46
37
  this.pressed = !originalPressed;
@@ -14,7 +14,7 @@ import { IconComponent, IconRegistry } from '../../icon';
14
14
  import { StateLayerComponent } from '../../state-layer';
15
15
  import { FocusIndicatorComponent } from '../../focus-indicator';
16
16
  const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-state-layer target=\"handle\" id=\"state-layer\" exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator inward target=\"handle\" part=\"focus-indicator\"></forge-focus-indicator></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
17
- const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:ud3jlhz;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ud3jlhz{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:ud3jli1;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ud3jli1{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:ud3jliz;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes ud3jliz{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:ud3jlj0;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes ud3jlj0{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:ud3jlje;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ud3jlje{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:ud3jljg;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ud3jljg{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:ud3jljo;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes ud3jljo{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:ud3jlk5;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes ud3jlk5{from{transform:none}to{transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
17
+ const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:u5ckttb;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u5ckttb{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:u5cktu7;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u5cktu7{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:u5cktv2;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes u5cktv2{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:u5cktvo;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes u5cktvo{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:u5cktwc;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u5cktwc{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:u5cktwv;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u5cktwv{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:u5cktwx;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes u5cktwx{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:u5cktx2;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes u5cktx2{from{transform:none}to{transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
18
18
  /**
19
19
  * @tag forge-split-view-panel
20
20
  *
@@ -88,6 +88,7 @@ export declare const TABLE_CONSTANTS: {
88
88
  FILTER: string;
89
89
  INITIALIZED: string;
90
90
  COLUMN_RESIZE: string;
91
+ BEFORE_BODY_RENDERED: string;
91
92
  BODY_RENDERED: string;
92
93
  };
93
94
  strings: {
@@ -90,6 +90,7 @@ const events = {
90
90
  FILTER: `${elementName}-filter`,
91
91
  INITIALIZED: `${elementName}-initialized`,
92
92
  COLUMN_RESIZE: `${elementName}-column-resize`,
93
+ BEFORE_BODY_RENDERED: `${elementName}-before-body-rendered`,
93
94
  BODY_RENDERED: `${elementName}-body-rendered`
94
95
  };
95
96
  const strings = {
@@ -440,6 +440,7 @@ export class TableCore {
440
440
  * Creates and renders the table with the current column configuration and data.
441
441
  */
442
442
  render() {
443
+ this._adapter.emitHostEvent(TABLE_CONSTANTS.events.BEFORE_BODY_RENDERED, undefined, false);
443
444
  this._adapter.createTable(this._tableConfiguration);
444
445
  this._renderSelections();
445
446
  this._rendered = true;
@@ -452,6 +453,7 @@ export class TableCore {
452
453
  if (!this._rendered) {
453
454
  return;
454
455
  }
456
+ this._adapter.emitHostEvent(TABLE_CONSTANTS.events.BEFORE_BODY_RENDERED, undefined, false);
455
457
  this._adapter.recreateTableBody(this._tableConfiguration);
456
458
  this._renderSelections();
457
459
  this._adapter.emitHostEvent(TABLE_CONSTANTS.events.BODY_RENDERED, undefined, false);
@@ -575,7 +577,6 @@ export class TableCore {
575
577
  * Handles a row being selected/deselected.
576
578
  */
577
579
  _onRowSelected(evt) {
578
- // TODO: We need to ignore this if the checkbox is disabled (which could happen in user code)
579
580
  // We handle row selection manually with either a pointerdown or keydown event (space key), so we listen
580
581
  // for the change event as well to prevent checking the checkbox being checked by the time the event reaches us
581
582
  if (evt.type === 'change') {
@@ -59,6 +59,7 @@ declare global {
59
59
  'forge-table-filter': CustomEvent<ITableFilterEventData>;
60
60
  'forge-table-initialized': CustomEvent<void>;
61
61
  'forge-table-column-resize': CustomEvent<ITableColumnResizeEventData>;
62
+ 'forge-table-before-body-rendered': CustomEvent<void>;
62
63
  'forge-table-body-rendered': CustomEvent<void>;
63
64
  }
64
65
  }
@@ -78,6 +79,7 @@ declare global {
78
79
  * @event {CustomEvent<ITableFilterEventData>} forge-table-filter - Dispatched when a column is filtered. Only applies when `filter` is specified.
79
80
  * @event {CustomEvent<void>} forge-table-initialized - Dispatched when the table is initialized in the DOM for the first time.
80
81
  * @event {CustomEvent<ITableColumnResizeEventData>} forge-table-column-resize - Dispatched when a column is resized.
82
+ * @event {CustomEvent<void>} forge-table-before-body-rendered - Dispatched before the table body is rendered.
81
83
  * @event {CustomEvent<void>} forge-table-body-rendered - Dispatched when the table body is rendered.
82
84
  *
83
85
  * @cssclass forge-data-table - The base table class.
@@ -31,6 +31,7 @@ import { TooltipComponent } from '../tooltip';
31
31
  * @event {CustomEvent<ITableFilterEventData>} forge-table-filter - Dispatched when a column is filtered. Only applies when `filter` is specified.
32
32
  * @event {CustomEvent<void>} forge-table-initialized - Dispatched when the table is initialized in the DOM for the first time.
33
33
  * @event {CustomEvent<ITableColumnResizeEventData>} forge-table-column-resize - Dispatched when a column is resized.
34
+ * @event {CustomEvent<void>} forge-table-before-body-rendered - Dispatched before the table body is rendered.
34
35
  * @event {CustomEvent<void>} forge-table-body-rendered - Dispatched when the table body is rendered.
35
36
  *
36
37
  * @cssclass forge-data-table - The base table class.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tylertech/forge",
3
3
  "description": "Tyler Forge™ Web Components library",
4
- "version": "3.9.0-dev.3",
4
+ "version": "3.9.0-dev.4",
5
5
  "author": "Tyler Technologies, Inc.",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
@@ -13,11 +13,11 @@
13
13
  "typings": "esm/index.d.ts",
14
14
  "sideEffects": false,
15
15
  "dependencies": {
16
- "@floating-ui/dom": "^1.6.13",
17
- "@tylertech/forge-core": "^3.1.0",
18
- "@tylertech/tyler-icons": "^2.0.1",
16
+ "@floating-ui/dom": "^1.7.0",
17
+ "@tylertech/forge-core": "^3.2.0",
18
+ "@tylertech/tyler-icons": "^2.0.3",
19
19
  "imask": "^7.6.1",
20
- "lit": "^3.2.1",
20
+ "lit": "^3.3.0",
21
21
  "tslib": "^2.8.1"
22
22
  },
23
23
  "customElements": "custom-elements.json"
@@ -4,7 +4,7 @@
4
4
  * License: Apache-2.0
5
5
  */
6
6
  $animation-duration: 200ms;
7
- $grid-item-background-color: rgba(0, 0, 0, 0.08);
7
+ $grid-item-background-color: rgb(0, 0, 0, 0.08);
8
8
  $initial-scale: 0.4;
9
9
  $list-item-horizontal-margin: 4px;
10
10
  $max-height: 320px;