@tylertech/forge 3.2.0 → 3.3.1

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 (69) hide show
  1. package/custom-elements.json +117 -28
  2. package/dist/button/forge-button.css +6 -1
  3. package/dist/chips/forge-chips.css +1 -0
  4. package/dist/dialog/forge-dialog.css +483 -0
  5. package/dist/field/forge-field.css +2 -0
  6. package/dist/inline-message/forge-inline-message.css +2 -0
  7. package/dist/lib.js +1 -1
  8. package/dist/lib.js.map +4 -4
  9. package/dist/vscode.css-custom-data.json +20 -0
  10. package/dist/vscode.html-custom-data.json +12 -2
  11. package/esm/app-bar/app-bar/app-bar.d.ts +2 -0
  12. package/esm/app-bar/app-bar/app-bar.js +2 -0
  13. package/esm/app-bar/search/app-bar-search-adapter.js +0 -3
  14. package/esm/app-bar/search/app-bar-search.js +1 -1
  15. package/esm/autocomplete/autocomplete-adapter.d.ts +1 -1
  16. package/esm/autocomplete/autocomplete-adapter.js +8 -14
  17. package/esm/autocomplete/autocomplete-core.js +4 -1
  18. package/esm/bottom-sheet/bottom-sheet.js +1 -1
  19. package/esm/button/base/base-button-adapter.js +1 -1
  20. package/esm/button/button.d.ts +3 -0
  21. package/esm/button/button.js +4 -1
  22. package/esm/chip-field/chip-field.js +1 -1
  23. package/esm/chips/chip/chip.d.ts +1 -0
  24. package/esm/chips/chip/chip.js +2 -1
  25. package/esm/circular-progress/circular-progress.js +1 -1
  26. package/esm/deprecated/button/deprecated-button.js +1 -1
  27. package/esm/dialog/dialog.js +1 -1
  28. package/esm/field/field-adapter.d.ts +2 -0
  29. package/esm/field/field-adapter.js +4 -0
  30. package/esm/field/field-core.js +1 -0
  31. package/esm/field/field.js +1 -1
  32. package/esm/inline-message/inline-message.js +1 -1
  33. package/esm/list-dropdown/list-dropdown-utils.js +1 -0
  34. package/esm/paginator/paginator.js +1 -1
  35. package/esm/popover/popover-core.js +1 -1
  36. package/esm/select/select/select.js +1 -1
  37. package/esm/skip-link/skip-link-constants.d.ts +2 -0
  38. package/esm/skip-link/skip-link-constants.js +2 -1
  39. package/esm/skip-link/skip-link.d.ts +36 -12
  40. package/esm/skip-link/skip-link.js +55 -12
  41. package/esm/tabs/tab/tab-constants.d.ts +1 -3
  42. package/esm/tabs/tab/tab-constants.js +1 -3
  43. package/esm/tabs/tab/tab.d.ts +1 -1
  44. package/esm/tabs/tab/tab.js +1 -1
  45. package/esm/tabs/tab-bar/tab-bar-core.js +2 -1
  46. package/esm/tabs/tab-bar/tab-bar.d.ts +1 -1
  47. package/esm/tabs/tab-bar/tab-bar.js +1 -1
  48. package/esm/text-field/text-field-adapter.d.ts +8 -4
  49. package/esm/text-field/text-field-adapter.js +9 -4
  50. package/esm/text-field/text-field-constants.d.ts +2 -0
  51. package/esm/text-field/text-field-constants.js +2 -0
  52. package/esm/text-field/text-field-core.d.ts +2 -0
  53. package/esm/text-field/text-field-core.js +10 -3
  54. package/package.json +1 -1
  55. package/sass/button/_core.scss +5 -0
  56. package/sass/button/button.scss +6 -0
  57. package/sass/button/forge-button.scss +5 -0
  58. package/sass/chip-field/chip-field.scss +2 -1
  59. package/sass/chips/chip/chip.scss +1 -1
  60. package/sass/circular-progress/_core.scss +2 -2
  61. package/sass/core/styles/tokens/button/_tokens.scss +3 -1
  62. package/sass/core/styles/tokens/chips/chip/_tokens.scss +1 -0
  63. package/sass/dialog/_animations.scss +6 -6
  64. package/sass/dialog/dialog.scss +10 -10
  65. package/sass/field/_core.scss +1 -0
  66. package/sass/field/_core.theme.scss +4 -0
  67. package/sass/field/field.scss +5 -1
  68. package/sass/field/forge-field.scss +3 -1
  69. package/sass/inline-message/_core.scss +2 -0
@@ -312,6 +312,21 @@
312
312
  "description": "The cursor type of the button.",
313
313
  "values": []
314
314
  },
315
+ {
316
+ "name": "--forge-button-transition-duration",
317
+ "description": "The transition duration of the button.",
318
+ "values": []
319
+ },
320
+ {
321
+ "name": "--forge-button-transition-timing",
322
+ "description": "The transition timing of the button.",
323
+ "values": []
324
+ },
325
+ {
326
+ "name": "--forge-button-text-padding-inline",
327
+ "description": "The inline padding of the button when using the text variant.",
328
+ "values": []
329
+ },
315
330
  {
316
331
  "name": "--forge-button-filled-background",
317
332
  "description": "The background color of the filled button.",
@@ -3997,6 +4012,11 @@
3997
4012
  "description": "The font size of the chip icon.",
3998
4013
  "values": []
3999
4014
  },
4015
+ {
4016
+ "name": "--forge-chip-focus-indicator-color",
4017
+ "description": "The color of the focus indicator.",
4018
+ "values": []
4019
+ },
4000
4020
  {
4001
4021
  "name": "--forge-chip-disabled-opacity",
4002
4022
  "description": "The opacity of the disabled chip.",
@@ -218,7 +218,7 @@
218
218
  },
219
219
  {
220
220
  "name": "forge-button",
221
- "description": "Buttons represent actions that a user can take.\n---\n\n\n### **Events:**\n - **click** - Fires when the button is clicked.\n\n### **Methods:**\n - **click(): _void_** - Clicks the button.\n- **focus(options: _ExperimentalFocusOptions_): _void_** - Focuses the button.\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot for the label text.\n- **start** - Elements to logically render before the label text.\n- **end** - Elements to logically render after the label text.\n\n### **CSS Properties:**\n - **--forge-button-primary-color** - The primary color of the button. _(default: undefined)_\n- **--forge-button-text-color** - The text color of the button. Inherits from primary color. _(default: undefined)_\n- **--forge-button-disabled-color** - The disabled color of the button. _(default: undefined)_\n- **--forge-button-padding** - The padding of the button. _(default: undefined)_\n- **--forge-button-display** - The display of the button. _(default: undefined)_\n- **--forge-button-justify** - The flex justify of the button. _(default: undefined)_\n- **--forge-button-shape** - The shape of the button. _(default: undefined)_\n- **--forge-button-height** - The height of the button. _(default: undefined)_\n- **--forge-button-min-width** - The min-width of the button. _(default: undefined)_\n- **--forge-button-spacing** - The spacing of the button. _(default: undefined)_\n- **--forge-button-border-width** - The border-width of the button. _(default: undefined)_\n- **--forge-button-border-style** - The border style of the button. _(default: undefined)_\n- **--forge-button-border-color** - The border color of the button. _(default: undefined)_\n- **--forge-button-shape-start-start-radius** - The shape start start radius of the button. _(default: undefined)_\n- **--forge-button-shape-start-end-radius** - The shape start end radius of the button. _(default: undefined)_\n- **--forge-button-shape-end-start-radius** - The shape end start radius of the button. _(default: undefined)_\n- **--forge-button-shape-end-end-radius** - The shape end end radius of the button. _(default: undefined)_\n- **--forge-button-padding-block** - The padding block of the button. _(default: undefined)_\n- **--forge-button-padding-inline** - The padding inline of the button. _(default: undefined)_\n- **--forge-button-background** - The background color of the button. _(default: undefined)_\n- **--forge-button-hover-background** - The background color of the button on hover. _(default: undefined)_\n- **--forge-button-active-background** - The background color of the button on active state. _(default: undefined)_\n- **--forge-button-color** - The text color of the button. _(default: undefined)_\n- **--forge-button-icon-size** - The size of the icon in the button. _(default: undefined)_\n- **--forge-button-shadow** - The shadow of the button. _(default: undefined)_\n- **--forge-button-hover-shadow** - The shadow of the button on hover. _(default: undefined)_\n- **--forge-button-active-shadow** - The shadow of the button on active state. _(default: undefined)_\n- **--forge-button-cursor** - The cursor type of the button. _(default: undefined)_\n- **--forge-button-filled-background** - The background color of the filled button. _(default: undefined)_\n- **--forge-button-filled-disabled-background** - The background color of the disabled filled button. _(default: undefined)_\n- **--forge-button-filled-color** - The text color of the filled button. _(default: undefined)_\n- **--forge-button-filled-disabled-color** - The text color of the disabled filled button. _(default: undefined)_\n- **--forge-button-raised-background** - The background color of the raised button. _(default: undefined)_\n- **--forge-button-raised-disabled-background** - The background color of the disabled raised button. _(default: undefined)_\n- **--forge-button-raised-color** - The text color of the raised button. _(default: undefined)_\n- **--forge-button-raised-disabled-color** - The text color of the disabled raised button. _(default: undefined)_\n- **--forge-button-raised-shadow** - The shadow of the raised button. _(default: undefined)_\n- **--forge-button-raised-hover-shadow** - The shadow of the raised button on hover. _(default: undefined)_\n- **--forge-button-raised-active-shadow** - The shadow of the raised button on active state. _(default: undefined)_\n- **--forge-button-raised-disabled-shadow** - The shadow of the disabled raised button. _(default: undefined)_\n- **--forge-button-flat-background** - The background color of the flat button. _(default: undefined)_\n- **--forge-button-flat-disabled-background** - The background color of the disabled flat button. _(default: undefined)_\n- **--forge-button-flat-color** - The text color of the flat button. _(default: undefined)_\n- **--forge-button-flat-disabled-color** - The text color of the disabled flat button. _(default: undefined)_\n- **--forge-button-outlined-background** - The background color of the outlined button. _(default: undefined)_\n- **--forge-button-outlined-color** - The text color of the outlined button. _(default: undefined)_\n- **--forge-button-outlined-border-width** - The border width of the outlined button. _(default: undefined)_\n- **--forge-button-outlined-border-style** - The border style of the outlined button. _(default: undefined)_\n- **--forge-button-outlined-border-color** - The border color of the outlined button. _(default: undefined)_\n- **--forge-button-link-color** - The text color of the link button. _(default: undefined)_\n- **--forge-button-link-text-decoration** - The text decoration of the link button. _(default: undefined)_\n- **--forge-button-link-height** - The height of the link button. _(default: undefined)_\n- **--forge-button-link-padding** - The padding of the link button. _(default: undefined)_\n- **--forge-button-link-line-height** - The line height of the link button. _(default: undefined)_\n- **--forge-button-link-width** - The width of the link button. _(default: undefined)_\n- **--forge-button-link-hover-text-decoration** - The text decoration of the link button on hover. _(default: undefined)_\n- **--forge-button-link-active-opacity** - The opacity of the link button on active state. _(default: undefined)_\n- **--forge-button-link-transition-duration** - The transition duration of the link button. _(default: undefined)_\n- **--forge-button-link-transition-timing** - The transition timing of the link button. _(default: undefined)_\n- **--forge-button-disabled-cursor** - The cursor type of the disabled button. _(default: undefined)_\n- **--forge-button-disabled-text-color** - The text color of the disabled button. _(default: undefined)_\n- **--forge-button-disabled-background** - The background color of the disabled button. _(default: undefined)_\n- **--forge-button-disabled-border-color** - The border color of the disabled button. _(default: undefined)_\n- **--forge-button-disabled-shadow** - The shadow of the disabled button. _(default: undefined)_\n- **--forge-button-dense-height** - The height of the dense button. _(default: undefined)_\n- **--forge-button-pill-shape** - The shape of the pill button. _(default: undefined)_\n- **--forge-button-pill-padding-inline** - The inline padding of the pill button. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **focus-indicator** - The focus-indicator indicator element.\n- **state-layer** - The state-layer surface element.",
221
+ "description": "Buttons represent actions that a user can take.\n---\n\n\n### **Events:**\n - **click** - Fires when the button is clicked.\n\n### **Methods:**\n - **click(): _void_** - Clicks the button.\n- **focus(options: _ExperimentalFocusOptions_): _void_** - Focuses the button.\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot for the label text.\n- **start** - Elements to logically render before the label text.\n- **end** - Elements to logically render after the label text.\n\n### **CSS Properties:**\n - **--forge-button-primary-color** - The primary color of the button. _(default: undefined)_\n- **--forge-button-text-color** - The text color of the button. Inherits from primary color. _(default: undefined)_\n- **--forge-button-disabled-color** - The disabled color of the button. _(default: undefined)_\n- **--forge-button-padding** - The padding of the button. _(default: undefined)_\n- **--forge-button-display** - The display of the button. _(default: undefined)_\n- **--forge-button-justify** - The flex justify of the button. _(default: undefined)_\n- **--forge-button-shape** - The shape of the button. _(default: undefined)_\n- **--forge-button-height** - The height of the button. _(default: undefined)_\n- **--forge-button-min-width** - The min-width of the button. _(default: undefined)_\n- **--forge-button-spacing** - The spacing of the button. _(default: undefined)_\n- **--forge-button-border-width** - The border-width of the button. _(default: undefined)_\n- **--forge-button-border-style** - The border style of the button. _(default: undefined)_\n- **--forge-button-border-color** - The border color of the button. _(default: undefined)_\n- **--forge-button-shape-start-start-radius** - The shape start start radius of the button. _(default: undefined)_\n- **--forge-button-shape-start-end-radius** - The shape start end radius of the button. _(default: undefined)_\n- **--forge-button-shape-end-start-radius** - The shape end start radius of the button. _(default: undefined)_\n- **--forge-button-shape-end-end-radius** - The shape end end radius of the button. _(default: undefined)_\n- **--forge-button-padding-block** - The padding block of the button. _(default: undefined)_\n- **--forge-button-padding-inline** - The padding inline of the button. _(default: undefined)_\n- **--forge-button-background** - The background color of the button. _(default: undefined)_\n- **--forge-button-hover-background** - The background color of the button on hover. _(default: undefined)_\n- **--forge-button-active-background** - The background color of the button on active state. _(default: undefined)_\n- **--forge-button-color** - The text color of the button. _(default: undefined)_\n- **--forge-button-icon-size** - The size of the icon in the button. _(default: undefined)_\n- **--forge-button-shadow** - The shadow of the button. _(default: undefined)_\n- **--forge-button-hover-shadow** - The shadow of the button on hover. _(default: undefined)_\n- **--forge-button-active-shadow** - The shadow of the button on active state. _(default: undefined)_\n- **--forge-button-cursor** - The cursor type of the button. _(default: undefined)_\n- **--forge-button-transition-duration** - The transition duration of the button. _(default: undefined)_\n- **--forge-button-transition-timing** - The transition timing of the button. _(default: undefined)_\n- **--forge-button-text-padding-inline** - The inline padding of the button when using the text variant. _(default: undefined)_\n- **--forge-button-filled-background** - The background color of the filled button. _(default: undefined)_\n- **--forge-button-filled-disabled-background** - The background color of the disabled filled button. _(default: undefined)_\n- **--forge-button-filled-color** - The text color of the filled button. _(default: undefined)_\n- **--forge-button-filled-disabled-color** - The text color of the disabled filled button. _(default: undefined)_\n- **--forge-button-raised-background** - The background color of the raised button. _(default: undefined)_\n- **--forge-button-raised-disabled-background** - The background color of the disabled raised button. _(default: undefined)_\n- **--forge-button-raised-color** - The text color of the raised button. _(default: undefined)_\n- **--forge-button-raised-disabled-color** - The text color of the disabled raised button. _(default: undefined)_\n- **--forge-button-raised-shadow** - The shadow of the raised button. _(default: undefined)_\n- **--forge-button-raised-hover-shadow** - The shadow of the raised button on hover. _(default: undefined)_\n- **--forge-button-raised-active-shadow** - The shadow of the raised button on active state. _(default: undefined)_\n- **--forge-button-raised-disabled-shadow** - The shadow of the disabled raised button. _(default: undefined)_\n- **--forge-button-flat-background** - The background color of the flat button. _(default: undefined)_\n- **--forge-button-flat-disabled-background** - The background color of the disabled flat button. _(default: undefined)_\n- **--forge-button-flat-color** - The text color of the flat button. _(default: undefined)_\n- **--forge-button-flat-disabled-color** - The text color of the disabled flat button. _(default: undefined)_\n- **--forge-button-outlined-background** - The background color of the outlined button. _(default: undefined)_\n- **--forge-button-outlined-color** - The text color of the outlined button. _(default: undefined)_\n- **--forge-button-outlined-border-width** - The border width of the outlined button. _(default: undefined)_\n- **--forge-button-outlined-border-style** - The border style of the outlined button. _(default: undefined)_\n- **--forge-button-outlined-border-color** - The border color of the outlined button. _(default: undefined)_\n- **--forge-button-link-color** - The text color of the link button. _(default: undefined)_\n- **--forge-button-link-text-decoration** - The text decoration of the link button. _(default: undefined)_\n- **--forge-button-link-height** - The height of the link button. _(default: undefined)_\n- **--forge-button-link-padding** - The padding of the link button. _(default: undefined)_\n- **--forge-button-link-line-height** - The line height of the link button. _(default: undefined)_\n- **--forge-button-link-width** - The width of the link button. _(default: undefined)_\n- **--forge-button-link-hover-text-decoration** - The text decoration of the link button on hover. _(default: undefined)_\n- **--forge-button-link-active-opacity** - The opacity of the link button on active state. _(default: undefined)_\n- **--forge-button-link-transition-duration** - The transition duration of the link button. _(default: undefined)_\n- **--forge-button-link-transition-timing** - The transition timing of the link button. _(default: undefined)_\n- **--forge-button-disabled-cursor** - The cursor type of the disabled button. _(default: undefined)_\n- **--forge-button-disabled-text-color** - The text color of the disabled button. _(default: undefined)_\n- **--forge-button-disabled-background** - The background color of the disabled button. _(default: undefined)_\n- **--forge-button-disabled-border-color** - The border color of the disabled button. _(default: undefined)_\n- **--forge-button-disabled-shadow** - The shadow of the disabled button. _(default: undefined)_\n- **--forge-button-dense-height** - The height of the dense button. _(default: undefined)_\n- **--forge-button-pill-shape** - The shape of the pill button. _(default: undefined)_\n- **--forge-button-pill-padding-inline** - The inline padding of the pill button. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **focus-indicator** - The focus-indicator indicator element.\n- **state-layer** - The state-layer surface element.",
222
222
  "attributes": [
223
223
  {
224
224
  "name": "type",
@@ -1784,6 +1784,11 @@
1784
1784
  "name": "inline",
1785
1785
  "description": "Whether or not the skip link renders within its container.",
1786
1786
  "values": []
1787
+ },
1788
+ {
1789
+ "name": "skipUrlChange",
1790
+ "description": "Sets the skip link to skip browser navigation and scroll to the target element.",
1791
+ "values": []
1787
1792
  }
1788
1793
  ],
1789
1794
  "references": []
@@ -2391,6 +2396,11 @@
2391
2396
  "name": "href",
2392
2397
  "description": "The href that will be used to make the logo and title area a clickable link",
2393
2398
  "values": []
2399
+ },
2400
+ {
2401
+ "name": "target",
2402
+ "description": "The `<a>` target of the logo + title area link when `href` is set.",
2403
+ "values": []
2394
2404
  }
2395
2405
  ],
2396
2406
  "references": []
@@ -2653,7 +2663,7 @@
2653
2663
  },
2654
2664
  {
2655
2665
  "name": "forge-chip",
2656
- "description": "\n---\n\n\n### **Events:**\n - **forge-chip-delete** - Event fired when the chip is deleted.\n- **forge-chip-select** - Event fired when the chip is selected.\n\n### **Slots:**\n - _default_ - The content of the chip.\n- **start** - The start content of the chip.\n- **end** - The end content of the chip.\n\n### **CSS Properties:**\n - **--forge-chip-background** - The background color of the chip. _(default: undefined)_\n- **--forge-chip-color** - The background color of the chip. _(default: undefined)_\n- **--forge-chip-shape** - The shape of the chip. _(default: undefined)_\n- **--forge-chip-spacing** - The spacing between chips. _(default: undefined)_\n- **--forge-chip-height** - The height of the chip. _(default: undefined)_\n- **--forge-chip-padding-inline** - The inline padding of the chip. _(default: undefined)_\n- **--forge-chip-padding-block** - The block padding of the chip. _(default: undefined)_\n- **--forge-chip-cursor** - The cursor style of the chip. _(default: undefined)_\n- **--forge-chip-icon-font-size** - The font size of the chip icon. _(default: undefined)_\n- **--forge-chip-disabled-opacity** - The opacity of the disabled chip. _(default: undefined)_\n- **--forge-chip-disabled-cursor** - The cursor style of the disabled chip. _(default: undefined)_\n- **--forge-chip-dense-height** - The height of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-padding-inline** - The inline padding of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-spacing** - The spacing between dense chips. _(default: undefined)_\n- **--forge-chip-dense-font-size** - The font size of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-font-weight** - The font weight of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-focus-indicator-offset** - The offset of the focus indicator for dense chips. _(default: undefined)_\n- **--forge-chip-dense-icon-font-size** - The font size of the icon in dense chips. _(default: undefined)_\n- **--forge-chip-remove-button-spacing** - The spacing of the remove button in chips. _(default: undefined)_\n- **--forge-chip-remove-button-height-dense** - The height of the remove button in dense chips. _(default: undefined)_\n- **--forge-chip-remove-button-icon-size-dense** - The icon size of the remove button in dense chips. _(default: undefined)_\n- **--forge-chip-remove-button-spacing-dense** - The spacing of the remove button in dense chips. _(default: undefined)_\n- **--forge-chip-selected-background** - The background color of the selected chip. _(default: undefined)_\n- **--forge-chip-selected-color** - The text color of the selected chip. _(default: undefined)_\n- **--forge-chip-invalid-color** - The text color of the invalid chip. _(default: undefined)_\n- **--forge-chip-invalid-selected-background** - The background color of the invalid selected chip. _(default: undefined)_\n- **--forge-chip-invalid-selected-color** - The text color of the invalid selected chip. _(default: undefined)_\n- **--forge-chip-border-width** - The width of the chip border. _(default: undefined)_\n- **--forge-chip-border-style** - The style of the chip border. _(default: undefined)_\n- **--forge-chip-border-color** - The color of the chip border. _(default: undefined)_\n- **--forge-chip-field-background** - The background color of the chip field. _(default: undefined)_\n- **--forge-chip-field-color** - The text color of the chip field. _(default: undefined)_\n- **--forge-chip-field-shape** - The shape of the chip field. _(default: undefined)_\n- **--forge-chip-field-border-color** - The color of the chip field border. _(default: undefined)_\n- **--forge-chip-field-cursor** - The cursor style of the chip field. _(default: undefined)_\n- **--forge-chip-checkmark-size** - The size of the checkmark in chips. _(default: undefined)_\n- **--forge-chip-checkmark-color** - The color of the checkmark in chips. _(default: undefined)_\n- **--forge-chip-checkmark-spacing** - The spacing of the checkmark in chips. _(default: undefined)_\n- **--forge-chip-avatar-size** - The size of the avatar in chips. _(default: undefined)_\n- **--forge-chip-avatar-size-dense** - The size of the avatar in dense chips. _(default: undefined)_\n- **--forge-chip-avatar-font-size** - The font size of the avatar in chips. _(default: undefined)_\n- **--forge-chip-avatar-font-size-dense** - The font size of the avatar in dense chips. _(default: undefined)_\n- **--forge-chip-avatar-spacing** - The spacing of the avatar in chips. _(default: undefined)_\n- **--forge-chip-avatar-spacing-dense** - The spacing of the avatar in dense chips. _(default: undefined)_\n- **--forge-chip-transition-duration** - The duration of the chip transition. _(default: undefined)_\n- **--forge-chip-transition-easing** - The easing function of the chip transition. _(default: undefined)_\n- **--forge-chip-checkmark-transition-delay** - The delay of the checkmark transition in chips. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The component's root element.\n- **trigger** - The trigger element of the chip.\n- **focus-indicator** - The focus indicator of the chip.\n- **state-layer** - The state layer surface.",
2666
+ "description": "\n---\n\n\n### **Events:**\n - **forge-chip-delete** - Event fired when the chip is deleted.\n- **forge-chip-select** - Event fired when the chip is selected.\n\n### **Slots:**\n - _default_ - The content of the chip.\n- **start** - The start content of the chip.\n- **end** - The end content of the chip.\n\n### **CSS Properties:**\n - **--forge-chip-background** - The background color of the chip. _(default: undefined)_\n- **--forge-chip-color** - The background color of the chip. _(default: undefined)_\n- **--forge-chip-shape** - The shape of the chip. _(default: undefined)_\n- **--forge-chip-spacing** - The spacing between chips. _(default: undefined)_\n- **--forge-chip-height** - The height of the chip. _(default: undefined)_\n- **--forge-chip-padding-inline** - The inline padding of the chip. _(default: undefined)_\n- **--forge-chip-padding-block** - The block padding of the chip. _(default: undefined)_\n- **--forge-chip-cursor** - The cursor style of the chip. _(default: undefined)_\n- **--forge-chip-icon-font-size** - The font size of the chip icon. _(default: undefined)_\n- **--forge-chip-focus-indicator-color** - The color of the focus indicator. _(default: undefined)_\n- **--forge-chip-disabled-opacity** - The opacity of the disabled chip. _(default: undefined)_\n- **--forge-chip-disabled-cursor** - The cursor style of the disabled chip. _(default: undefined)_\n- **--forge-chip-dense-height** - The height of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-padding-inline** - The inline padding of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-spacing** - The spacing between dense chips. _(default: undefined)_\n- **--forge-chip-dense-font-size** - The font size of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-font-weight** - The font weight of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-focus-indicator-offset** - The offset of the focus indicator for dense chips. _(default: undefined)_\n- **--forge-chip-dense-icon-font-size** - The font size of the icon in dense chips. _(default: undefined)_\n- **--forge-chip-remove-button-spacing** - The spacing of the remove button in chips. _(default: undefined)_\n- **--forge-chip-remove-button-height-dense** - The height of the remove button in dense chips. _(default: undefined)_\n- **--forge-chip-remove-button-icon-size-dense** - The icon size of the remove button in dense chips. _(default: undefined)_\n- **--forge-chip-remove-button-spacing-dense** - The spacing of the remove button in dense chips. _(default: undefined)_\n- **--forge-chip-selected-background** - The background color of the selected chip. _(default: undefined)_\n- **--forge-chip-selected-color** - The text color of the selected chip. _(default: undefined)_\n- **--forge-chip-invalid-color** - The text color of the invalid chip. _(default: undefined)_\n- **--forge-chip-invalid-selected-background** - The background color of the invalid selected chip. _(default: undefined)_\n- **--forge-chip-invalid-selected-color** - The text color of the invalid selected chip. _(default: undefined)_\n- **--forge-chip-border-width** - The width of the chip border. _(default: undefined)_\n- **--forge-chip-border-style** - The style of the chip border. _(default: undefined)_\n- **--forge-chip-border-color** - The color of the chip border. _(default: undefined)_\n- **--forge-chip-field-background** - The background color of the chip field. _(default: undefined)_\n- **--forge-chip-field-color** - The text color of the chip field. _(default: undefined)_\n- **--forge-chip-field-shape** - The shape of the chip field. _(default: undefined)_\n- **--forge-chip-field-border-color** - The color of the chip field border. _(default: undefined)_\n- **--forge-chip-field-cursor** - The cursor style of the chip field. _(default: undefined)_\n- **--forge-chip-checkmark-size** - The size of the checkmark in chips. _(default: undefined)_\n- **--forge-chip-checkmark-color** - The color of the checkmark in chips. _(default: undefined)_\n- **--forge-chip-checkmark-spacing** - The spacing of the checkmark in chips. _(default: undefined)_\n- **--forge-chip-avatar-size** - The size of the avatar in chips. _(default: undefined)_\n- **--forge-chip-avatar-size-dense** - The size of the avatar in dense chips. _(default: undefined)_\n- **--forge-chip-avatar-font-size** - The font size of the avatar in chips. _(default: undefined)_\n- **--forge-chip-avatar-font-size-dense** - The font size of the avatar in dense chips. _(default: undefined)_\n- **--forge-chip-avatar-spacing** - The spacing of the avatar in chips. _(default: undefined)_\n- **--forge-chip-avatar-spacing-dense** - The spacing of the avatar in dense chips. _(default: undefined)_\n- **--forge-chip-transition-duration** - The duration of the chip transition. _(default: undefined)_\n- **--forge-chip-transition-easing** - The easing function of the chip transition. _(default: undefined)_\n- **--forge-chip-checkmark-transition-delay** - The delay of the checkmark transition in chips. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The component's root element.\n- **trigger** - The trigger element of the chip.\n- **focus-indicator** - The focus indicator of the chip.\n- **state-layer** - The state layer surface.",
2657
2667
  "attributes": [
2658
2668
  {
2659
2669
  "name": "type",
@@ -29,11 +29,13 @@ declare global {
29
29
  * @property {AppBarElevation} [elevation="raised"] - The elevation of the app bar.
30
30
  * @property {AppBarTheme} theme - The theme of the app bar.
31
31
  * @property {string} href - The href that will be used to make the logo and title area a clickable link.
32
+ * @property {string} target - The `<a>` target of the logo + title area link when `href` is set.
32
33
  *
33
34
  * @attribute {string} title-text - The text to display in the title.
34
35
  * @attribute {string} [elevation="raised"] - The elevation of the app bar.
35
36
  * @attribute {string} theme - The theme of the app bar.
36
37
  * @attribute {string} href - The href that will be used to make the logo and title area a clickable link
38
+ * @attribute {string} target - The `<a>` target of the logo + title area link when `href` is set.
37
39
  *
38
40
  * @cssproperty --forge-app-bar-background - The background color of the app bar.
39
41
  * @cssproperty --forge-app-bar-foreground - The text color of the app bar.
@@ -20,11 +20,13 @@ const styles = ':host{--_app-bar-background:var(--forge-app-bar-background, var(
20
20
  * @property {AppBarElevation} [elevation="raised"] - The elevation of the app bar.
21
21
  * @property {AppBarTheme} theme - The theme of the app bar.
22
22
  * @property {string} href - The href that will be used to make the logo and title area a clickable link.
23
+ * @property {string} target - The `<a>` target of the logo + title area link when `href` is set.
23
24
  *
24
25
  * @attribute {string} title-text - The text to display in the title.
25
26
  * @attribute {string} [elevation="raised"] - The elevation of the app bar.
26
27
  * @attribute {string} theme - The theme of the app bar.
27
28
  * @attribute {string} href - The href that will be used to make the logo and title area a clickable link
29
+ * @attribute {string} target - The `<a>` target of the logo + title area link when `href` is set.
28
30
  *
29
31
  * @cssproperty --forge-app-bar-background - The background color of the app bar.
30
32
  * @cssproperty --forge-app-bar-foreground - The text color of the app bar.
@@ -15,9 +15,6 @@ export class AppBarSearchAdapter extends BaseAdapter {
15
15
  const inputElement = this._component.querySelector(APP_BAR_SEARCH_CONSTANTS.selectors.INPUT);
16
16
  if (inputElement) {
17
17
  this._inputElement = inputElement;
18
- if (!this._inputElement.hasAttribute('slot')) {
19
- this._inputElement.slot = 'input';
20
- }
21
18
  const focusIndicator = document.createElement('forge-focus-indicator');
22
19
  focusIndicator.targetElement = this._inputElement;
23
20
  this._rootElement.appendChild(focusIndicator);
@@ -12,7 +12,7 @@ import { APP_BAR_SEARCH_CONSTANTS } from './app-bar-search-constants';
12
12
  import { FocusIndicatorComponent } from '../../focus-indicator';
13
13
  import { IconComponent, IconRegistry } from '../../icon';
14
14
  import { BaseComponent } from '../../core/base/base-component';
15
- const template = '<template><div class=\"forge-app-bar-search\" part=\"root\"><slot name=\"start\"><forge-icon name=\"search\" class=\"icon\" part=\"icon\"></forge-icon></slot><slot name=\"input\"></slot><slot name=\"end\"></slot></div></template>';
15
+ const template = '<template><div class=\"forge-app-bar-search\" part=\"root\"><slot name=\"start\"><forge-icon name=\"search\" class=\"icon\" part=\"icon\"></forge-icon></slot><slot name=\"input\"></slot><slot></slot><slot name=\"end\"></slot></div></template>';
16
16
  const styles = ':host{display:block}:host([hidden]){display:none}.forge-app-bar-search{--_app-bar-search-color:var(--forge-app-bar-search-color, currentColor);--_app-bar-search-height:var(--forge-app-bar-search-height, 36px);--_app-bar-search-padding:var(--forge-app-bar-search-padding, 8px);--_app-bar-search-shape:var(--forge-app-bar-search-shape, calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1)));--_app-bar-search-gap:var(--forge-app-bar-search-gap, 4px);--_app-bar-search-input-placeholder-color:var(--forge-app-bar-search-input-placeholder-color, var(--_app-bar-search-color));--_app-bar-search-input-placeholder-opacity:var(--forge-app-bar-search-input-placeholder-opacity, 0.38);--_app-bar-search-background-color:var(--forge-app-bar-search-background-color, var(--_app-bar-search-color));--_app-bar-search-background-color-opacity:var(--forge-app-bar-search-background-color-opacity, 0.08);--_app-bar-search-border-color:var(--forge-app-bar-search-border-color, var(--_app-bar-search-color));--_app-bar-search-border-opacity:var(--forge-app-bar-search-border-opacity, 0.54);--_app-bar-search-border-hover-opacity:var(--forge-app-bar-search-border-hover-opacity, 0.87);--_app-bar-search-transition-duration:var(--forge-app-bar-search-transition-duration, var(--forge-animation-duration-short3, 150ms));--_app-bar-search-transition-timing-function:var(--forge-app-bar-search-transition-timing-function, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-app-bar-search{position:relative;display:flex;align-items:center;flex:1 1 auto;gap:var(--_app-bar-search-gap);height:var(--_app-bar-search-height);width:100%;padding-inline:var(--_app-bar-search-padding);box-sizing:border-box;border-radius:var(--_app-bar-search-shape)}.forge-app-bar-search:hover::after{opacity:var(--_app-bar-search-border-hover-opacity)}.forge-app-bar-search::before{content:\"\";position:absolute;inset:0;pointer-events:none;background-color:var(--_app-bar-search-background-color);opacity:var(--_app-bar-search-background-color-opacity)}.forge-app-bar-search::after{content:\"\";position:absolute;inset:0;pointer-events:none;opacity:var(--_app-bar-search-border-opacity);border-radius:var(--_app-bar-search-shape);outline:1px solid var(--_app-bar-search-border-color);transition-property:opacity;transition-duration:var(--_app-bar-search-transition-duration);transition-timing-function:var(--_app-bar-search-transition-timing-function)}:host([disabled]){cursor:not-allowed}:host([disabled]) .forge-app-bar-search{pointer-events:none;opacity:38%}:host([disabled]) ::slotted(input){pointer-events:none}forge-focus-indicator{--forge-focus-indicator-color:currentColor;--forge-focus-indicator-outward-offset:0px}::slotted(input){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));font-weight:var(--forge-typography-body2-font-weight,400);line-height:var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);display:block;overflow:hidden;background:0 0;color:currentColor;border:none;width:100%;margin:0;outline:0}::slotted(input)::placeholder{color:currentColor;opacity:var(--_app-bar-search-input-placeholder-opacity)}';
17
17
  /**
18
18
  * @tag forge-app-bar-search
@@ -4,9 +4,9 @@
4
4
  * License: Apache-2.0
5
5
  */
6
6
  import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
7
+ import { IListDropdownConfig } from '../list-dropdown';
7
8
  import { IAutocompleteComponent } from './autocomplete';
8
9
  import { IAutocompleteOption, IAutocompleteOptionGroup } from './autocomplete-constants';
9
- import { IListDropdownConfig } from '../list-dropdown';
10
10
  export interface IAutocompleteAdapter extends IBaseAdapter {
11
11
  readonly inputElement: HTMLInputElement;
12
12
  setInputElement(): HTMLInputElement;
@@ -3,15 +3,15 @@
3
3
  * Copyright Tyler Technologies, Inc.
4
4
  * License: Apache-2.0
5
5
  */
6
- import { deepQuerySelectorAll, getActiveElement, toggleAttribute } from '@tylertech/forge-core';
7
- import { BaseAdapter } from '../core/base/base-adapter';
8
- import { AUTOCOMPLETE_CONSTANTS } from './autocomplete-constants';
9
- import { TEXT_FIELD_CONSTANTS } from '../text-field';
10
- import { ListDropdown } from '../list-dropdown';
6
+ import { getActiveElement, toggleAttribute } from '@tylertech/forge-core';
11
7
  import { CHIP_FIELD_CONSTANTS } from '../chip-field';
12
- import { POPOVER_CONSTANTS } from '../popover';
8
+ import { BaseAdapter } from '../core/base/base-adapter';
13
9
  import { setAriaControls, tryCreateAriaControlsPlaceholder } from '../core/utils/utils';
14
10
  import { FIELD_CONSTANTS } from '../field';
11
+ import { ListDropdown } from '../list-dropdown';
12
+ import { POPOVER_CONSTANTS } from '../popover';
13
+ import { TEXT_FIELD_CONSTANTS } from '../text-field';
14
+ import { AUTOCOMPLETE_CONSTANTS } from './autocomplete-constants';
15
15
  /**
16
16
  * The DOM adapter for the `<forge-autocomplete>` element.
17
17
  */
@@ -24,7 +24,7 @@ export class AutocompleteAdapter extends BaseAdapter {
24
24
  return this._inputElement;
25
25
  }
26
26
  setInputElement() {
27
- const inputElements = deepQuerySelectorAll(this._component, AUTOCOMPLETE_CONSTANTS.selectors.INPUT, false);
27
+ const inputElements = this._component.querySelectorAll(AUTOCOMPLETE_CONSTANTS.selectors.INPUT);
28
28
  if (inputElements.length) {
29
29
  this._inputElement = inputElements[0];
30
30
  }
@@ -89,13 +89,7 @@ export class AutocompleteAdapter extends BaseAdapter {
89
89
  this._listDropdown?.setBusyVisibility(isVisible);
90
90
  }
91
91
  setDismissListener(listener) {
92
- if (!this._listDropdown || !this._listDropdown.dropdownElement) {
93
- return;
94
- }
95
- const dropdownElement = this._listDropdown.dropdownElement;
96
- if (dropdownElement.anchorElement && dropdownElement.anchorElement instanceof HTMLElement) {
97
- dropdownElement.anchorElement.addEventListener(POPOVER_CONSTANTS.events.TOGGLE, listener);
98
- }
92
+ this._listDropdown?.dropdownElement?.addEventListener(POPOVER_CONSTANTS.events.TOGGLE, listener);
99
93
  }
100
94
  focus() {
101
95
  window.requestAnimationFrame(() => this._inputElement.focus());
@@ -117,10 +117,13 @@ export class AutocompleteCore extends ListDropdownAwareCore {
117
117
  }
118
118
  return this._options;
119
119
  }
120
- _onClick(evt) {
120
+ _onClick(_evt) {
121
121
  if (!this._isDropdownOpen && this._filterOnFocus) {
122
122
  this._showDropdown();
123
123
  }
124
+ else {
125
+ this._closeDropdown();
126
+ }
124
127
  }
125
128
  _onDropdownIconMouseDown(evt) {
126
129
  evt.preventDefault(); // Always avoid changing focus when clicking the dropdown
@@ -13,7 +13,7 @@ import { BottomSheetAdapter } from './bottom-sheet-adapter';
13
13
  import { BOTTOM_SHEET_CONSTANTS } from './bottom-sheet-constants';
14
14
  import { BottomSheetCore } from './bottom-sheet-core';
15
15
  const template = '<template><forge-dialog class=\"dialog\" preset=\"bottom-sheet\" exportparts=\"surface\" role=\"presentation\"><div class=\"surface\" part=\"root\"><slot></slot></div></forge-dialog></template>';
16
- const styles = '@keyframes zoom-in{from{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}to{opacity:1;scale:1}}@keyframes zoom-out{from{opacity:1;scale:1}to{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}}@keyframes fade-in{from{opacity:var(--_dialog-fade-opacity)}to{opacity:1}}@keyframes fade-out{from{opacity:1}to{opacity:var(--_dialog-fade-opacity)}}@keyframes slide-in{from{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}to{opacity:1;translate:0 0}}@keyframes slide-out{from{opacity:1;translate:0 0}to{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}}:host{display:contents}:host([hidden]){display:none}.dialog{--_bottom-sheet-desktop-max-width:var(--forge-bottom-sheet-desktop-max-width, 50%);--_bottom-sheet-desktop-max-height:var(--forge-bottom-sheet-desktop-max-height, 50%);--_bottom-sheet-animation-duration:var(--forge-bottom-sheet-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_bottom-sheet-animation-timing:var(--forge-bottom-sheet-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.surface{width:100%;display:inline-flex;flex-direction:column}.dialog.dragging::part(surface){transition:none}:host([open]) forge-dialog.fullscreen{--forge-dialog-max-height:100%}:host([open]) forge-dialog.fullscreen::part(surface){transition:max-height var(--_bottom-sheet-animation-duration) var(--_bottom-sheet-animation-timing)}forge-dialog{--forge-dialog-width:var(--_bottom-sheet-desktop-max-width);--forge-dialog-max-height:var(--_bottom-sheet-desktop-max-height)}@media (max-width:600px){forge-dialog{--forge-dialog-shape:0;--forge-dialog-max-width:100vw;--forge-dialog-width:100vw}}';
16
+ const styles = '@keyframes forge-dialog-zoom-in{from{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}to{opacity:1;scale:1}}@keyframes forge-dialog-zoom-out{from{opacity:1;scale:1}to{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}}@keyframes forge-dialog-fade-in{from{opacity:var(--_dialog-fade-opacity)}to{opacity:1}}@keyframes forge-dialog-fade-out{from{opacity:1}to{opacity:var(--_dialog-fade-opacity)}}@keyframes forge-dialog-slide-in{from{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}to{opacity:1;translate:0 0}}@keyframes forge-dialog-slide-out{from{opacity:1;translate:0 0}to{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}}:host{display:contents}:host([hidden]){display:none}.dialog{--_bottom-sheet-desktop-max-width:var(--forge-bottom-sheet-desktop-max-width, 50%);--_bottom-sheet-desktop-max-height:var(--forge-bottom-sheet-desktop-max-height, 50%);--_bottom-sheet-animation-duration:var(--forge-bottom-sheet-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_bottom-sheet-animation-timing:var(--forge-bottom-sheet-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.surface{width:100%;display:inline-flex;flex-direction:column}.dialog.dragging::part(surface){transition:none}:host([open]) forge-dialog.fullscreen{--forge-dialog-max-height:100%}:host([open]) forge-dialog.fullscreen::part(surface){transition:max-height var(--_bottom-sheet-animation-duration) var(--_bottom-sheet-animation-timing)}forge-dialog{--forge-dialog-width:var(--_bottom-sheet-desktop-max-width);--forge-dialog-max-height:var(--_bottom-sheet-desktop-max-height)}@media (max-width:600px){forge-dialog{--forge-dialog-shape:0;--forge-dialog-max-width:100vw;--forge-dialog-width:100vw}}';
17
17
  /**
18
18
  * @tag forge-bottom-sheet
19
19
  *
@@ -177,7 +177,7 @@ export class BaseButtonAdapter extends BaseAdapter {
177
177
  }
178
178
  }
179
179
  animateStateLayer() {
180
- if (this._stateLayerElement.disabled) {
180
+ if (this._stateLayerElement.disabled || !this._stateLayerElement.isConnected) {
181
181
  return;
182
182
  }
183
183
  this._stateLayerElement?.playAnimation();
@@ -87,6 +87,9 @@ declare global {
87
87
  * @cssproperty --forge-button-hover-shadow - The shadow of the button on hover.
88
88
  * @cssproperty --forge-button-active-shadow - The shadow of the button on active state.
89
89
  * @cssproperty --forge-button-cursor - The cursor type of the button.
90
+ * @cssproperty --forge-button-transition-duration - The transition duration of the button.
91
+ * @cssproperty --forge-button-transition-timing - The transition timing of the button.
92
+ * @cssproperty --forge-button-text-padding-inline - The inline padding of the button when using the text variant.
90
93
  * @cssproperty --forge-button-filled-background - The background color of the filled button.
91
94
  * @cssproperty --forge-button-filled-disabled-background - The background color of the disabled filled button.
92
95
  * @cssproperty --forge-button-filled-color - The text color of the filled button.
@@ -14,7 +14,7 @@ import { BUTTON_CONSTANTS } from './button-constants';
14
14
  import { ButtonCore } from './button-core';
15
15
  import { BASE_BUTTON_CONSTANTS } from './base/base-button-constants';
16
16
  const template = '<template><div class=\"forge-button\" part=\"root\"><slot name=\"start\"></slot><slot></slot><slot name=\"end\"></slot><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div></template>';
17
- const styles = ':host{--_button-display:var(--forge-button-display, inline-flex);--_button-disabled-cursor:var(--forge-button-disabled-cursor, not-allowed)}:host{display:var(--_button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-primary, #3f51b5));--_button-text-color:var(--forge-button-text-color, var(--_button-primary-color));--_button-disabled-color:var(--forge-button-disabled-color, var(--forge-theme-surface-container, #e0e0e0));--_button-padding:var(--forge-button-padding, 8px);--_button-justify:var(--forge-button-justify, center);--_button-shape:var(--forge-button-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_button-height:var(--forge-button-height, 36px);--_button-min-width:var(--forge-button-min-width, 64px);--_button-spacing:var(--forge-button-spacing, var(--forge-spacing-xsmall, 8px));--_button-border-width:var(--forge-button-border-width, medium);--_button-border-style:var(--forge-button-border-style, none);--_button-border-color:var(--forge-button-border-color, currentColor);--_button-shape-start-start-radius:var(--forge-button-shape-start-start-radius, var(--_button-shape));--_button-shape-start-end-radius:var(--forge-button-shape-start-end-radius, var(--_button-shape));--_button-shape-end-start-radius:var(--forge-button-shape-end-start-radius, var(--_button-shape));--_button-shape-end-end-radius:var(--forge-button-shape-end-end-radius, var(--_button-shape));--_button-padding-block:var(--forge-button-padding-block, var(--_button-padding));--_button-padding-inline:var(--forge-button-padding-inline, var(--_button-padding));--_button-background:var(--forge-button-background, transparent);--_button-hover-background:var(--forge-button-hover-background, var(--_button-background));--_button-active-background:var(--forge-button-active-background, var(--_button-background));--_button-color:var(--forge-button-color, var(--_button-text-color));--_button-icon-size:var(--forge-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_button-shadow:var(--forge-button-shadow, none);--_button-hover-shadow:var(--forge-button-hover-shadow, none);--_button-active-shadow:var(--forge-button-active-shadow, none);--_button-cursor:var(--forge-button-cursor, pointer);--_button-transition-duration:var(--forge-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-transition-timing:var(--forge-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-outlined-background:var(--forge-button-outlined-background, transparent);--_button-outlined-color:var(--forge-button-outlined-color, var(--_button-primary-color));--_button-outlined-border-width:var(--forge-button-outlined-border-width, var(--forge-border-thin, 1px));--_button-outlined-border-style:var(--forge-button-outlined-border-style, solid);--_button-outlined-border-color:var(--forge-button-outlined-border-color, var(--_button-primary-color));--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-primary-container, #d1d5ed));--_button-tonal-disabled-background:var(--forge-button-tonal-disabled-background, var(--_button-disabled-color));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-primary-container, #222c62));--_button-tonal-disabled-color:var(--forge-button-tonal-disabled-color, var(--_button-disabled-text-color));--_button-filled-background:var(--forge-button-filled-background, var(--_button-primary-color));--_button-filled-disabled-background:var(--forge-button-filled-disabled-background, var(--_button-disabled-color));--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-primary, #ffffff));--_button-filled-disabled-color:var(--forge-button-filled-disabled-color, var(--_button-disabled-text-color));--_button-raised-background:var(--forge-button-raised-background, var(--_button-primary-color));--_button-raised-disabled-background:var(--forge-button-raised-disabled-background, var(--_button-disabled-color));--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-primary, #ffffff));--_button-raised-disabled-color:var(--forge-button-raised-disabled-color, var(--_button-disabled-text-color));--_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));--_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));--_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));--_button-raised-disabled-shadow:var(--forge-button-raised-disabled-shadow, none);--_button-link-color:var(--forge-button-link-color, var(--_button-primary-color));--_button-link-text-decoration:var(--forge-button-link-text-decoration, underline);--_button-link-height:var(--forge-button-link-height, auto);--_button-link-padding:var(--forge-button-link-padding, 0);--_button-link-line-height:var(--forge-button-link-line-height, normal);--_button-link-width:var(--forge-button-link-width, auto);--_button-link-hover-text-decoration:var(--forge-button-link-hover-text-decoration, none);--_button-link-active-opacity:var(--forge-button-link-active-opacity, 0.65);--_button-link-transition-duration:var(--forge-button-link-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-link-transition-timing:var(--forge-button-link-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-disabled-text-color:var(--forge-button-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_button-disabled-background:var(--forge-button-disabled-background, transparent);--_button-disabled-border-color:var(--forge-button-disabled-border-color, var(--_button-disabled-color));--_button-disabled-shadow:var(--forge-button-disabled-shadow, none);--_button-dense-height:var(--forge-button-dense-height, 24px);--_button-pill-shape:var(--forge-button-pill-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_button-pill-padding-inline:var(--forge-button-pill-padding-inline, var(--forge-spacing-small, 12px));--_button-focus-indicator-offset:var(--forge-button-focus-indicator-offset, 4px);--_button-text-focus-indicator-offset:var(--forge-button-text-focus-indicator-offset, 0px);--_button-link-focus-indicator-offset:var(--forge-button-link-focus-indicator-offset, 2px);--_button-popover-icon-transition-duration:var(--forge-button-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-popover-icon-transition-timing:var(--forge-button-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-popover-icon-open-rotation:var(--forge-button-popover-icon-open-rotation, 180deg)}.forge-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);position:relative;display:var(--_button-display);align-items:center;justify-content:var(--_button-justify);gap:var(--_button-spacing);z-index:0;box-sizing:border-box;min-inline-size:var(--_button-min-width);height:var(--_button-height);inline-size:100%;border-width:var(--_button-border-width);border-style:var(--_button-border-style);border-color:var(--_button-border-color);border-start-start-radius:var(--_button-shape-start-start-radius);border-start-end-radius:var(--_button-shape-start-end-radius);border-end-start-radius:var(--_button-shape-end-start-radius);border-end-end-radius:var(--_button-shape-end-end-radius);padding-block:var(--_button-padding-block);padding-inline:var(--_button-padding-inline);box-shadow:var(--_button-shadow);outline:0;user-select:none;-webkit-appearance:none;vertical-align:middle;text-decoration:none;white-space:nowrap;background:var(--_button-background);color:var(--_button-color);cursor:var(--_button-cursor);transition-property:box-shadow,background;transition-duration:var(--_button-transition-duration);transition-timing-function:var(--_button-transition-timing)}.forge-button::-moz-focus-inner{padding:0;border:0}.forge-button:hover{--_button-shadow:var(--_button-hover-shadow);background:var(--_button-hover-background)}.forge-button:active{--_button-shadow:var(--_button-active-shadow);background:var(--_button-active-background)}.forge-button ::slotted(:is([slot=start],[slot=end])){font-size:var(--_button-icon-size)}.with-anchor{display:flex;justify-content:stretch;align-items:stretch;padding:0}::slotted(a){display:flex;align-items:center;justify-content:center;gap:var(--_button-spacing);width:100%;padding:var(--_button-padding);color:var(--_button-color);outline:0;border-radius:var(--_button-shape);text-decoration:none;--forge-icon-font-size:var(--_button-icon-size)}:host([variant=link]) ::slotted(a){position:relative;inset:auto}forge-state-layer{--forge-state-layer-color:var(--_button-color)}forge-focus-indicator{--forge-focus-indicator-color:var(--_button-primary-color);--forge-focus-indicator-outward-offset:var(--_button-focus-indicator-offset)}:host([theme=secondary]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-secondary, #ffc107))}:host([theme=secondary][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-secondary-container, #fff0c3));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-secondary-container, #8a6804))}:host([theme=tertiary]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-tertiary, #3d5afe))}:host([theme=tertiary][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-tertiary-container, #d0d7ff));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-tertiary-container, #213189))}:host([theme=success]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-success, #2e7d32))}:host([theme=success][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-success-container, #cde0ce));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-success-container, #19441b))}:host([theme=error]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-error, #b00020))}:host([theme=error][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-error-container, #ecc2c9));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-error-container, #5f0011))}:host([theme=warning]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-warning, #d14900))}:host([theme=warning][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-warning-container, #f4d3c2));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-warning-container, #712700))}:host([theme=info]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-info, #1565c0))}:host([theme=info][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-info-container, #c7daf0));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-info-container, #0b3768))}:host([variant=filled]) .forge-button{--_button-background:var(--_button-filled-background);--_button-color:var(--_button-filled-color)}:host([variant=filled]) forge-state-layer{--forge-state-layer-color:var(--_button-filled-color)}:host([variant=raised]) .forge-button{--_button-background:var(--_button-raised-background);--_button-color:var(--_button-raised-color);--_button-shadow:var(--_button-raised-shadow)}:host([variant=raised]) .forge-button:hover{--_button-shadow:var(--_button-raised-hover-shadow)}:host([variant=raised]) .forge-button:active{--_button-shadow:var(--_button-raised-active-shadow)}:host([variant=raised]) forge-state-layer{--forge-state-layer-color:var(--_button-raised-color)}:host([variant=tonal]) .forge-button{--_button-background:var(--_button-tonal-background);--_button-color:var(--_button-tonal-color)}:host([variant=tonal]) forge-state-layer{--forge-state-layer-color:var(--_button-tonal-color)}:host([variant=outlined]) .forge-button{--_button-background:var(--_button-outlined-background);--_button-color:var(--_button-outlined-color);--_button-border-width:var(--_button-outlined-border-width);--_button-border-style:var(--_button-outlined-border-style);--_button-border-color:var(--_button-outlined-border-color)}:host([variant=link]) .forge-button{--_button-color:var(--_button-link-color);--_button-height:var(--_button-link-height);--_button-padding:var(--_button-link-padding);--_button-focus-indicator-offset:var(--_button-link-focus-indicator-offset);text-decoration:var(--_button-link-text-decoration);line-height:var(--_button-link-line-height);transition:opacity var(--_button-link-transition-duration) var(--_button-link-transition-timing);inline-size:var(--_button-link-width)}:host([variant=link]) .forge-button:hover{text-decoration:var(--_button-link-hover-text-decoration)}:host([variant=link]) .forge-button:active{opacity:var(--_button-link-active-opacity)}:host([full-width]){width:100%}:host([dense]) .forge-button{--_button-height:var(--_button-dense-height)}:host([pill]) .forge-button{--_button-shape:var(--_button-pill-shape);--_button-padding-inline:var(--_button-pill-padding-inline)}:host([pill]) forge-focus-indicator{--forge-focus-indicator-shape:var(--_button-pill-shape)}:host(:not([anchor])[disabled]){cursor:var(--_button-disabled-cursor)}:host(:not([anchor])[disabled]) .forge-button{--_button-background:var(--_button-disabled-background);--_button-color:var(--_button-disabled-text-color);--_button-shadow:var(--_button-disabled-shadow);pointer-events:none}:host(:not([anchor])[variant=outlined][disabled]) .forge-button{--_button-border-color:var(--_button-disabled-border-color)}:host(:not([anchor])[variant=tonal][disabled]) .forge-button{--_button-background:var(--_button-tonal-disabled-background);--_button-color:var(--_button-tonal-disabled-color)}:host(:not([anchor])[variant=filled][disabled]) .forge-button{--_button-background:var(--_button-filled-disabled-background);--_button-color:var(--_button-filled-disabled-color)}:host(:not([anchor])[variant=raised][disabled]) .forge-button{--_button-background:var(--_button-raised-disabled-background);--_button-color:var(--_button-raised-disabled-color);--_button-shadow:var(--_button-raised-disabled-shadow)}:host([popover-icon]) .forge-button__popover-icon{transition:rotate var(--_button-popover-icon-transition-duration) var(--_button-popover-icon-transition-timing)}:host([popover-icon][aria-expanded=true]) .forge-button__popover-icon{rotate:var(--_button-popover-icon-open-rotation)}::slotted(forge-circular-progress){--forge-circular-progress-indicator-color:var(--_button-color);--forge-circular-progress-track-color:transparent;--forge-circular-progress-size:1em}';
17
+ const styles = ':host{--_button-display:var(--forge-button-display, inline-flex);--_button-disabled-cursor:var(--forge-button-disabled-cursor, not-allowed)}:host{display:var(--_button-display);position:relative;outline:0;vertical-align:middle;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-primary, #3f51b5));--_button-text-color:var(--forge-button-text-color, var(--_button-primary-color));--_button-disabled-color:var(--forge-button-disabled-color, var(--forge-theme-surface-container, #e0e0e0));--_button-padding:var(--forge-button-padding, var(--forge-spacing-medium, 16px));--_button-justify:var(--forge-button-justify, center);--_button-shape:var(--forge-button-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_button-height:var(--forge-button-height, 36px);--_button-min-width:var(--forge-button-min-width, 64px);--_button-spacing:var(--forge-button-spacing, var(--forge-spacing-xsmall, 8px));--_button-border-width:var(--forge-button-border-width, medium);--_button-border-style:var(--forge-button-border-style, none);--_button-border-color:var(--forge-button-border-color, currentColor);--_button-shape-start-start-radius:var(--forge-button-shape-start-start-radius, var(--_button-shape));--_button-shape-start-end-radius:var(--forge-button-shape-start-end-radius, var(--_button-shape));--_button-shape-end-start-radius:var(--forge-button-shape-end-start-radius, var(--_button-shape));--_button-shape-end-end-radius:var(--forge-button-shape-end-end-radius, var(--_button-shape));--_button-padding-block:var(--forge-button-padding-block, var(--_button-padding));--_button-padding-inline:var(--forge-button-padding-inline, var(--_button-padding));--_button-background:var(--forge-button-background, transparent);--_button-hover-background:var(--forge-button-hover-background, var(--_button-background));--_button-active-background:var(--forge-button-active-background, var(--_button-background));--_button-color:var(--forge-button-color, var(--_button-text-color));--_button-icon-size:var(--forge-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_button-shadow:var(--forge-button-shadow, none);--_button-hover-shadow:var(--forge-button-hover-shadow, none);--_button-active-shadow:var(--forge-button-active-shadow, none);--_button-cursor:var(--forge-button-cursor, pointer);--_button-transition-duration:var(--forge-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-transition-timing:var(--forge-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-text-padding-inline:var(--forge-button-text-padding-inline, var(--forge-spacing-xsmall, 8px));--_button-outlined-background:var(--forge-button-outlined-background, transparent);--_button-outlined-color:var(--forge-button-outlined-color, var(--_button-primary-color));--_button-outlined-border-width:var(--forge-button-outlined-border-width, var(--forge-border-thin, 1px));--_button-outlined-border-style:var(--forge-button-outlined-border-style, solid);--_button-outlined-border-color:var(--forge-button-outlined-border-color, var(--_button-primary-color));--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-primary-container, #d1d5ed));--_button-tonal-disabled-background:var(--forge-button-tonal-disabled-background, var(--_button-disabled-color));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-primary-container, #222c62));--_button-tonal-disabled-color:var(--forge-button-tonal-disabled-color, var(--_button-disabled-text-color));--_button-filled-background:var(--forge-button-filled-background, var(--_button-primary-color));--_button-filled-disabled-background:var(--forge-button-filled-disabled-background, var(--_button-disabled-color));--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-primary, #ffffff));--_button-filled-disabled-color:var(--forge-button-filled-disabled-color, var(--_button-disabled-text-color));--_button-raised-background:var(--forge-button-raised-background, var(--_button-primary-color));--_button-raised-disabled-background:var(--forge-button-raised-disabled-background, var(--_button-disabled-color));--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-primary, #ffffff));--_button-raised-disabled-color:var(--forge-button-raised-disabled-color, var(--_button-disabled-text-color));--_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));--_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));--_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));--_button-raised-disabled-shadow:var(--forge-button-raised-disabled-shadow, none);--_button-link-color:var(--forge-button-link-color, var(--_button-primary-color));--_button-link-text-decoration:var(--forge-button-link-text-decoration, underline);--_button-link-height:var(--forge-button-link-height, auto);--_button-link-padding:var(--forge-button-link-padding, 0);--_button-link-line-height:var(--forge-button-link-line-height, normal);--_button-link-width:var(--forge-button-link-width, auto);--_button-link-hover-text-decoration:var(--forge-button-link-hover-text-decoration, none);--_button-link-active-opacity:var(--forge-button-link-active-opacity, 0.65);--_button-link-transition-duration:var(--forge-button-link-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-link-transition-timing:var(--forge-button-link-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-disabled-text-color:var(--forge-button-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_button-disabled-background:var(--forge-button-disabled-background, transparent);--_button-disabled-border-color:var(--forge-button-disabled-border-color, var(--_button-disabled-color));--_button-disabled-shadow:var(--forge-button-disabled-shadow, none);--_button-dense-height:var(--forge-button-dense-height, 24px);--_button-pill-shape:var(--forge-button-pill-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_button-pill-padding-inline:var(--forge-button-pill-padding-inline, var(--forge-spacing-small, 12px));--_button-focus-indicator-offset:var(--forge-button-focus-indicator-offset, 4px);--_button-text-focus-indicator-offset:var(--forge-button-text-focus-indicator-offset, 0px);--_button-link-focus-indicator-offset:var(--forge-button-link-focus-indicator-offset, 2px);--_button-popover-icon-transition-duration:var(--forge-button-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-popover-icon-transition-timing:var(--forge-button-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-popover-icon-open-rotation:var(--forge-button-popover-icon-open-rotation, 180deg)}.forge-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);position:relative;display:var(--_button-display);align-items:center;justify-content:var(--_button-justify);gap:var(--_button-spacing);z-index:0;box-sizing:border-box;min-inline-size:var(--_button-min-width);height:var(--_button-height);inline-size:100%;border-width:var(--_button-border-width);border-style:var(--_button-border-style);border-color:var(--_button-border-color);border-start-start-radius:var(--_button-shape-start-start-radius);border-start-end-radius:var(--_button-shape-start-end-radius);border-end-start-radius:var(--_button-shape-end-start-radius);border-end-end-radius:var(--_button-shape-end-end-radius);padding-block:var(--_button-padding-block);padding-inline:var(--_button-padding-inline);box-shadow:var(--_button-shadow);outline:0;user-select:none;-webkit-appearance:none;vertical-align:middle;text-decoration:none;white-space:nowrap;background:var(--_button-background);color:var(--_button-color);cursor:var(--_button-cursor);transition-property:box-shadow,background;transition-duration:var(--_button-transition-duration);transition-timing-function:var(--_button-transition-timing)}.forge-button::-moz-focus-inner{padding:0;border:0}.forge-button:hover{--_button-shadow:var(--_button-hover-shadow);background:var(--_button-hover-background)}.forge-button:active{--_button-shadow:var(--_button-active-shadow);background:var(--_button-active-background)}.forge-button ::slotted(:is([slot=start],[slot=end])){font-size:var(--_button-icon-size)}.with-anchor{display:flex;justify-content:stretch;align-items:stretch;padding:0}::slotted(a){display:flex;align-items:center;justify-content:center;gap:var(--_button-spacing);width:100%;padding:var(--_button-padding);color:var(--_button-color);outline:0;border-radius:var(--_button-shape);text-decoration:none;--forge-icon-font-size:var(--_button-icon-size)}:host([variant=link]) ::slotted(a){position:relative;inset:auto}forge-state-layer{--forge-state-layer-color:var(--_button-color)}forge-focus-indicator{--forge-focus-indicator-color:var(--_button-primary-color);--forge-focus-indicator-outward-offset:var(--_button-focus-indicator-offset)}:host([theme=secondary]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-secondary, #ffc107))}:host([theme=secondary][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-secondary-container, #fff0c3));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-secondary-container, #8a6804))}:host([theme=tertiary]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-tertiary, #3d5afe))}:host([theme=tertiary][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-tertiary-container, #d0d7ff));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-tertiary-container, #213189))}:host([theme=success]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-success, #2e7d32))}:host([theme=success][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-success-container, #cde0ce));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-success-container, #19441b))}:host([theme=error]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-error, #b00020))}:host([theme=error][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-error-container, #ecc2c9));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-error-container, #5f0011))}:host([theme=warning]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-warning, #d14900))}:host([theme=warning][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-warning-container, #f4d3c2));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-warning-container, #712700))}:host([theme=info]) .forge-button{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-info, #1565c0))}:host([theme=info][variant=filled]) .forge-button{--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info][variant=raised]) .forge-button{--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info][variant=tonal]) .forge-button{--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-info-container, #c7daf0));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-info-container, #0b3768))}:host(:where(:not([variant]),[variant=text])) .forge-button{--_button-padding-inline:var(--_button-text-padding-inline)}:host([variant=filled]) .forge-button{--_button-background:var(--_button-filled-background);--_button-color:var(--_button-filled-color)}:host([variant=filled]) forge-state-layer{--forge-state-layer-color:var(--_button-filled-color)}:host([variant=raised]) .forge-button{--_button-background:var(--_button-raised-background);--_button-color:var(--_button-raised-color);--_button-shadow:var(--_button-raised-shadow)}:host([variant=raised]) .forge-button:hover{--_button-shadow:var(--_button-raised-hover-shadow)}:host([variant=raised]) .forge-button:active{--_button-shadow:var(--_button-raised-active-shadow)}:host([variant=raised]) forge-state-layer{--forge-state-layer-color:var(--_button-raised-color)}:host([variant=tonal]) .forge-button{--_button-background:var(--_button-tonal-background);--_button-color:var(--_button-tonal-color)}:host([variant=tonal]) forge-state-layer{--forge-state-layer-color:var(--_button-tonal-color)}:host([variant=outlined]) .forge-button{--_button-background:var(--_button-outlined-background);--_button-color:var(--_button-outlined-color);--_button-border-width:var(--_button-outlined-border-width);--_button-border-style:var(--_button-outlined-border-style);--_button-border-color:var(--_button-outlined-border-color)}:host([variant=link]) .forge-button{--_button-color:var(--_button-link-color);--_button-height:var(--_button-link-height);--_button-padding:var(--_button-link-padding);--_button-focus-indicator-offset:var(--_button-link-focus-indicator-offset);text-decoration:var(--_button-link-text-decoration);line-height:var(--_button-link-line-height);transition:opacity var(--_button-link-transition-duration) var(--_button-link-transition-timing);inline-size:var(--_button-link-width)}:host([variant=link]) .forge-button:hover{text-decoration:var(--_button-link-hover-text-decoration)}:host([variant=link]) .forge-button:active{opacity:var(--_button-link-active-opacity)}:host([full-width]){width:100%}:host([dense]) .forge-button{--_button-height:var(--_button-dense-height)}:host([pill]) .forge-button{--_button-shape:var(--_button-pill-shape);--_button-padding-inline:var(--_button-pill-padding-inline)}:host([pill]) forge-focus-indicator{--forge-focus-indicator-shape:var(--_button-pill-shape)}:host(:not([anchor])[disabled]){cursor:var(--_button-disabled-cursor)}:host(:not([anchor])[disabled]) .forge-button{--_button-background:var(--_button-disabled-background);--_button-color:var(--_button-disabled-text-color);--_button-shadow:var(--_button-disabled-shadow);pointer-events:none}:host(:not([anchor])[variant=outlined][disabled]) .forge-button{--_button-border-color:var(--_button-disabled-border-color)}:host(:not([anchor])[variant=tonal][disabled]) .forge-button{--_button-background:var(--_button-tonal-disabled-background);--_button-color:var(--_button-tonal-disabled-color)}:host(:not([anchor])[variant=filled][disabled]) .forge-button{--_button-background:var(--_button-filled-disabled-background);--_button-color:var(--_button-filled-disabled-color)}:host(:not([anchor])[variant=raised][disabled]) .forge-button{--_button-background:var(--_button-raised-disabled-background);--_button-color:var(--_button-raised-disabled-color);--_button-shadow:var(--_button-raised-disabled-shadow)}:host([popover-icon]) .forge-button__popover-icon{transition:rotate var(--_button-popover-icon-transition-duration) var(--_button-popover-icon-transition-timing)}:host([popover-icon][aria-expanded=true]) .forge-button__popover-icon{rotate:var(--_button-popover-icon-open-rotation)}::slotted(forge-circular-progress){--forge-circular-progress-indicator-color:var(--_button-color);--forge-circular-progress-track-color:transparent;--forge-circular-progress-size:1em}';
18
18
  /**
19
19
  * @tag forge-button
20
20
  *
@@ -85,6 +85,9 @@ const styles = ':host{--_button-display:var(--forge-button-display, inline-flex)
85
85
  * @cssproperty --forge-button-hover-shadow - The shadow of the button on hover.
86
86
  * @cssproperty --forge-button-active-shadow - The shadow of the button on active state.
87
87
  * @cssproperty --forge-button-cursor - The cursor type of the button.
88
+ * @cssproperty --forge-button-transition-duration - The transition duration of the button.
89
+ * @cssproperty --forge-button-transition-timing - The transition timing of the button.
90
+ * @cssproperty --forge-button-text-padding-inline - The inline padding of the button when using the text variant.
88
91
  * @cssproperty --forge-button-filled-background - The background color of the filled button.
89
92
  * @cssproperty --forge-button-filled-disabled-background - The background color of the disabled filled button.
90
93
  * @cssproperty --forge-button-filled-color - The text color of the filled button.
@@ -12,7 +12,7 @@ import { ChipComponent } from '../chips';
12
12
  import { BaseField } from '../field/base/base-field';
13
13
  import { BASE_FIELD_CONSTANTS, FieldComponent } from '../field';
14
14
  const template = '<template><forge-field id=\"field\" multiline><slot slot=\"label\" name=\"label\"></slot><slot slot=\"start\" name=\"start\"></slot><div class=\"container\" data-forge-field-input><slot name=\"member\"></slot><slot></slot></div><slot slot=\"end\" name=\"end\"></slot><slot slot=\"accessory\" name=\"accessory\"></slot><slot slot=\"support-text\" name=\"support-text\"></slot><slot slot=\"support-text-end\" name=\"support-text-end\"></slot><slot slot=\"start\" name=\"leading\"></slot><slot slot=\"end\" name=\"trailing\"></slot><slot slot=\"accessory\" name=\"addon-end\"></slot><slot slot=\"support-text\" name=\"helper-text\"></slot></forge-field></template>';
15
- const styles = '@keyframes float-in-label-animation{from{translate:0;opacity:40%}to{translate:var(--_field-floating-label-translation);opacity:100%}}@keyframes float-out-label-animation{from{translate:var(--_field-floating-label-translation);opacity:40%}to{translate:0;opacity:100%}}@keyframes float-in-input-animation{from{translate:0}to{translate:0 calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8))}}@keyframes float-out-input-animation{from{translate:0 calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8))}to{translate:0}}@keyframes multiline-inset-label-background-animation{from{opacity:0%}to{opacity:100%}}:host{display:block}:host([hidden]){display:none}forge-field{--_chip-field-member-spacing:var(--forge-chip-field-member-spacing, var(--forge-spacing-xsmall, 8px));--_chip-field-content-spacing:var(--forge-chip-field-content-spacing, var(--forge-spacing-xxsmall, 4px))}.container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_chip-field-member-spacing);block-size:auto}.container.has-members{margin-block:var(--_chip-field-content-spacing)}.container.has-members ::slotted(input){block-size:auto;inline-size:auto}::slotted(input){flex-grow:1;cursor:inherit;box-sizing:border-box;margin:0;outline:0;border:none;background-color:transparent;padding-block:0;padding-inline:0;inline-size:100%;block-size:100%;color:inherit;font:inherit;font-size:var(--_field-font-size);text-overflow:ellipsis}forge-field{display:contents;--forge-field-multiline-resize:none}forge-field::part(label)::after{content:none}:host([theme=primary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-primary, #3f51b5);--forge-chip-field-color:var(--forge-theme-on-primary, #ffffff)}:host([theme=secondary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-secondary, #ffc107);--forge-chip-field-color:var(--forge-theme-on-secondary, #000000)}:host([theme=tertiary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-tertiary, #3d5afe);--forge-chip-field-color:var(--forge-theme-on-tertiary, #ffffff)}:host([theme=success]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-success, #2e7d32);--forge-chip-field-color:var(--forge-theme-on-success, #ffffff)}:host([theme=warning]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-warning, #d14900);--forge-chip-field-color:var(--forge-theme-on-warning, #ffffff)}:host([theme=error]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-error, #b00020);--forge-chip-field-color:var(--forge-theme-on-error, #ffffff)}:host([theme=info]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-info, #1565c0);--forge-chip-field-color:var(--forge-theme-on-info, #ffffff)}';
15
+ const styles = '@keyframes float-in-label-animation{from{translate:0;opacity:40%}to{translate:var(--_field-floating-label-translation);opacity:100%}}@keyframes float-out-label-animation{from{translate:var(--_field-floating-label-translation);opacity:40%}to{translate:0;opacity:100%}}@keyframes float-in-input-animation{from{translate:0}to{translate:0 calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8))}}@keyframes float-out-input-animation{from{translate:0 calc(calc(max(var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))),var(--forge-typography-label2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-label-line-height-scale,1.25))))/ 2) + calc((var(--_field-height) - 56px)/ 8))}to{translate:0}}@keyframes multiline-inset-label-background-animation{from{opacity:0%}to{opacity:100%}}:host{display:block}:host([hidden]){display:none}forge-field{--_chip-field-member-spacing:var(--forge-chip-field-member-spacing, var(--forge-spacing-xsmall, 8px));--_chip-field-content-spacing:var(--forge-chip-field-content-spacing, var(--forge-spacing-xxsmall, 4px))}.container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_chip-field-member-spacing);block-size:auto}.container.has-members{margin-block:var(--_chip-field-content-spacing)}.container.has-members ::slotted(input){block-size:auto;inline-size:auto}::slotted(input){flex-grow:1;cursor:inherit;box-sizing:border-box;margin:0;outline:0;border:none;background-color:transparent;padding-block:0;padding-inline:0;inline-size:100%;block-size:100%;color:inherit;font:inherit;font-size:var(--_field-font-size);text-overflow:ellipsis}forge-field{display:contents;--forge-field-multiline-resize:none}forge-field::part(label)::after{content:none}:host([theme=primary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-primary, #3f51b5);--forge-chip-field-color:var(--forge-theme-on-primary, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-primary, #3f51b5)}:host([theme=secondary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-secondary, #ffc107);--forge-chip-field-color:var(--forge-theme-on-secondary, #000000);--forge-chip-focus-indicator-color:var(--forge-theme-secondary, #ffc107)}:host([theme=tertiary]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-tertiary, #3d5afe);--forge-chip-field-color:var(--forge-theme-on-tertiary, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-tertiary, #3d5afe)}:host([theme=success]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-success, #2e7d32);--forge-chip-field-color:var(--forge-theme-on-success, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-success, #2e7d32)}:host([theme=warning]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-warning, #d14900);--forge-chip-field-color:var(--forge-theme-on-warning, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-warning, #d14900)}:host([theme=error]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-error, #b00020);--forge-chip-field-color:var(--forge-theme-on-error, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-error, #b00020)}:host([theme=info]) ::slotted([slot=member]){--forge-chip-field-background:var(--forge-theme-info, #1565c0);--forge-chip-field-color:var(--forge-theme-on-info, #ffffff);--forge-chip-focus-indicator-color:var(--forge-theme-info, #1565c0)}';
16
16
  /**
17
17
  * @tag forge-chip-field
18
18
  *
@@ -68,6 +68,7 @@ declare global {
68
68
  * @cssproperty --forge-chip-padding-block - The block padding of the chip.
69
69
  * @cssproperty --forge-chip-cursor - The cursor style of the chip.
70
70
  * @cssproperty --forge-chip-icon-font-size - The font size of the chip icon.
71
+ * @cssproperty --forge-chip-focus-indicator-color - The color of the focus indicator.
71
72
  * @cssproperty --forge-chip-disabled-opacity - The opacity of the disabled chip.
72
73
  * @cssproperty --forge-chip-disabled-cursor - The cursor style of the disabled chip.
73
74
  * @cssproperty --forge-chip-dense-height - The height of the dense chip.
@@ -15,7 +15,7 @@ import { ChipAdapter } from './chip-adapter';
15
15
  import { CHIP_CONSTANTS } from './chip-constants';
16
16
  import { ChipCore } from './chip-core';
17
17
  const template = '<template><div class=\"forge-chip\" part=\"root\"><button type=\"button\" id=\"trigger\" class=\"trigger\" part=\"trigger\"><slot name=\"start\"><slot name=\"leading\"></slot></slot><slot></slot><slot name=\"end\"><slot name=\"trailing\"></slot></slot></button><forge-focus-indicator target=\"trigger\" part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer target=\"trigger\" exportparts=\"surface:state-layer\"></forge-state-layer></div></template>';
18
- const styles = ':host{display:inline-flex}:host([hidden]){display:none}.forge-chip{--_chip-background:var(--forge-chip-background, transparent);--_chip-color:var(--forge-chip-color, var(--forge-theme-primary, #3f51b5));--_chip-shape:var(--forge-chip-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_chip-spacing:var(--forge-chip-spacing, var(--forge-spacing-xsmall, 8px));--_chip-height:var(--forge-chip-height, 32px);--_chip-padding-inline:var(--forge-chip-padding-inline, var(--forge-spacing-small, 12px));--_chip-padding-block:var(--forge-chip-padding-block, 0);--_chip-cursor:var(--forge-chip-cursor, pointer);--_chip-icon-font-size:var(--forge-chip-icon-font-size, 1.5rem);--_chip-disabled-opacity:var(--forge-chip-disabled-opacity, 0.38);--_chip-disabled-cursor:var(--forge-chip-disabled-cursor, not-allowed);--_chip-dense-height:var(--forge-chip-dense-height, 24px);--_chip-dense-padding-inline:var(--forge-chip-dense-padding-inline, var(--forge-spacing-xsmall, 8px));--_chip-dense-spacing:var(--forge-chip-dense-spacing, var(--forge-spacing-xxsmall, 4px));--_chip-dense-font-size:var(--forge-chip-dense-font-size, 0.75rem);--_chip-dense-font-weight:var(--forge-chip-dense-font-weight, normal);--_chip-dense-focus-indicator-offset:var(--forge-chip-dense-focus-indicator-offset, var(--forge-spacing-xxxsmall, 2px));--_chip-dense-icon-font-size:var(--forge-chip-dense-icon-font-size, 1.25rem);--_chip-remove-button-spacing:var(--forge-chip-remove-button-spacing, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-xxsmall, 4px));--_chip-remove-button-height-dense:var(--forge-chip-remove-button-height-dense, 18px);--_chip-remove-button-icon-size-dense:var(--forge-chip-remove-button-icon-size-dense, 16px);--_chip-remove-button-spacing-dense:var(--forge-chip-remove-button-spacing-dense, 0 var(--forge-spacing-xxxsmall, 2px));--_chip-selected-background:var(--forge-chip-selected-background, var(--forge-theme-primary, #3f51b5));--_chip-selected-color:var(--forge-chip-selected-color, var(--forge-theme-on-primary, #ffffff));--_chip-invalid-color:var(--forge-chip-invalid-color, var(--forge-theme-error, #b00020));--_chip-invalid-selected-background:var(--forge-chip-invalid-selected-background, var(--forge-theme-error, #b00020));--_chip-invalid-selected-color:var(--forge-chip-invalid-selected-color, var(--forge-theme-on-error, #ffffff));--_chip-border-width:var(--forge-chip-border-width, var(--forge-border-thin, 1px));--_chip-border-style:var(--forge-chip-border-style, solid);--_chip-border-color:var(--forge-chip-border-color, var(--_chip-color));--_chip-field-background:var(--forge-chip-field-background, var(--forge-theme-surface-container-low, #ebebeb));--_chip-field-color:var(--forge-chip-field-color, var(--forge-theme-on-surface-container-low, #000000));--_chip-field-shape:var(--forge-chip-field-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_chip-field-border-color:var(--forge-chip-field-border-color, transparent);--_chip-field-cursor:var(--forge-chip-field-cursor, default);--_chip-checkmark-size:var(--forge-chip-checkmark-size, 1.25em);--_chip-checkmark-color:var(--forge-chip-checkmark-color, var(--_chip-color));--_chip-checkmark-spacing:var(--forge-chip-checkmark-spacing, var(--forge-spacing-xsmall, 8px));--_chip-avatar-size:var(--forge-chip-avatar-size, 24px);--_chip-avatar-size-dense:var(--forge-chip-avatar-size-dense, 18px);--_chip-avatar-font-size:var(--forge-chip-avatar-font-size, 0.75rem);--_chip-avatar-font-size-dense:var(--forge-chip-avatar-font-size-dense, 0.5rem);--_chip-avatar-spacing:var(--forge-chip-avatar-spacing, calc(var(--forge-spacing-xsmall, 8px) * -1));--_chip-avatar-spacing-dense:var(--forge-chip-avatar-spacing-dense, calc(var(--forge-spacing-xxsmall, 4px) * -1));--_chip-transition-duration:var(--forge-chip-transition-duration, var(--forge-animation-duration-short3, 150ms));--_chip-transition-easing:var(--forge-chip-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_chip-checkmark-transition-delay:var(--forge-chip-checkmark-transition-delay, 50ms)}.forge-chip{position:relative;display:inline-flex;align-items:center;box-sizing:border-box;height:var(--_chip-height);border-width:var(--_chip-border-width);border-style:var(--_chip-border-style);border-color:var(--_chip-border-color);border-radius:var(--_chip-shape);background:var(--_chip-background);color:var(--_chip-color);transition-property:background-color,color;transition-duration:var(--_chip-transition-duration);transition-timing-function:var(--_chip-transition-easing)}.trigger{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);display:inline-flex;align-items:center;justify-content:center;gap:var(--_chip-spacing);box-sizing:border-box;height:100%;padding-inline:var(--_chip-padding-inline);padding-block:var(--_chip-padding-block);cursor:var(--_chip-cursor);z-index:0;text-decoration:none;border:none;background:inherit;color:inherit;-webkit-tap-highlight-color:transparent;border-radius:var(--_chip-shape);outline:0}.remove{padding-inline:var(--_chip-remove-button-spacing);--forge-icon-button-focus-indicator-color:var(--_chip-color)}forge-focus-indicator{--forge-focus-indicator-color:var(--_chip-color);--forge-focus-indicator-shape:var(--_chip-shape)}forge-state-layer{--forge-state-layer-color:var(--_chip-color)}:host([dense]) .forge-chip{--_chip-height:var(--_chip-dense-height);--_chip-padding-inline:var(--_chip-dense-padding-inline);--_chip-spacing:var(--_chip-dense-spacing)}:host([dense]) .trigger{--forge-typography-font-size:var(--_chip-dense-font-size);--forge-typography-font-weight:var(--_chip-dense-font-weight)}:host([dense]) .remove{--_chip-remove-button-spacing:var(--_chip-remove-button-spacing-dense);--forge-icon-button-density-small-size:var(--_chip-remove-button-height-dense);--forge-icon-button-density-small-icon-size:var(--_chip-remove-button-icon-size-dense)}:host([dense]) forge-focus-indicator{--forge-focus-indicator-outward-offset:var(--_chip-dense-focus-indicator-offset)}:host([dense]) ::slotted(forge-avatar){--_chip-avatar-spacing:var(--_chip-avatar-spacing-dense);--forge-typography-font-size:var(--_chip-avatar-font-size-dense);--forge-avatar-size:var(--_chip-avatar-size-dense)}:host([dense]) ::slotted(:is([slot=start],[slot=leading],[slot=end],[slot=trailing])){--_chip-icon-font-size:var(--_chip-dense-icon-font-size)}:host(:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--_chip-selected-background);--_chip-color:var(--_chip-selected-color)}:host(:is([type=filter],[type=choice],[type=input])[selected]) forge-focus-indicator{--forge-focus-indicator-color:var(--_chip-background)}:host([invalid]) .forge-chip{--_chip-color:var(--_chip-invalid-color)}:host([invalid]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--_chip-invalid-selected-background);--_chip-color:var(--_chip-invalid-selected-color)}:host([disabled]:not([href])) .forge-chip{opacity:var(--_chip-disabled-opacity)}:host([disabled]:not([href])) .trigger{cursor:var(--_chip-disabled-cursor)}::slotted(:not(forge-avatar):is([slot=start],[slot=leading],[slot=end],[slot=trailing])){font-size:var(--_chip-icon-font-size)}::slotted(forge-avatar:is([slot=start],[slot=leading])){margin-inline-start:var(--_chip-avatar-spacing)}::slotted(forge-avatar:is([slot=end],[slot=trailing])){margin-inline-end:var(--_chip-avatar-spacing)}::slotted(forge-avatar){--forge-typography-font-size:var(--_chip-avatar-font-size);--forge-avatar-size:var(--_chip-avatar-size)}:host([type=filter]) .checkmark{height:var(--_chip-checkmark-size)}:host([type=filter]) .checkmark svg{width:0;height:var(--_chip-checkmark-size);transition-property:width;transition-duration:var(--_chip-transition-duration);transition-timing-function:var(--_chip-transition-easing)}:host([type=filter]) .checkmark svg path{stroke:var(--_chip-checkmark-color);transition-property:stroke-dashoffset;transition-duration:var(--_chip-transition-duration);transition-timing-function:var(--_chip-transition-easing);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}:host([type=filter][selected]) .checkmark{padding-inline-start:var(--_chip-checkmark-spacing)}:host([type=filter][selected]) .checkmark svg{width:var(--_chip-checkmark-size)}:host([type=filter][selected]) .checkmark svg path{transition-delay:var(--_chip-checkmark-transition-delay);stroke-dashoffset:0}:host([type=input]) .trigger{padding-inline:var(--_chip-padding-inline) 0}:host([type=field]) .forge-chip{--_chip-background:var(--_chip-field-background);--_chip-color:var(--_chip-field-color);--_chip-border-color:var(--_chip-field-border-color);--_chip-shape:var(--_chip-field-shape);--_chip-cursor:var(--_chip-field-cursor)}:host([theme=secondary]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_chip-border-color:var(--forge-chip-border-color, var(--forge-theme-secondary, #ffc107))}:host([theme=secondary]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-secondary, #ffc107));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-secondary-container-low, #fff8e1));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-secondary-container-low, #8a6804))}:host([theme=tertiary]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-tertiary, #3d5afe))}:host([theme=tertiary]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-tertiary, #3d5afe));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-tertiary-container-low, #213189))}:host([theme=success]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-success, #2e7d32))}:host([theme=success]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-success, #2e7d32));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-success-container-low, #e6efe6));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-success-container-low, #19441b))}:host([theme=warning]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-warning, #d14900))}:host([theme=warning]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-warning, #d14900));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-warning-container-low, #f9e9e0));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-warning-container-low, #712700))}:host([theme=error]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-error, #b00020))}:host([theme=error]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-error, #b00020));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-error-container-low, #f6e0e4));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-error-container-low, #5f0011))}:host([theme=info]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-info, #1565c0))}:host([theme=info]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-info, #1565c0));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-info-container-low, #e3edf7));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-info-container-low, #0b3768))}';
18
+ const styles = ':host{display:inline-flex}:host([hidden]){display:none}.forge-chip{--_chip-background:var(--forge-chip-background, transparent);--_chip-color:var(--forge-chip-color, var(--forge-theme-primary, #3f51b5));--_chip-shape:var(--forge-chip-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_chip-spacing:var(--forge-chip-spacing, var(--forge-spacing-xsmall, 8px));--_chip-height:var(--forge-chip-height, 32px);--_chip-padding-inline:var(--forge-chip-padding-inline, var(--forge-spacing-small, 12px));--_chip-padding-block:var(--forge-chip-padding-block, 0);--_chip-cursor:var(--forge-chip-cursor, pointer);--_chip-icon-font-size:var(--forge-chip-icon-font-size, 1.5rem);--_chip-focus-indicator-color:var(--forge-chip-focus-indicator-color, var(--_chip-color));--_chip-disabled-opacity:var(--forge-chip-disabled-opacity, 0.38);--_chip-disabled-cursor:var(--forge-chip-disabled-cursor, not-allowed);--_chip-dense-height:var(--forge-chip-dense-height, 24px);--_chip-dense-padding-inline:var(--forge-chip-dense-padding-inline, var(--forge-spacing-xsmall, 8px));--_chip-dense-spacing:var(--forge-chip-dense-spacing, var(--forge-spacing-xxsmall, 4px));--_chip-dense-font-size:var(--forge-chip-dense-font-size, 0.75rem);--_chip-dense-font-weight:var(--forge-chip-dense-font-weight, normal);--_chip-dense-focus-indicator-offset:var(--forge-chip-dense-focus-indicator-offset, var(--forge-spacing-xxxsmall, 2px));--_chip-dense-icon-font-size:var(--forge-chip-dense-icon-font-size, 1.25rem);--_chip-remove-button-spacing:var(--forge-chip-remove-button-spacing, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-xxsmall, 4px));--_chip-remove-button-height-dense:var(--forge-chip-remove-button-height-dense, 18px);--_chip-remove-button-icon-size-dense:var(--forge-chip-remove-button-icon-size-dense, 16px);--_chip-remove-button-spacing-dense:var(--forge-chip-remove-button-spacing-dense, 0 var(--forge-spacing-xxxsmall, 2px));--_chip-selected-background:var(--forge-chip-selected-background, var(--forge-theme-primary, #3f51b5));--_chip-selected-color:var(--forge-chip-selected-color, var(--forge-theme-on-primary, #ffffff));--_chip-invalid-color:var(--forge-chip-invalid-color, var(--forge-theme-error, #b00020));--_chip-invalid-selected-background:var(--forge-chip-invalid-selected-background, var(--forge-theme-error, #b00020));--_chip-invalid-selected-color:var(--forge-chip-invalid-selected-color, var(--forge-theme-on-error, #ffffff));--_chip-border-width:var(--forge-chip-border-width, var(--forge-border-thin, 1px));--_chip-border-style:var(--forge-chip-border-style, solid);--_chip-border-color:var(--forge-chip-border-color, var(--_chip-color));--_chip-field-background:var(--forge-chip-field-background, var(--forge-theme-surface-container-low, #ebebeb));--_chip-field-color:var(--forge-chip-field-color, var(--forge-theme-on-surface-container-low, #000000));--_chip-field-shape:var(--forge-chip-field-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_chip-field-border-color:var(--forge-chip-field-border-color, transparent);--_chip-field-cursor:var(--forge-chip-field-cursor, default);--_chip-checkmark-size:var(--forge-chip-checkmark-size, 1.25em);--_chip-checkmark-color:var(--forge-chip-checkmark-color, var(--_chip-color));--_chip-checkmark-spacing:var(--forge-chip-checkmark-spacing, var(--forge-spacing-xsmall, 8px));--_chip-avatar-size:var(--forge-chip-avatar-size, 24px);--_chip-avatar-size-dense:var(--forge-chip-avatar-size-dense, 18px);--_chip-avatar-font-size:var(--forge-chip-avatar-font-size, 0.75rem);--_chip-avatar-font-size-dense:var(--forge-chip-avatar-font-size-dense, 0.5rem);--_chip-avatar-spacing:var(--forge-chip-avatar-spacing, calc(var(--forge-spacing-xsmall, 8px) * -1));--_chip-avatar-spacing-dense:var(--forge-chip-avatar-spacing-dense, calc(var(--forge-spacing-xxsmall, 4px) * -1));--_chip-transition-duration:var(--forge-chip-transition-duration, var(--forge-animation-duration-short3, 150ms));--_chip-transition-easing:var(--forge-chip-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_chip-checkmark-transition-delay:var(--forge-chip-checkmark-transition-delay, 50ms)}.forge-chip{position:relative;display:inline-flex;align-items:center;box-sizing:border-box;height:var(--_chip-height);border-width:var(--_chip-border-width);border-style:var(--_chip-border-style);border-color:var(--_chip-border-color);border-radius:var(--_chip-shape);background:var(--_chip-background);color:var(--_chip-color);transition-property:background-color,color;transition-duration:var(--_chip-transition-duration);transition-timing-function:var(--_chip-transition-easing)}.trigger{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);display:inline-flex;align-items:center;justify-content:center;gap:var(--_chip-spacing);box-sizing:border-box;height:100%;padding-inline:var(--_chip-padding-inline);padding-block:var(--_chip-padding-block);cursor:var(--_chip-cursor);z-index:0;text-decoration:none;border:none;background:inherit;color:inherit;-webkit-tap-highlight-color:transparent;border-radius:var(--_chip-shape);outline:0}.remove{padding-inline:var(--_chip-remove-button-spacing);--forge-icon-button-focus-indicator-color:var(--_chip-color)}forge-focus-indicator{--forge-focus-indicator-color:var(--_chip-focus-indicator-color);--forge-focus-indicator-shape:var(--_chip-shape)}forge-state-layer{--forge-state-layer-color:var(--_chip-color)}:host([dense]) .forge-chip{--_chip-height:var(--_chip-dense-height);--_chip-padding-inline:var(--_chip-dense-padding-inline);--_chip-spacing:var(--_chip-dense-spacing)}:host([dense]) .trigger{--forge-typography-font-size:var(--_chip-dense-font-size);--forge-typography-font-weight:var(--_chip-dense-font-weight)}:host([dense]) .remove{--_chip-remove-button-spacing:var(--_chip-remove-button-spacing-dense);--forge-icon-button-density-small-size:var(--_chip-remove-button-height-dense);--forge-icon-button-density-small-icon-size:var(--_chip-remove-button-icon-size-dense)}:host([dense]) forge-focus-indicator{--forge-focus-indicator-outward-offset:var(--_chip-dense-focus-indicator-offset)}:host([dense]) ::slotted(forge-avatar){--_chip-avatar-spacing:var(--_chip-avatar-spacing-dense);--forge-typography-font-size:var(--_chip-avatar-font-size-dense);--forge-avatar-size:var(--_chip-avatar-size-dense)}:host([dense]) ::slotted(:is([slot=start],[slot=leading],[slot=end],[slot=trailing])){--_chip-icon-font-size:var(--_chip-dense-icon-font-size)}:host(:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--_chip-selected-background);--_chip-color:var(--_chip-selected-color)}:host(:is([type=filter],[type=choice],[type=input])[selected]) forge-focus-indicator{--forge-focus-indicator-color:var(--_chip-background)}:host([invalid]) .forge-chip{--_chip-color:var(--_chip-invalid-color)}:host([invalid]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--_chip-invalid-selected-background);--_chip-color:var(--_chip-invalid-selected-color)}:host([disabled]:not([href])) .forge-chip{opacity:var(--_chip-disabled-opacity)}:host([disabled]:not([href])) .trigger{cursor:var(--_chip-disabled-cursor)}::slotted(:not(forge-avatar):is([slot=start],[slot=leading],[slot=end],[slot=trailing])){font-size:var(--_chip-icon-font-size)}::slotted(forge-avatar:is([slot=start],[slot=leading])){margin-inline-start:var(--_chip-avatar-spacing)}::slotted(forge-avatar:is([slot=end],[slot=trailing])){margin-inline-end:var(--_chip-avatar-spacing)}::slotted(forge-avatar){--forge-typography-font-size:var(--_chip-avatar-font-size);--forge-avatar-size:var(--_chip-avatar-size)}:host([type=filter]) .checkmark{height:var(--_chip-checkmark-size)}:host([type=filter]) .checkmark svg{width:0;height:var(--_chip-checkmark-size);transition-property:width;transition-duration:var(--_chip-transition-duration);transition-timing-function:var(--_chip-transition-easing)}:host([type=filter]) .checkmark svg path{stroke:var(--_chip-checkmark-color);transition-property:stroke-dashoffset;transition-duration:var(--_chip-transition-duration);transition-timing-function:var(--_chip-transition-easing);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}:host([type=filter][selected]) .checkmark{padding-inline-start:var(--_chip-checkmark-spacing)}:host([type=filter][selected]) .checkmark svg{width:var(--_chip-checkmark-size)}:host([type=filter][selected]) .checkmark svg path{transition-delay:var(--_chip-checkmark-transition-delay);stroke-dashoffset:0}:host([type=input]) .trigger{padding-inline:var(--_chip-padding-inline) 0}:host([type=field]) .forge-chip{--_chip-background:var(--_chip-field-background);--_chip-color:var(--_chip-field-color);--_chip-border-color:var(--_chip-field-border-color);--_chip-shape:var(--_chip-field-shape);--_chip-cursor:var(--_chip-field-cursor)}:host([theme=secondary]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_chip-border-color:var(--forge-chip-border-color, var(--forge-theme-secondary, #ffc107))}:host([theme=secondary]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-secondary, #ffc107));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-secondary-container-low, #fff8e1));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-secondary-container-low, #8a6804))}:host([theme=tertiary]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-tertiary, #3d5afe))}:host([theme=tertiary]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-tertiary, #3d5afe));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-tertiary-container-low, #213189))}:host([theme=success]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-success, #2e7d32))}:host([theme=success]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-success, #2e7d32));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-success-container-low, #e6efe6));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-success-container-low, #19441b))}:host([theme=warning]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-warning, #d14900))}:host([theme=warning]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-warning, #d14900));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-warning-container-low, #f9e9e0));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-warning-container-low, #712700))}:host([theme=error]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-error, #b00020))}:host([theme=error]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-error, #b00020));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-error-container-low, #f6e0e4));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-error-container-low, #5f0011))}:host([theme=info]) .forge-chip{--_chip-color:var(--forge-chip-color, var(--forge-theme-info, #1565c0))}:host([theme=info]:is([type=filter],[type=choice],[type=input])[selected]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-info, #1565c0));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info][type=field]) .forge-chip{--_chip-background:var(--forge-chip-background, var(--forge-theme-info-container-low, #e3edf7));--_chip-color:var(--forge-chip-color, var(--forge-theme-on-info-container-low, #0b3768))}';
19
19
  /**
20
20
  * @tag forge-chip
21
21
  *
@@ -55,6 +55,7 @@ const styles = ':host{display:inline-flex}:host([hidden]){display:none}.forge-ch
55
55
  * @cssproperty --forge-chip-padding-block - The block padding of the chip.
56
56
  * @cssproperty --forge-chip-cursor - The cursor style of the chip.
57
57
  * @cssproperty --forge-chip-icon-font-size - The font size of the chip icon.
58
+ * @cssproperty --forge-chip-focus-indicator-color - The color of the focus indicator.
58
59
  * @cssproperty --forge-chip-disabled-opacity - The opacity of the disabled chip.
59
60
  * @cssproperty --forge-chip-disabled-cursor - The cursor style of the disabled chip.
60
61
  * @cssproperty --forge-chip-dense-height - The height of the dense chip.
@@ -12,7 +12,7 @@ import { BaseComponent } from '../core/base/base-component';
12
12
  import { WithElementInternals } from '../core/mixins/internals/with-element-internals';
13
13
  import { WithDefaultAria } from '../core/mixins/internals/with-default-aria';
14
14
  const template = '<template><div class=\"forge-circular-progress\" part=\"progressbar\"><slot class=\"center-content\"></slot></div></template>';
15
- const styles = ':host{--_circular-progress-size:var(--forge-circular-progress-size, 48px)}:host{display:inline-flex;vertical-align:middle;min-block-size:var(--_circular-progress-size);min-inline-size:var(--_circular-progress-size);position:relative;align-items:center;justify-content:center;transition:background-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);contain:strict;content-visibility:auto}:host([hidden]){display:none}.forge-circular-progress{--_circular-progress-padding:var(--forge-circular-progress-padding, 0);--_circular-progress-track-width:var(--forge-circular-progress-track-width, 12);--_circular-progress-track-color:var(--forge-circular-progress-track-color, transparent);--_circular-progress-track-fill-color:var(--forge-circular-progress-track-fill-color, var(--forge-theme-tertiary-container, #d0d7ff));--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-tertiary, #3d5afe));--_circular-progress-arc-duration:var(--forge-circular-progress-arc-duration, 1333ms);--_circular-progress-theme-transition-duration:var(--forge-circular-progress-theme-transition-duration, var(--forge-animation-duration-short3, 150ms));--_circular-progress-theme-transition-timing:var(--forge-circular-progress-theme-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-circular-progress{flex:1;align-self:stretch;margin:var(--_circular-progress-padding)}.forge-circular-progress--indeterminate{will-change:transform;animation:linear infinite linear-rotate;animation-duration:calc(var(--_circular-progress-arc-duration) * 360 / 306)}.circle,.forge-circular-progress,.left,.right,.spinner,svg{position:absolute;inset:0}.center-content{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.left{overflow:hidden;inset:0 50% 0 0}.left .circle{rotate:135deg;inset:0 -100% 0 0}.right{overflow:hidden;inset:0 0 0 50%}.right .circle{rotate:100deg;inset:0 0 0 -100%;animation-delay:calc(-.5 * var(--_circular-progress-arc-duration)),0s}.circle{box-sizing:border-box;border-radius:50%;border:solid calc(var(--_circular-progress-size) * var(--_circular-progress-track-width)/ 100);border-color:var(--_circular-progress-indicator-color) var(--_circular-progress-indicator-color) transparent transparent;transition:border-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);will-change:transform;animation:expand-arc;animation-iteration-count:infinite;animation-fill-mode:both;animation-duration:var(--_circular-progress-arc-duration),calc(4 * var(--_circular-progress-arc-duration));animation-timing-function:cubic-bezier(0.4,0,0.2,1)}svg{transform:rotate(-90deg)}svg circle{cx:50%;cy:50%;r:calc(50% * (1 - var(--_circular-progress-track-width)/ 100));stroke-width:calc(var(--_circular-progress-track-width) * 1%);stroke-dasharray:100;fill:transparent}.progress{transition:stroke-dashoffset .5s cubic-bezier(0, 0, .2, 1),stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);stroke:var(--_circular-progress-indicator-color)}.track{stroke:transparent}.track-background{transition:stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);stroke:var(--_circular-progress-track-color)}.spinner{will-change:transform;animation:infinite both rotate-arc;animation-duration:calc(4 * var(--_circular-progress-arc-duration));animation-timing-function:cubic-bezier(0.4,0,0.2,1)}:host(:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--_circular-progress-track-fill-color)}:host([theme=primary]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-primary, #3f51b5))}:host([theme=primary]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-primary-container, #d1d5ed))}:host([theme=secondary]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-secondary, #ffc107))}:host([theme=secondary]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-secondary-container, #fff0c3))}:host([theme=success]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-success, #2e7d32))}:host([theme=success]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-success-container, #cde0ce))}:host([theme=error]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-error, #b00020))}:host([theme=error]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-error-container, #ecc2c9))}:host([theme=warning]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-warning, #d14900))}:host([theme=warning]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-warning-container, #f4d3c2))}:host([theme=info]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-info, #1565c0))}:host([theme=info]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-info-container, #c7daf0))}@media screen and (forced-colors:active){.progress{stroke:CanvasText}.circle{border-color:CanvasText CanvasText Canvas Canvas}}@keyframes expand-arc{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}100%{transform:rotate(265deg)}}@keyframes rotate-arc{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}@keyframes linear-rotate{to{transform:rotate(360deg)}}';
15
+ const styles = ':host{--_circular-progress-size:var(--forge-circular-progress-size, 48px)}:host{display:inline-flex;vertical-align:middle;block-size:var(--_circular-progress-size);inline-size:var(--_circular-progress-size);position:relative;align-items:center;justify-content:center;transition:background-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);contain:strict;content-visibility:auto}:host([hidden]){display:none}.forge-circular-progress{--_circular-progress-padding:var(--forge-circular-progress-padding, 0);--_circular-progress-track-width:var(--forge-circular-progress-track-width, 12);--_circular-progress-track-color:var(--forge-circular-progress-track-color, transparent);--_circular-progress-track-fill-color:var(--forge-circular-progress-track-fill-color, var(--forge-theme-tertiary-container, #d0d7ff));--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-tertiary, #3d5afe));--_circular-progress-arc-duration:var(--forge-circular-progress-arc-duration, 1333ms);--_circular-progress-theme-transition-duration:var(--forge-circular-progress-theme-transition-duration, var(--forge-animation-duration-short3, 150ms));--_circular-progress-theme-transition-timing:var(--forge-circular-progress-theme-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-circular-progress{flex:1;align-self:stretch;margin:var(--_circular-progress-padding)}.forge-circular-progress--indeterminate{will-change:transform;animation:linear infinite linear-rotate;animation-duration:calc(var(--_circular-progress-arc-duration) * 360 / 306)}.circle,.forge-circular-progress,.left,.right,.spinner,svg{position:absolute;inset:0}.center-content{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.left{overflow:hidden;inset:0 50% 0 0}.left .circle{rotate:135deg;inset:0 -100% 0 0}.right{overflow:hidden;inset:0 0 0 50%}.right .circle{rotate:100deg;inset:0 0 0 -100%;animation-delay:calc(-.5 * var(--_circular-progress-arc-duration)),0s}.circle{box-sizing:border-box;border-radius:50%;border:solid calc(var(--_circular-progress-size) * var(--_circular-progress-track-width)/ 100);border-color:var(--_circular-progress-indicator-color) var(--_circular-progress-indicator-color) transparent transparent;transition:border-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);will-change:transform;animation:expand-arc;animation-iteration-count:infinite;animation-fill-mode:both;animation-duration:var(--_circular-progress-arc-duration),calc(4 * var(--_circular-progress-arc-duration));animation-timing-function:cubic-bezier(0.4,0,0.2,1)}svg{transform:rotate(-90deg)}svg circle{cx:50%;cy:50%;r:calc(50% * (1 - var(--_circular-progress-track-width)/ 100));stroke-width:calc(var(--_circular-progress-track-width) * 1%);stroke-dasharray:100;fill:transparent}.progress{transition:stroke-dashoffset .5s cubic-bezier(0, 0, .2, 1),stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);stroke:var(--_circular-progress-indicator-color)}.track{stroke:transparent}.track-background{transition:stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);stroke:var(--_circular-progress-track-color)}.spinner{will-change:transform;animation:infinite both rotate-arc;animation-duration:calc(4 * var(--_circular-progress-arc-duration));animation-timing-function:cubic-bezier(0.4,0,0.2,1)}:host(:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--_circular-progress-track-fill-color)}:host([theme=primary]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-primary, #3f51b5))}:host([theme=primary]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-primary-container, #d1d5ed))}:host([theme=secondary]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-secondary, #ffc107))}:host([theme=secondary]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-secondary-container, #fff0c3))}:host([theme=success]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-success, #2e7d32))}:host([theme=success]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-success-container, #cde0ce))}:host([theme=error]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-error, #b00020))}:host([theme=error]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-error-container, #ecc2c9))}:host([theme=warning]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-warning, #d14900))}:host([theme=warning]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-warning-container, #f4d3c2))}:host([theme=info]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-info, #1565c0))}:host([theme=info]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-info-container, #c7daf0))}@media screen and (forced-colors:active){.progress{stroke:CanvasText}.circle{border-color:CanvasText CanvasText Canvas Canvas}}@keyframes expand-arc{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}100%{transform:rotate(265deg)}}@keyframes rotate-arc{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}@keyframes linear-rotate{to{transform:rotate(360deg)}}';
16
16
  /**
17
17
  * @tag forge-circular-progress
18
18
  *