@tylertech/forge 3.3.6 → 3.4.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 (62) hide show
  1. package/custom-elements.json +82 -43
  2. package/dist/app-bar/forge-app-bar.css +2 -1
  3. package/dist/forge.css +12 -0
  4. package/dist/icon-button/forge-icon-button.css +1 -0
  5. package/dist/lib.js +1 -1
  6. package/dist/lib.js.map +3 -3
  7. package/dist/radio/forge-radio.css +16 -21
  8. package/dist/toolbar/forge-toolbar.css +2 -1
  9. package/dist/typography/forge-typography.css +12 -0
  10. package/dist/vscode.css-custom-data.json +17 -32
  11. package/dist/vscode.html-custom-data.json +8 -8
  12. package/esm/app-bar/app-bar/app-bar.d.ts +1 -0
  13. package/esm/app-bar/app-bar/app-bar.js +2 -1
  14. package/esm/button-area/button-area.js +1 -1
  15. package/esm/calendar/calendar-core.d.ts +1 -1
  16. package/esm/calendar/calendar-core.js +1 -1
  17. package/esm/calendar/calendar.js +1 -1
  18. package/esm/checkbox/checkbox.js +1 -1
  19. package/esm/date-range-picker/date-range-picker.d.ts +5 -0
  20. package/esm/date-range-picker/date-range-picker.js +5 -0
  21. package/esm/deprecated/icon-button/deprecated-icon-button.js +1 -1
  22. package/esm/field/field.js +1 -1
  23. package/esm/icon-button/icon-button.d.ts +1 -0
  24. package/esm/icon-button/icon-button.js +2 -1
  25. package/esm/popover/popover-adapter.js +3 -1
  26. package/esm/radio/radio/radio.d.ts +1 -4
  27. package/esm/radio/radio/radio.js +2 -5
  28. package/esm/switch/switch.js +1 -1
  29. package/esm/tabs/tab/tab-adapter.d.ts +3 -0
  30. package/esm/tabs/tab/tab-adapter.js +5 -0
  31. package/esm/tabs/tab/tab-core.d.ts +3 -0
  32. package/esm/tabs/tab/tab-core.js +5 -0
  33. package/esm/tabs/tab/tab.d.ts +6 -4
  34. package/esm/tabs/tab/tab.js +6 -5
  35. package/esm/tabs/tab-bar/tab-bar-core.js +1 -1
  36. package/esm/tabs/tab-bar/tab-bar.d.ts +4 -2
  37. package/esm/tabs/tab-bar/tab-bar.js +3 -3
  38. package/esm/text-field/text-field-core.js +7 -2
  39. package/esm/text-field/text-field.d.ts +1 -0
  40. package/esm/text-field/text-field.js +3 -0
  41. package/esm/toolbar/toolbar.d.ts +1 -0
  42. package/esm/toolbar/toolbar.js +2 -1
  43. package/esm/tooltip/tooltip.js +1 -1
  44. package/package.json +1 -1
  45. package/sass/app-bar/app-bar/_core.scss +1 -1
  46. package/sass/checkbox/_core.scss +1 -1
  47. package/sass/core/styles/tokens/app-bar/app-bar/_tokens.scss +1 -0
  48. package/sass/core/styles/tokens/field/_tokens.scss +2 -2
  49. package/sass/core/styles/tokens/icon-button/_tokens.scss +1 -0
  50. package/sass/core/styles/tokens/radio/_tokens.scss +2 -5
  51. package/sass/core/styles/tokens/tabs/tab/_tokens.scss +6 -6
  52. package/sass/core/styles/tokens/toolbar/_tokens.scss +2 -1
  53. package/sass/core/styles/tokens/typography/_tokens.label.scss +10 -0
  54. package/sass/icon-button/_core.scss +1 -0
  55. package/sass/radio/forge-radio.scss +3 -3
  56. package/sass/radio/radio/_core.scss +15 -21
  57. package/sass/switch/_core.scss +1 -1
  58. package/sass/tabs/tab/_core.scss +4 -19
  59. package/sass/tabs/tab/tab.scss +1 -25
  60. package/sass/tabs/tab-bar/_core.scss +1 -0
  61. package/sass/toolbar/_core.scss +1 -1
  62. package/sass/utils/_mixins.scss +1 -1
package/esm/field/field.js CHANGED
@@ -11,7 +11,7 @@ import { FieldAdapter } from './field-adapter';
11
11
  import { FIELD_CONSTANTS } from './field-constants';
12
12
  import { FieldCore } from './field-core';
13
13
  const template = '<template><div id=\"root\" class=\"forge-field\" part=\"root\"><div id=\"label\" class=\"label\" part=\"label\"><slot name=\"label\"></slot></div><div id=\"container\" class=\"container\"><div class=\"popover-target\" aria-hidden=\"true\"></div><div id=\"surface\" class=\"surface\" part=\"surface\"></div><div id=\"start\" class=\"start\" part=\"start\"><slot name=\"start\"></slot></div><div id=\"input\" class=\"input\" part=\"input\"><slot></slot></div><div id=\"end\" class=\"end\" part=\"end\"><slot name=\"end\"></slot></div><div id=\"popover-icon\" class=\"popover-icon\" part=\"popover-icon\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" aria-hidden=\"true\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 10l5 5 5-5z\" id=\"popover-icon__arrow\"/></svg></div><div id=\"accessory\" class=\"accessory\" part=\"accessory\"><slot name=\"accessory\"></slot></div></div><div class=\"support-text\"><div class=\"support-text-start\" part=\"support-text\"><slot name=\"support-text\"></slot></div><div class=\"support-text-end\" part=\"support-text-end\"><slot name=\"support-text-end\"></slot></div></div><div class=\"outline\"><forge-focus-indicator target=\"input\" part=\"focus-indicator\"></forge-focus-indicator></div></div></template>';
14
- 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 multiline-inset-label-background-animation{from{opacity:0%}to{opacity:100%}}@layer base,theme,variant,shape,density; @layer base{:host{display:block}:host([hidden]){display:none}.forge-field{--_field-background:var(--forge-field-background, transparent);--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-surface-container-low, #ebebeb));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-surface-container-minimum, #f5f5f5));--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-surface-bright, #ffffff));--_field-outline-style:var(--forge-field-outline-style, solid);--_field-outline-width:var(--forge-field-outline-width, var(--forge-border-thin, 1px));--_field-shape:var(--forge-field-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_field-height:var(--forge-field-height, 40px);--_field-inset-height:var(--forge-field-inset-height, 48px);--_field-padding-inline:var(--forge-field-padding-inline, 12px);--_field-padding-inline-start:var(--forge-field-padding-inline-start, var(--_field-padding-inline));--_field-padding-inline-end:var(--forge-field-padding-inline-end, var(--_field-padding-inline));--_field-inner-padding-inline:var(--forge-field-inner-padding-inline, 8px);--_field-rounded-container-padding-inline:var(--forge-field-rounded-container-padding-inline, calc(var(--_field-height) / 2));--_field-rounded-container-padding-inline-start:var(--forge-field-rounded-container-padding-inline-start, var(--_field-rounded-container-padding-inline));--_field-rounded-container-padding-inline-end:var(--forge-field-rounded-container-padding-inline-end, var(--_field-rounded-container-padding-inline));--_field-support-text-margin-block:var(--forge-field-support-text-margin-block, 4px);--_field-support-text-gap:var(--forge-field-support-text-gap, 8px);--_field-support-text-padding-inline:var(--forge-field-support-text-padding-inline, var(--_field-padding-inline));--_field-support-text-padding-inline-start:var(--forge-field-support-text-padding-inline-start, var(--_field-support-text-padding-inline));--_field-support-text-padding-inline-end:var(--forge-field-support-text-padding-inline-end, var(--_field-support-text-padding-inline));--_field-label-margin-inline:var(--forge-field-label-margin-inline, 8px);--_field-label-margin-block:var(--forge-field-label-margin-block, 4px);--_field-required-padding:var(--forge-field-required-padding, 0.35ch);--_field-required-content:var(--forge-field-required-content, \"*\");--_field-optional-padding:var(--forge-field-optional-padding, 0.5ch);--_field-optional-content:var(--forge-field-optional-content, \"(optional)\");--_field-multiline-resize:var(--forge-field-multiline-resize, block);--_field-multiline-min-inline-size:var(--forge-field-multiline-min-inline-size, initial);--_field-multiline-max-inline-size:var(--forge-field-multiline-max-inline-size, initial);--_field-multiline-min-block-size:var(--forge-field-multiline-min-block-size, var(--_field-height));--_field-multiline-max-block-size:var(--forge-field-multiline-max-block-size, initial);--_field-popover-icon-transition-duration:var(--forge-field-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));--_field-popover-icon-transition-timing:var(--forge-field-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_field-popover-icon-open-rotation:var(--forge-field-popover-icon-open-rotation, 180deg);--_field-surface-animation-duration:var(--forge-field-surface-animation-duration, var(--forge-animation-duration-short4, 200ms));--_field-surface-animation-timing:var(--forge-field-surface-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_field-floating-animation-duration:var(--forge-field-floating-animation-duration, var(--forge-animation-duration-short4, 200ms));--_field-floating-animation-timing:var(--forge-field-floating-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_field-focus-indicator-width:var(--forge-field-focus-indicator-width, var(--forge-focus-indicator-width, var(--forge-border-medium, 2px)));--_field-disabled-opacity:var(--forge-field-disabled-opacity, 0.38);--_field-disabled-background:var(--forge-field-disabled-background, var(--forge-theme-surface-container-low, #ebebeb));--_field-font-size:var(--forge-field-font-size, inherit);--_field-dense-font-size:var(--forge-field-dense-font-size, 0.875rem);--_field-placeholder-color:var(--forge-field-placeholder-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}.forge-field{--_field-disableable-cursor:var(--forge-field-disableable-cursor, unset);--_field-disableable-opacity:var(--forge-field-disableable-opacity, 1);--_field-inner-border-block-size:var(--forge-field-inner-border-block-size, 100%);--_field-inner-border-color:var(--forge-field-inner-border-color, var(--_field-outline-color));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--_field-outline-color-hover));--_field-inner-border-display:var(--forge-field-inner-border-display, block);--_field-label-color:var(--forge-field-label-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_field-label-grid-area:var(--forge-field-label-grid-area, \"label\");--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-surface, #ffffff));--_field-multiline-inset-label-background-hover:var(--forge-field-multiline-inset-label-background-hover, var(--_field-multiline-inset-label-background));--_field-surface-display:var(--forge-field-surface-display, block);position:relative;display:grid}}@layer theme{:host(:where([theme=default],:not([theme]))) .forge-field{--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-outline-low, #9e9e9e));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-outline-high, #212121));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-filled-background));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--_field-tonal-background));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--_field-tonal-background-hover));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-outline-low, #9e9e9e));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-outline-high, #212121))}:host(:where([label-position=inset],:not([label-position])):where([theme=default],:not([theme]))) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}:host([theme=primary]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-primary-container-low, #e8eaf6));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-primary-container-minimum, #f7f8fc));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-primary-container, #222c62));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-primary, #3f51b5));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-primary-container, #222c62));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-primary-container-low, #222c62));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-primary-container-low, #e8eaf6));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-primary-container-minimum, #f7f8fc));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-primary, #3f51b5));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-primary-container, #222c62))}:host(:where([label-position=inset],:not([label-position]))[theme=primary]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-primary-container-low, #222c62))}:host([theme=secondary]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-secondary-container-minimum, #fffdf5));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-secondary, #ffc107));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-secondary-container-low, #fff8e1));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-secondary-container-minimum, #fffdf5));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-secondary-container, #8a6804));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-on-secondary-container, #8a6804));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-secondary-container, #8a6804));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-secondary-container-low, #8a6804));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-secondary-container-minimum, #fffdf5));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-secondary-container-low, #fff8e1));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-secondary-container-minimum, #fffdf5));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-on-secondary-container, #8a6804));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-secondary-container, #8a6804))}:host(:where([label-position=inset],:not([label-position]))[theme=secondary]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-secondary-container-low, #8a6804))}:host([theme=tertiary]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-tertiary, #3d5afe));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-tertiary-container, #213189));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-tertiary, #3d5afe));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-tertiary-container, #213189));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-tertiary-container-low, #213189));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-tertiary, #3d5afe));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-tertiary-container, #213189))}:host(:where([label-position=inset],:not([label-position]))[theme=tertiary]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-tertiary-container-low, #213189))}:host([theme=success]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-success-container-minimum, #f7faf7));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-success, #2e7d32));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-success-container-low, #e6efe6));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-success-container-minimum, #f7faf7));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-success-container, #19441b));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-success, #2e7d32));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-success-container, #19441b));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-success-container-low, #19441b));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-success-container-minimum, #f7faf7));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-success-container-low, #e6efe6));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-success-container-minimum, #f7faf7));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-success, #2e7d32));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-success-container, #19441b))}:host(:where([label-position=inset],:not([label-position]))[theme=success]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-success-container-low, #19441b))}:host([theme=error]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-error, #b00020));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-error-container-low, #f6e0e4));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-error-container, #5f0011));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-error, #b00020));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-error-container, #5f0011));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-error-container-low, #5f0011));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-error-container-low, #f6e0e4));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-error, #b00020));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-error-container, #5f0011))}:host(:where([label-position=inset],:not([label-position]))[theme=error]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-error-container-low, #5f0011))}:host([theme=warning]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-warning, #d14900));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-warning-container-low, #f9e9e0));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-warning-container-minimum, #fdf8f5));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-warning-container, #712700));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-warning, #d14900));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-warning-container, #712700));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-warning-container-low, #712700));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-warning-container-low, #f9e9e0));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-warning-container-minimum, #fdf8f5));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-warning, #d14900));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-warning-container, #712700))}:host(:where([label-position=inset],:not([label-position]))[theme=warning]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-warning-container-low, #712700))}:host([theme=info]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-info-container-minimum, #f6f9fc));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-info, #1565c0));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-info-container-low, #e3edf7));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-info-container-minimum, #f6f9fc));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-info-container, #0b3768));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-info, #1565c0));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-info-container, #0b3768));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-info-container-low, #0b3768));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-info-container-minimum, #f6f9fc));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-info-container-low, #e3edf7));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-info-container-minimum, #f6f9fc));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-info, #1565c0));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-info-container, #0b3768))}:host(:where([label-position=inset],:not([label-position]))[theme=info]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-info-container-low, #0b3768))}}@layer variant{:host([variant=plain]) .forge-field{--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-surface, #ffffff));--_field-multiline-inset-label-background-hover:var(--forge-field-multiline-inset-label-background-hover, var(--forge-theme-surface, #ffffff));--_field-outline-color:var(--forge-field-outline-color, transparent);--_field-outline-color-hover:var(--forge-field-outline-color-hover, transparent);--_field-inner-border-display:var(--forge-field-inner-border-display, none);--_field-padding-inline:var(--forge-field-padding-inline, 0);--_field-surface-display:var(--forge-field-surface-display, none)}:host(:where([variant=outlined],:not([variant]))) .forge-field{--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-surface, #ffffff));--_field-multiline-inset-label-background-hover:var(--forge-field-multiline-inset-label-background-hover, var(--forge-theme-surface, #ffffff))}:host([variant=tonal]) .forge-field{--_field-outline-color:var(--forge-field-outline-color, transparent);--_field-outline-color-hover:var(--forge-field-outline-color-hover, transparent);--_field-inner-border-block-size:var(--forge-field-inner-border-block-size, calc(100% - 8px));--_field-background:var(--_field-tonal-background);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-background));--_field-hover-background:var(--forge-field-hover-background, tonal-background-hover);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-multiline-inset-label-tonal-background))}:host([variant=filled]) .forge-field{--_field-background:var(--_field-filled-background);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-background))}:host([variant=raised]) .forge-field{--_field-elevation:var(--forge-field-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_field-elevation-active:var(--forge-field-elevation-active, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));--_field-outline-color:var(--forge-field-outline-color, transparent);--_field-outline-color-hover:var(--forge-field-outline-color-hover, transparent);--_field-inner-border-block-size:var(--forge-field-inner-border-block-size, calc(100% - 8px));--_field-background:var(--_field-filled-background);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-background))}}@layer shape{:host([shape=squared]) .forge-field{--_field-shape:var(--forge-field-shape, 0)}:host([shape=rounded]) .forge-field{--_field-shape:var(--forge-field-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_field-padding-inline:var(--forge-field-padding-inline, var(--_field-rounded-container-padding-inline-start))}}@layer density{:host(:where([label-position=inset],:not([label-position])):not([dense]):where([density=default],:not([density]))) .forge-field{--_field-height:var(--forge-field-height, var(--_field-inset-height))}:host(:where([density=extra-small],[dense])) .forge-field{--_field-height:var(--forge-field-height, 24px);--_field-padding-inline-start:var(--forge-field-padding-inline-start, 8px);--_field-padding-inline-end:var(--forge-field-padding-inline-end, 4px)}:host(:where([label-position=inset],:not([label-position])):where([density=extra-small],[dense])) .forge-field{--_field-height:var(--forge-field-height, 24px)}:host(:where([label-position=inset],:not([label-position])):where([density=extra-small],[dense])) .label,:host(:where([label-position=inset],:not([label-position])):where([density=extra-small],[dense])) .label::before{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}:host(:where([label-position=inset],:not([label-position])):where([density=extra-small],[dense])) ::slotted(:where(input,textarea,[data-forge-field-input])){--_field-font-size:var(--_field-dense-font-size)}:host(:not([dense])[density=small]) .forge-field{--_field-height:var(--forge-field-height, 32px)}:host(:where([label-position=inset],:not([label-position])):not([dense])[density=small]) .forge-field{--_field-height:var(--forge-field-height, 40px)}:host(:not([dense])[density=medium]) .forge-field{--_field-height:var(--forge-field-height, 40px)}:host(:where([label-position=inset],:not([label-position])):not([dense])[density=medium]) .forge-field{--_field-height:var(--forge-field-height, 48px)}:host(:not([dense])[density=large]) .forge-field{--_field-height:var(--forge-field-height, 48px)}:host(:where([label-position=inset],:not([label-position])):not([dense])[density=large]) .forge-field{--_field-height:var(--forge-field-height, 56px)}:host(:not([dense])[density=extra-large]) .forge-field{--_field-height:var(--forge-field-height, 56px)}:host(:where([label-position=inset],:not([label-position])):not([dense])[density=extra-large]) .forge-field{--_field-height:var(--forge-field-height, 64px)}}:host(:not([disabled]):hover) .forge-field{--_field-outline-color:var(--forge-field-outline-color, var(--_field-outline-color-hover));--_field-elevation:var(--forge-field-elevation, var(--_field-elevation-active));--_field-tonal-background:var(--_field-tonal-background-hover);--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--_field-multiline-inset-label-tonal-background-hover));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--_field-inner-border-color-hover))}:host([disabled]) .forge-field{--_field-background:var(--_field-disabled-background);--_field-disableable-cursor:var(--forge-field-disableable-cursor, not-allowed);--_field-disableable-opacity:var(--forge-field-disableable-opacity, var(--_field-disabled-opacity))}:host(:not([disabled])[invalid]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-error, #b00020));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-error-container-low, #f6e0e4));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-error-container, #5f0011));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-error, #b00020));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-error-container, #5f0011));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-error-container-low, #5f0011));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-error-container-low, #f6e0e4));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-error, #b00020));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-error-container, #5f0011));--_field-label-color:var(--forge-field-label-color, var(--forge-theme-error, #b00020))}:host(:not([disabled])[invalid]) .forge-field .support-text{color:var(--forge-theme-error,#b00020)}:host(:not([disabled])) .forge-field:has(.input:focus-within){--_field-elevation:var(--forge-field-elevation, var(--_field-elevation-active))}.forge-field .outline{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);transition-duration:var(--_field-surface-animation-duration);transition-property:outline-color;transition-timing-function:var(--_field-surface-animation-timing);position:relative;grid-area:main;inline-size:100%;block-size:100%;box-shadow:var(--_field-elevation);border-radius:var(--_field-shape);outline-style:var(--_field-outline-style);outline-width:var(--_field-outline-width);outline-color:var(--_field-outline-color);outline-offset:calc(var(--_field-outline-width) * -1);pointer-events:none}.forge-field .container{-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);position:relative;display:grid;isolation:isolate;grid-area:main;grid-template-areas:\"start center end popover-icon accessory\";grid-template-columns:auto 1fr auto auto auto;align-items:center;border-radius:var(--_field-shape);inline-size:100%;block-size:var(--_field-height);overflow:hidden}.forge-field .surface{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);transition-duration:var(--_field-surface-animation-duration);transition-property:background;transition-timing-function:var(--_field-surface-animation-timing);display:var(--_field-surface-display);grid-column:1/-1;grid-row:1/-1;border-radius:var(--_field-shape);inline-size:100%;block-size:100%;background:var(--_field-background);pointer-events:none}.forge-field .input{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);display:flex;grid-area:center;block-size:100%;inline-size:100%;min-inline-size:0;color:var(--forge-theme-text-high,rgba(0,0,0,.87))}.forge-field .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);position:relative;display:inline-flex;grid-area:var(--_field-label-grid-area);pointer-events:var(--_field-label-pointer-events);margin-block-end:var(--_field-label-margin-block-end);margin-inline-start:var(--_field-label-margin-inline-start);margin-inline-end:var(--_field-label-margin-inline-end);block-size:fit-content;overflow:hidden;color:var(--_field-label-color);line-height:normal;white-space:var(--_field-label-white-space)}.forge-field .popover-target{position:absolute;inset:calc(var(--_field-focus-indicator-width) * -1);pointer-events:none}.forge-field .popover-icon{display:none}.forge-field .popover-icon__arrow{fill:inherit}.forge-field .accessory,.forge-field .end,.forge-field .start,.forge-field .support-text,.forge-field .support-text-end,.forge-field .support-text-start{display:none}:host([required]) .label::before{margin-inline-end:var(--_field-required-padding);color:var(--forge-theme-error,#b00020);content:var(--_field-required-content)}:host([optional]) .label::after{margin-inline-start:var(--_field-optional-padding);color:inherit;content:var(--_field-optional-content)}:host([popover-icon]) .popover-icon{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);padding-inline-end:var(--_field-inner-padding-inline);display:flex;align-items:center;grid-area:popover-icon;isolation:isolate;block-size:100%}:host([popover-icon]) .popover-icon>*{transition:rotate var(--_field-popover-icon-transition-duration) var(--_field-popover-icon-transition-timing);fill:var(--_field-content-color)}:host([popover-icon][popover-expanded]) .popover-icon>*{rotate:var(--_field-popover-icon-open-rotation)}.forge-field.has-start .start{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);padding-inline-start:var(--_field-padding-inline-start);display:flex;grid-area:start;align-items:center;block-size:100%;max-block-size:100%;min-block-size:0;color:var(--_field-content-color)}.forge-field.has-end .end{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);padding-inline-end:var(--_field-padding-inline-end);display:flex;grid-area:end;align-items:center;block-size:100%;max-block-size:100%;min-block-size:0;color:var(--_field-content-color)}.forge-field.has-accessory .accessory{padding-inline-end:var(--_field-inner-padding-inline);position:relative;display:flex;grid-area:accessory;align-items:center;block-size:100%;max-block-size:100%;min-block-size:0;color:var(--_field-content-color)}.forge-field.has-accessory .accessory::before{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);transition-duration:var(--_field-surface-animation-duration);transition-property:border-color;transition-timing-function:var(--_field-surface-animation-timing);padding-inline-end:var(--_field-inner-padding-inline);display:var(--_field-inner-border-display);border-inline-start-style:solid;border-inline-start-width:var(--_field-outline-width);border-inline-start-color:var(--_field-inner-border-color);block-size:var(--_field-inner-border-block-size);content:\"\"}.forge-field.has-accessory .forge-field:not(.has-accessory) .popover-icon{padding-inline-end:var(--_field-padding-inline-end)}.forge-field.has-support-text-end .support-text,.forge-field.has-support-text-start .support-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit);justify-content:space-between;display:grid;grid-template-areas:\"start end\";grid-template-columns:1fr auto;grid-area:support-text;margin-block-start:var(--_field-support-text-margin-block);line-height:normal}.forge-field.has-support-text-start.has-support-text-end .support-text{gap:var(--_field-support-text-gap)}.forge-field.has-support-text-start .support-text-start{display:inline-block;grid-area:start}.forge-field.has-support-text-end .support-text-end{display:inline-block;grid-area:end}:host(:not([popover-icon])) .forge-field:not(.has-accessory) .end{padding-inline-end:var(--_field-padding-inline-end)}:host([label-position=block-start]) .forge-field{grid-template-areas:\"label\" \"main\" \"support-text\";grid-template-columns:1fr;grid-template-rows:auto auto auto}:host([label-position=block-start]) .label{--_field-label-margin-block-end:var(--forge-field-label-margin-block-end, var(--_field-label-margin-block))}:host([label-position=inline-start]) .forge-field{grid-template-areas:\"label main\" \". support-text\";grid-template-columns:auto 1fr;grid-template-rows:auto auto}:host([label-position=inline-start]) .label{--_field-label-margin-inline-end:var(--forge-field-label-margin-inline-end, var(--_field-label-margin-inline))}:host([label-position=inline-end]) .forge-field{grid-template-areas:\"main label\" \"support-text .\";grid-template-columns:1fr auto;grid-template-rows:auto auto}:host([label-position=inline-end]) .label{--_field-label-margin-inline-start:var(--forge-field-label-margin-inline-start, var(--_field-label-margin-inline))}:host(:where([label-position=inset],:not([label-position]))) .forge-field{grid-template-areas:\"main\" \"support-text\";grid-template-columns:1fr;grid-template-rows:auto auto;--_field-label-grid-area:var(--forge-field-label-grid-area, center);--_field-label-pointer-events:var(--forge-field-label-pointer-events, none);--_field-label-white-space:var(--forge-field-label-white-space, nowrap)}:host(:where([label-position=inset],:not([label-position]))) .label{-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);padding-inline-start:var(--_field-padding-inline-start);padding-inline-end:var(--_field-padding-inline-end);z-index:999;--_field-floating-label-translation:var(--forge-field-floating-label-translation, 0 calc(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)) * -1))}:host([label-position=none]) .forge-field{grid-template-areas:\"main\" \"support-text\";grid-template-columns:1fr;grid-template-rows:auto auto}:host([label-position=none]) .label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}:host([label-position=inline-end][label-alignment=start]) .label,:host([label-position=inline-start][label-alignment=start]) .label{align-self:start}:host([label-position=inline-end]:where([label-alignment=center],[label-alignment=default],:not([label-alignment]))) .label,:host([label-position=inline-start]:where([label-alignment=center],[label-alignment=default],:not([label-alignment]))) .label{align-self:center}:host([label-position=inline-end][label-alignment=end]) .label,:host([label-position=inline-start][label-alignment=end]) .label{align-self:end}:host([label-position=inline-end][label-alignment=baseline]) .label,:host([label-position=inline-start][label-alignment=baseline]) .label{align-self:center;padding-block-start:calc(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))))}:host([label-position=block-start]:where([label-alignment=start],[label-alignment=default],:not([label-alignment]))) .label{justify-self:start}:host([label-position=block-start][label-alignment=center]) .label{justify-self:center}:host([label-position=block-start][label-alignment=end]) .label{justify-self:end}:host([label-position=block-start][label-alignment=baseline]:not([variant=plain])) .label{justify-self:start;padding-inline-start:var(--_field-padding-inline-start)}:host([label-position=block-start][label-alignment=baseline][variant=plain]) .label{justify-self:start;padding-inline-start:0px}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);translate:var(--_field-floating-label-translation)}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label .input{box-sizing:border-box}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label.floating-in .label{animation-name:float-in-label-animation;animation-duration:var(--_field-floating-animation-duration);animation-timing-function:var(--_field-floating-animation-timing)}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label.floating-in .input ::slotted(:is(input,[data-forge-field-input],[data-forge-multi-input-separator])){padding-block-start:calc(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)) * 2)!important}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label:not(.floating-in) .input ::slotted(:is(input,[data-forge-field-input],[data-forge-multi-input-separator])){padding-block-start:calc(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)) * 2)!important}:host(:where([label-position=inset],:not([label-position])):not([float-label])) .has-label.floating-out .label{animation-name:float-out-label-animation;animation-duration:var(--_field-floating-animation-duration);animation-timing-function:var(--_field-floating-animation-timing)}:host(:where([label-position=inset],:not([label-position]))[float-label][multiline]) .has-label ::slotted(textarea){padding-block-start:calc(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)) + (var(--_field-height) - var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))))/ 2)!important;padding-block-end:calc((var(--_field-height) - var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))))/ 2)!important}:host([support-text-inset=both]) .support-text{padding-inline-start:var(--_field-padding-inline-start);padding-inline-end:var(--_field-padding-inline-end)}:host([support-text-inset=start]) .support-text{padding-inline-start:var(--_field-padding-inline-start)}:host([support-text-inset=end]) .support-text{padding-inline-end:var(--_field-padding-inline-end)}:host([multiline]) .container{align-items:start;block-size:fit-content;min-inline-size:var(--_field-multiline-min-inline-size);max-inline-size:var(--_field-multiline-max-inline-size);min-block-size:var(--_field-multiline-min-block-size);max-block-size:var(--_field-multiline-max-block-size);resize:var(--_field-multiline-resize)}:host([multiline]) .container .end,:host([multiline]) .container .label,:host([multiline]) .container .popover-icon,:host([multiline]) .container .start{align-items:center;block-size:var(--_field-height)}:host([multiline]:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .label{pointer-events:none;inline-size:fit-content}:host([multiline]:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .label slot{display:block}:host([multiline]:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .label::after{animation-name:multiline-inset-label-background-animation;animation-duration:var(--_field-floating-animation-duration);animation-timing-function:var(--_field-floating-animation-timing);position:absolute;z-index:-1;inset-inline-start:var(--_field-outline-width);transition-duration:var(--_field-surface-animation-duration);transition-property:background;transition-timing-function:var(--_field-surface-animation-timing);background:var(--_field-multiline-inset-label-background);inline-size:100%;block-size:3ex;filter:blur(2px);content:\"\"}:host([multiline]:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .forge-field:not(.has-label) .label::after{display:none}.forge-field .input ::slotted(*){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;padding-block-start:0;padding-block-end:0;transition:padding-block var(--_field-floating-animation-duration) var(--_field-floating-animation-timing);cursor:var(--_field-disableable-cursor)}.forge-field .input ::slotted(*)::placeholder{color:var(--_field-placeholder-color)}.forge-field .input ::slotted(textarea){resize:none}.forge-field .input ::slotted(:is([data-forge-field-input],:first-of-type:is(input,textarea))){padding-inline-start:var(--_field-padding-inline-start)}.forge-field .input ::slotted(:is([data-forge-field-input],:last-of-type:is(input,textarea))){padding-inline-end:var(--_field-padding-inline-end)}.forge-field .input ::slotted([data-forge-multi-input-separator]){align-self:center;padding-inline:4px;block-size:fit-content;inline-size:fit-content}.forge-field .label ::slotted(forge-label){font:inherit}.forge-field.has-start .input ::slotted(:is([data-forge-field-input],:first-of-type:is(input,textarea))){padding-inline-start:var(--_field-inner-padding-inline)}.forge-field.has-end .input ::slotted(:is([data-forge-field-input],:last-of-type:is(input,textarea))){padding-inline-end:var(--_field-inner-padding-inline)}.forge-field.has-accessory .end{padding-inline-end:var(--_field-inner-padding-inline)}:host([variant=plain]) .forge-field.has-accessory .end{padding-inline-end:var(--_field-inner-padding-inline)}:host(:where([label-position=inset],:not([label-position]))) .forge-field.has-start .label{padding-inline-start:var(--_field-inner-padding-inline)}:host(:where([label-position=inset],:not([label-position]))) .label ::slotted(*){max-inline-size:100%;overflow:hidden;text-overflow:ellipsis}:host([popover-icon]) .forge-field .input ::slotted(:is([data-forge-field-input],:last-of-type:is(input,textarea))){padding-inline-end:var(--_field-inner-padding-inline)}:host([popover-icon]) .forge-field .end{padding-inline-end:var(--_field-inner-padding-inline)}:host(:not(popover-icon)) .forge-field.has-accessory:not(:is(.has-end)) .input ::slotted(:is([data-forge-field-input],:last-of-type:is(input,textarea))){padding-inline-end:var(--_field-inner-padding-inline)}:host([multiline]) .input ::slotted(:is(input,textarea)){padding-block-start:calc((var(--_field-height) - var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))))/ 2);padding-block-end:calc(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)) + (var(--_field-height) - var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))))/ 2)}:host([multiline]) .accessory slot{align-items:center;block-size:var(--_field-height);display:flex;align-self:start}forge-focus-indicator{--forge-focus-indicator-color:var(--_field-focus-indicator-color);--forge-focus-indicator-outward-offset:calc(var(--_field-outline-width) * -1);--forge-focus-indicator-shape:var(--_field-shape);--forge-focus-indicator-width:var(--_field-focus-indicator-width)}:host([variant=plain]) forge-focus-indicator{--forge-focus-indicator-offset-inline:-4px}@media (prefers-reduced-motion:reduce){.forge-field{--_field-floating-animation-duration:var(--forge-field-floating-animation-duration, 0s)}}';
14
+ 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 multiline-inset-label-background-animation{from{opacity:0%}to{opacity:100%}}@layer base,theme,variant,shape,density; @layer base{:host{display:block}:host([hidden]){display:none}.forge-field{--_field-background:var(--forge-field-background, transparent);--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-surface-container-low, #ebebeb));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-surface-container-minimum, #f5f5f5));--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-surface-bright, #ffffff));--_field-outline-style:var(--forge-field-outline-style, solid);--_field-outline-width:var(--forge-field-outline-width, var(--forge-border-thin, 1px));--_field-shape:var(--forge-field-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_field-height:var(--forge-field-height, 40px);--_field-inset-height:var(--forge-field-inset-height, 48px);--_field-padding-inline:var(--forge-field-padding-inline, 12px);--_field-padding-inline-start:var(--forge-field-padding-inline-start, var(--_field-padding-inline));--_field-padding-inline-end:var(--forge-field-padding-inline-end, var(--_field-padding-inline));--_field-inner-padding-inline:var(--forge-field-inner-padding-inline, 8px);--_field-rounded-container-padding-inline:var(--forge-field-rounded-container-padding-inline, calc(var(--_field-height) / 2));--_field-rounded-container-padding-inline-start:var(--forge-field-rounded-container-padding-inline-start, var(--_field-rounded-container-padding-inline));--_field-rounded-container-padding-inline-end:var(--forge-field-rounded-container-padding-inline-end, var(--_field-rounded-container-padding-inline));--_field-support-text-margin-block:var(--forge-field-support-text-margin-block, 4px);--_field-support-text-gap:var(--forge-field-support-text-gap, 8px);--_field-support-text-padding-inline:var(--forge-field-support-text-padding-inline, var(--_field-padding-inline));--_field-support-text-padding-inline-start:var(--forge-field-support-text-padding-inline-start, var(--_field-support-text-padding-inline));--_field-support-text-padding-inline-end:var(--forge-field-support-text-padding-inline-end, var(--_field-support-text-padding-inline));--_field-label-margin-inline:var(--forge-field-label-margin-inline, 8px);--_field-label-margin-block:var(--forge-field-label-margin-block, 4px);--_field-required-padding:var(--forge-field-required-padding, 0.35ch);--_field-required-content:var(--forge-field-required-content, \"*\");--_field-optional-padding:var(--forge-field-optional-padding, 0.5ch);--_field-optional-content:var(--forge-field-optional-content, \"(optional)\");--_field-multiline-resize:var(--forge-field-multiline-resize, block);--_field-multiline-min-inline-size:var(--forge-field-multiline-min-inline-size, initial);--_field-multiline-max-inline-size:var(--forge-field-multiline-max-inline-size, initial);--_field-multiline-min-block-size:var(--forge-field-multiline-min-block-size, var(--_field-height));--_field-multiline-max-block-size:var(--forge-field-multiline-max-block-size, initial);--_field-popover-icon-transition-duration:var(--forge-field-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));--_field-popover-icon-transition-timing:var(--forge-field-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_field-popover-icon-open-rotation:var(--forge-field-popover-icon-open-rotation, 180deg);--_field-surface-animation-duration:var(--forge-field-surface-animation-duration, var(--forge-animation-duration-short4, 200ms));--_field-surface-animation-timing:var(--forge-field-surface-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_field-floating-animation-duration:var(--forge-field-floating-animation-duration, var(--forge-animation-duration-short2, 100ms));--_field-floating-animation-timing:var(--forge-field-floating-animation-timing, var(--forge-animation-easing-linear, cubic-bezier(0, 0, 1, 1)));--_field-focus-indicator-width:var(--forge-field-focus-indicator-width, var(--forge-focus-indicator-width, var(--forge-border-medium, 2px)));--_field-disabled-opacity:var(--forge-field-disabled-opacity, 0.38);--_field-disabled-background:var(--forge-field-disabled-background, var(--forge-theme-surface-container-low, #ebebeb));--_field-font-size:var(--forge-field-font-size, inherit);--_field-dense-font-size:var(--forge-field-dense-font-size, 0.875rem);--_field-placeholder-color:var(--forge-field-placeholder-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}.forge-field{--_field-disableable-cursor:var(--forge-field-disableable-cursor, unset);--_field-disableable-opacity:var(--forge-field-disableable-opacity, 1);--_field-inner-border-block-size:var(--forge-field-inner-border-block-size, 100%);--_field-inner-border-color:var(--forge-field-inner-border-color, var(--_field-outline-color));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--_field-outline-color-hover));--_field-inner-border-display:var(--forge-field-inner-border-display, block);--_field-label-color:var(--forge-field-label-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_field-label-grid-area:var(--forge-field-label-grid-area, \"label\");--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-surface, #ffffff));--_field-multiline-inset-label-background-hover:var(--forge-field-multiline-inset-label-background-hover, var(--_field-multiline-inset-label-background));--_field-surface-display:var(--forge-field-surface-display, block);position:relative;display:grid}}@layer theme{:host(:where([theme=default],:not([theme]))) .forge-field{--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-outline-low, #9e9e9e));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-outline-high, #212121));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-filled-background));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--_field-tonal-background));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--_field-tonal-background-hover));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-outline-low, #9e9e9e));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-outline-high, #212121))}:host(:where([label-position=inset],:not([label-position])):where([theme=default],:not([theme]))) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}:host([theme=primary]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-primary-container-low, #e8eaf6));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-primary-container-minimum, #f7f8fc));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-primary-container, #222c62));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-primary, #3f51b5));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-primary-container, #222c62));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-primary-container-low, #222c62));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-primary-container-low, #e8eaf6));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-primary-container-minimum, #f7f8fc));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-primary, #3f51b5));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-primary-container, #222c62))}:host(:where([label-position=inset],:not([label-position]))[theme=primary]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-primary-container-low, #222c62))}:host([theme=secondary]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-secondary-container-minimum, #fffdf5));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-secondary, #ffc107));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-secondary-container-low, #fff8e1));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-secondary-container-minimum, #fffdf5));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-secondary-container, #8a6804));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-on-secondary-container, #8a6804));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-secondary-container, #8a6804));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-secondary-container-low, #8a6804));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-secondary-container-minimum, #fffdf5));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-secondary-container-low, #fff8e1));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-secondary-container-minimum, #fffdf5));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-on-secondary-container, #8a6804));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-secondary-container, #8a6804))}:host(:where([label-position=inset],:not([label-position]))[theme=secondary]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-secondary-container-low, #8a6804))}:host([theme=tertiary]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-tertiary, #3d5afe));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-tertiary-container, #213189));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-tertiary, #3d5afe));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-tertiary-container, #213189));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-tertiary-container-low, #213189));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-tertiary-container-low, #e8ebff));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-tertiary-container-minimum, #f7f8ff));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-tertiary, #3d5afe));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-tertiary-container, #213189))}:host(:where([label-position=inset],:not([label-position]))[theme=tertiary]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-tertiary-container-low, #213189))}:host([theme=success]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-success-container-minimum, #f7faf7));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-success, #2e7d32));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-success-container-low, #e6efe6));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-success-container-minimum, #f7faf7));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-success-container, #19441b));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-success, #2e7d32));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-success-container, #19441b));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-success-container-low, #19441b));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-success-container-minimum, #f7faf7));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-success-container-low, #e6efe6));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-success-container-minimum, #f7faf7));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-success, #2e7d32));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-success-container, #19441b))}:host(:where([label-position=inset],:not([label-position]))[theme=success]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-success-container-low, #19441b))}:host([theme=error]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-error, #b00020));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-error-container-low, #f6e0e4));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-error-container, #5f0011));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-error, #b00020));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-error-container, #5f0011));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-error-container-low, #5f0011));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-error-container-low, #f6e0e4));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-error, #b00020));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-error-container, #5f0011))}:host(:where([label-position=inset],:not([label-position]))[theme=error]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-error-container-low, #5f0011))}:host([theme=warning]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-warning, #d14900));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-warning-container-low, #f9e9e0));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-warning-container-minimum, #fdf8f5));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-warning-container, #712700));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-warning, #d14900));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-warning-container, #712700));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-warning-container-low, #712700));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-warning-container-minimum, #fdf8f5));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-warning-container-low, #f9e9e0));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-warning-container-minimum, #fdf8f5));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-warning, #d14900));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-warning-container, #712700))}:host(:where([label-position=inset],:not([label-position]))[theme=warning]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-warning-container-low, #712700))}:host([theme=info]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-info-container-minimum, #f6f9fc));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-info, #1565c0));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-info-container-low, #e3edf7));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-info-container-minimum, #f6f9fc));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-info-container, #0b3768));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-info, #1565c0));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-info-container, #0b3768));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-info-container-low, #0b3768));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-info-container-minimum, #f6f9fc));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-info-container-low, #e3edf7));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-info-container-minimum, #f6f9fc));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-info, #1565c0));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-info-container, #0b3768))}:host(:where([label-position=inset],:not([label-position]))[theme=info]) .forge-field{--_field-label-color:var(--forge-field-label-color, var(--forge-theme-on-info-container-low, #0b3768))}}@layer variant{:host([variant=plain]) .forge-field{--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-surface, #ffffff));--_field-multiline-inset-label-background-hover:var(--forge-field-multiline-inset-label-background-hover, var(--forge-theme-surface, #ffffff));--_field-outline-color:var(--forge-field-outline-color, transparent);--_field-outline-color-hover:var(--forge-field-outline-color-hover, transparent);--_field-inner-border-display:var(--forge-field-inner-border-display, none);--_field-padding-inline:var(--forge-field-padding-inline, 0);--_field-surface-display:var(--forge-field-surface-display, none)}:host(:where([variant=outlined],:not([variant]))) .forge-field{--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-surface, #ffffff));--_field-multiline-inset-label-background-hover:var(--forge-field-multiline-inset-label-background-hover, var(--forge-theme-surface, #ffffff))}:host([variant=tonal]) .forge-field{--_field-outline-color:var(--forge-field-outline-color, transparent);--_field-outline-color-hover:var(--forge-field-outline-color-hover, transparent);--_field-inner-border-block-size:var(--forge-field-inner-border-block-size, calc(100% - 8px));--_field-background:var(--_field-tonal-background);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-background));--_field-hover-background:var(--forge-field-hover-background, tonal-background-hover);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-multiline-inset-label-tonal-background))}:host([variant=filled]) .forge-field{--_field-background:var(--_field-filled-background);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-background))}:host([variant=raised]) .forge-field{--_field-elevation:var(--forge-field-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_field-elevation-active:var(--forge-field-elevation-active, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));--_field-outline-color:var(--forge-field-outline-color, transparent);--_field-outline-color-hover:var(--forge-field-outline-color-hover, transparent);--_field-inner-border-block-size:var(--forge-field-inner-border-block-size, calc(100% - 8px));--_field-background:var(--_field-filled-background);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-background))}}@layer shape{:host([shape=squared]) .forge-field{--_field-shape:var(--forge-field-shape, 0)}:host([shape=rounded]) .forge-field{--_field-shape:var(--forge-field-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_field-padding-inline:var(--forge-field-padding-inline, var(--_field-rounded-container-padding-inline-start))}}@layer density{:host(:where([label-position=inset],:not([label-position])):not([dense]):where([density=default],:not([density]))) .forge-field{--_field-height:var(--forge-field-height, var(--_field-inset-height))}:host(:where([density=extra-small],[dense])) .forge-field{--_field-height:var(--forge-field-height, 24px);--_field-padding-inline-start:var(--forge-field-padding-inline-start, 8px);--_field-padding-inline-end:var(--forge-field-padding-inline-end, 4px)}:host(:where([label-position=inset],:not([label-position])):where([density=extra-small],[dense])) .forge-field{--_field-height:var(--forge-field-height, 24px)}:host(:where([label-position=inset],:not([label-position])):where([density=extra-small],[dense])) .label,:host(:where([label-position=inset],:not([label-position])):where([density=extra-small],[dense])) .label::before{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:fixed;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}:host(:where([label-position=inset],:not([label-position])):where([density=extra-small],[dense])) ::slotted(:where(input,textarea,[data-forge-field-input])){--_field-font-size:var(--_field-dense-font-size)}:host(:not([dense])[density=small]) .forge-field{--_field-height:var(--forge-field-height, 32px)}:host(:where([label-position=inset],:not([label-position])):not([dense])[density=small]) .forge-field{--_field-height:var(--forge-field-height, 40px)}:host(:not([dense])[density=medium]) .forge-field{--_field-height:var(--forge-field-height, 40px)}:host(:where([label-position=inset],:not([label-position])):not([dense])[density=medium]) .forge-field{--_field-height:var(--forge-field-height, 48px)}:host(:not([dense])[density=large]) .forge-field{--_field-height:var(--forge-field-height, 48px)}:host(:where([label-position=inset],:not([label-position])):not([dense])[density=large]) .forge-field{--_field-height:var(--forge-field-height, 56px)}:host(:not([dense])[density=extra-large]) .forge-field{--_field-height:var(--forge-field-height, 56px)}:host(:where([label-position=inset],:not([label-position])):not([dense])[density=extra-large]) .forge-field{--_field-height:var(--forge-field-height, 64px)}}:host(:not([disabled]):hover) .forge-field{--_field-outline-color:var(--forge-field-outline-color, var(--_field-outline-color-hover));--_field-elevation:var(--forge-field-elevation, var(--_field-elevation-active));--_field-tonal-background:var(--_field-tonal-background-hover);--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--_field-multiline-inset-label-tonal-background-hover));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--_field-inner-border-color-hover))}:host([disabled]) .forge-field{--_field-background:var(--_field-disabled-background);--_field-disableable-cursor:var(--forge-field-disableable-cursor, not-allowed);--_field-disableable-opacity:var(--forge-field-disableable-opacity, var(--_field-disabled-opacity))}:host(:not([disabled])[invalid]) .forge-field{--_field-filled-background:var(--forge-field-filled-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-focus-indicator-color:var(--forge-field-focus-indicator-color, var(--forge-theme-error, #b00020));--_field-tonal-background:var(--forge-field-tonal-background, var(--forge-theme-error-container-low, #f6e0e4));--_field-tonal-background-hover:var(--forge-field-tonal-background-hover, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-content-color:var(--forge-field-content-color, var(--forge-theme-on-error-container, #5f0011));--_field-inner-border-color:var(--forge-field-inner-border-color, var(--forge-theme-error, #b00020));--_field-inner-border-color-hover:var(--forge-field-inner-border-color-hover, var(--forge-theme-on-error-container, #5f0011));--_field-inset-label-color:var(--forge-field-inset-label-color, var(--forge-theme-on-error-container-low, #5f0011));--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-multiline-inset-label-tonal-background:var(--forge-field-multiline-inset-label-tonal-background, var(--forge-theme-error-container-low, #f6e0e4));--_field-multiline-inset-label-tonal-background-hover:var(--forge-field-multiline-inset-label-tonal-background-hover, var(--forge-theme-error-container-minimum, #fcf5f6));--_field-outline-color:var(--forge-field-outline-color, var(--forge-theme-error, #b00020));--_field-outline-color-hover:var(--forge-field-outline-color-hover, var(--forge-theme-on-error-container, #5f0011));--_field-label-color:var(--forge-field-label-color, var(--forge-theme-error, #b00020))}:host(:not([disabled])[invalid]) .forge-field .support-text{color:var(--forge-theme-error,#b00020)}:host(:not([disabled])) .forge-field:has(.input:focus-within){--_field-elevation:var(--forge-field-elevation, var(--_field-elevation-active))}.forge-field .outline{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);transition-duration:var(--_field-surface-animation-duration);transition-property:outline-color;transition-timing-function:var(--_field-surface-animation-timing);position:relative;grid-area:main;inline-size:100%;block-size:100%;box-shadow:var(--_field-elevation);border-radius:var(--_field-shape);outline-style:var(--_field-outline-style);outline-width:var(--_field-outline-width);outline-color:var(--_field-outline-color);outline-offset:calc(var(--_field-outline-width) * -1);pointer-events:none}.forge-field .container{-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);position:relative;display:grid;isolation:isolate;grid-area:main;grid-template-areas:\"start center end popover-icon accessory\";grid-template-columns:auto 1fr auto auto auto;align-items:center;border-radius:var(--_field-shape);inline-size:100%;block-size:var(--_field-height);overflow:hidden}.forge-field .surface{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);transition-duration:var(--_field-surface-animation-duration);transition-property:background;transition-timing-function:var(--_field-surface-animation-timing);display:var(--_field-surface-display);grid-column:1/-1;grid-row:1/-1;border-radius:var(--_field-shape);inline-size:100%;block-size:100%;background:var(--_field-background);pointer-events:none}.forge-field .input{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);display:flex;grid-area:center;block-size:100%;inline-size:100%;min-inline-size:0;color:var(--forge-theme-text-high,rgba(0,0,0,.87))}.forge-field .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);position:relative;display:inline-flex;grid-area:var(--_field-label-grid-area);pointer-events:var(--_field-label-pointer-events);margin-block-end:var(--_field-label-margin-block-end);margin-inline-start:var(--_field-label-margin-inline-start);margin-inline-end:var(--_field-label-margin-inline-end);block-size:fit-content;overflow:hidden;color:var(--_field-label-color);line-height:normal;white-space:var(--_field-label-white-space)}.forge-field .popover-target{position:absolute;inset:calc(var(--_field-focus-indicator-width) * -1);pointer-events:none}.forge-field .popover-icon{display:none}.forge-field .popover-icon__arrow{fill:inherit}.forge-field .accessory,.forge-field .end,.forge-field .start,.forge-field .support-text,.forge-field .support-text-end,.forge-field .support-text-start{display:none}:host([required]) .label::before{margin-inline-end:var(--_field-required-padding);color:var(--forge-theme-error,#b00020);content:var(--_field-required-content)}:host([optional]) .label::after{margin-inline-start:var(--_field-optional-padding);color:inherit;content:var(--_field-optional-content)}:host([popover-icon]) .popover-icon{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);padding-inline-end:var(--_field-inner-padding-inline);display:flex;align-items:center;grid-area:popover-icon;isolation:isolate;block-size:100%}:host([popover-icon]) .popover-icon>*{transition:rotate var(--_field-popover-icon-transition-duration) var(--_field-popover-icon-transition-timing);fill:var(--_field-content-color)}:host([popover-icon][popover-expanded]) .popover-icon>*{rotate:var(--_field-popover-icon-open-rotation)}.forge-field.has-start .start{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);padding-inline-start:var(--_field-padding-inline-start);display:flex;grid-area:start;align-items:center;block-size:100%;max-block-size:100%;min-block-size:0;color:var(--_field-content-color)}.forge-field.has-end .end{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);padding-inline-end:var(--_field-padding-inline-end);display:flex;grid-area:end;align-items:center;block-size:100%;max-block-size:100%;min-block-size:0;color:var(--_field-content-color)}.forge-field.has-accessory .accessory{padding-inline-end:var(--_field-inner-padding-inline);position:relative;display:flex;grid-area:accessory;align-items:center;block-size:100%;max-block-size:100%;min-block-size:0;color:var(--_field-content-color)}.forge-field.has-accessory .accessory::before{opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor);transition-duration:var(--_field-surface-animation-duration);transition-property:border-color;transition-timing-function:var(--_field-surface-animation-timing);padding-inline-end:var(--_field-inner-padding-inline);display:var(--_field-inner-border-display);border-inline-start-style:solid;border-inline-start-width:var(--_field-outline-width);border-inline-start-color:var(--_field-inner-border-color);block-size:var(--_field-inner-border-block-size);content:\"\"}.forge-field.has-accessory .forge-field:not(.has-accessory) .popover-icon{padding-inline-end:var(--_field-padding-inline-end)}.forge-field.has-support-text-end .support-text,.forge-field.has-support-text-start .support-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit);justify-content:space-between;display:grid;grid-template-areas:\"start end\";grid-template-columns:1fr auto;grid-area:support-text;margin-block-start:var(--_field-support-text-margin-block);line-height:normal}.forge-field.has-support-text-start.has-support-text-end .support-text{gap:var(--_field-support-text-gap)}.forge-field.has-support-text-start .support-text-start{display:inline-block;grid-area:start}.forge-field.has-support-text-end .support-text-end{display:inline-block;grid-area:end}:host(:not([popover-icon])) .forge-field:not(.has-accessory) .end{padding-inline-end:var(--_field-padding-inline-end)}:host([label-position=block-start]) .forge-field{grid-template-areas:\"label\" \"main\" \"support-text\";grid-template-columns:1fr;grid-template-rows:auto auto auto}:host([label-position=block-start]) .label{--_field-label-margin-block-end:var(--forge-field-label-margin-block-end, var(--_field-label-margin-block))}:host([label-position=inline-start]) .forge-field{grid-template-areas:\"label main\" \". support-text\";grid-template-columns:auto 1fr;grid-template-rows:auto auto}:host([label-position=inline-start]) .label{--_field-label-margin-inline-end:var(--forge-field-label-margin-inline-end, var(--_field-label-margin-inline))}:host([label-position=inline-end]) .forge-field{grid-template-areas:\"main label\" \"support-text .\";grid-template-columns:1fr auto;grid-template-rows:auto auto}:host([label-position=inline-end]) .label{--_field-label-margin-inline-start:var(--forge-field-label-margin-inline-start, var(--_field-label-margin-inline))}:host(:where([label-position=inset],:not([label-position]))) .forge-field{grid-template-areas:\"main\" \"support-text\";grid-template-columns:1fr;grid-template-rows:auto auto;--_field-label-grid-area:var(--forge-field-label-grid-area, center);--_field-label-pointer-events:var(--forge-field-label-pointer-events, none);--_field-label-white-space:var(--forge-field-label-white-space, nowrap)}:host(:where([label-position=inset],:not([label-position]))) .label{-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);padding-inline-start:var(--_field-padding-inline-start);padding-inline-end:var(--_field-padding-inline-end);z-index:999;--_field-floating-label-translation:var(--forge-field-floating-label-translation, 0 calc(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)) * -1))}:host([label-position=none]) .forge-field{grid-template-areas:\"main\" \"support-text\";grid-template-columns:1fr;grid-template-rows:auto auto}:host([label-position=none]) .label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:fixed;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}:host([label-position=inline-end][label-alignment=start]) .label,:host([label-position=inline-start][label-alignment=start]) .label{align-self:start}:host([label-position=inline-end]:where([label-alignment=center],[label-alignment=default],:not([label-alignment]))) .label,:host([label-position=inline-start]:where([label-alignment=center],[label-alignment=default],:not([label-alignment]))) .label{align-self:center}:host([label-position=inline-end][label-alignment=end]) .label,:host([label-position=inline-start][label-alignment=end]) .label{align-self:end}:host([label-position=inline-end][label-alignment=baseline]) .label,:host([label-position=inline-start][label-alignment=baseline]) .label{align-self:center;padding-block-start:calc(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))))}:host([label-position=block-start]:where([label-alignment=start],[label-alignment=default],:not([label-alignment]))) .label{justify-self:start}:host([label-position=block-start][label-alignment=center]) .label{justify-self:center}:host([label-position=block-start][label-alignment=end]) .label{justify-self:end}:host([label-position=block-start][label-alignment=baseline]:not([variant=plain])) .label{justify-self:start;padding-inline-start:var(--_field-padding-inline-start)}:host([label-position=block-start][label-alignment=baseline][variant=plain]) .label{justify-self:start;padding-inline-start:0px}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);translate:var(--_field-floating-label-translation)}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label .input{box-sizing:border-box}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label.floating-in .label{animation-name:float-in-label-animation;animation-duration:var(--_field-floating-animation-duration);animation-timing-function:var(--_field-floating-animation-timing)}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label.floating-in .input ::slotted(:is(input,[data-forge-field-input],[data-forge-multi-input-separator])){padding-block-start:calc(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)) * 2)!important}:host(:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .has-label:not(.floating-in) .input ::slotted(:is(input,[data-forge-field-input],[data-forge-multi-input-separator])){padding-block-start:calc(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)) * 2)!important}:host(:where([label-position=inset],:not([label-position])):not([float-label])) .has-label.floating-out .label{animation-name:float-out-label-animation;animation-duration:var(--_field-floating-animation-duration);animation-timing-function:var(--_field-floating-animation-timing)}:host(:where([label-position=inset],:not([label-position]))[float-label][multiline]) .has-label ::slotted(textarea){padding-block-start:calc(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)) + (var(--_field-height) - var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))))/ 2)!important;padding-block-end:calc((var(--_field-height) - var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))))/ 2)!important}:host([support-text-inset=both]) .support-text{padding-inline-start:var(--_field-padding-inline-start);padding-inline-end:var(--_field-padding-inline-end)}:host([support-text-inset=start]) .support-text{padding-inline-start:var(--_field-padding-inline-start)}:host([support-text-inset=end]) .support-text{padding-inline-end:var(--_field-padding-inline-end)}:host([multiline]) .container{align-items:start;block-size:fit-content;min-inline-size:var(--_field-multiline-min-inline-size);max-inline-size:var(--_field-multiline-max-inline-size);min-block-size:var(--_field-multiline-min-block-size);max-block-size:var(--_field-multiline-max-block-size);resize:var(--_field-multiline-resize)}:host([multiline]) .container .end,:host([multiline]) .container .label,:host([multiline]) .container .popover-icon,:host([multiline]) .container .start{align-items:center;block-size:var(--_field-height)}:host([multiline]:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .label{pointer-events:none;inline-size:fit-content}:host([multiline]:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .label slot{display:block}:host([multiline]:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .label::after{animation-name:multiline-inset-label-background-animation;animation-duration:var(--_field-floating-animation-duration);animation-timing-function:var(--_field-floating-animation-timing);position:absolute;z-index:-1;inset-inline-start:var(--_field-outline-width);transition-duration:var(--_field-surface-animation-duration);transition-property:background;transition-timing-function:var(--_field-surface-animation-timing);background:var(--_field-multiline-inset-label-background);inline-size:100%;block-size:3ex;filter:blur(2px);content:\"\"}:host([multiline]:where([label-position=inset],:not([label-position]))[float-label]:not(:where([density=extra-small],[dense]))) .forge-field:not(.has-label) .label::after{display:none}.forge-field .input ::slotted(*){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;padding-block-start:0;padding-block-end:0;transition:padding-block var(--_field-floating-animation-duration) var(--_field-floating-animation-timing);cursor:var(--_field-disableable-cursor)}.forge-field .input ::slotted(*)::placeholder{color:var(--_field-placeholder-color)}.forge-field .input ::slotted(textarea){resize:none}.forge-field .input ::slotted(:is([data-forge-field-input],:first-of-type:is(input,textarea))){padding-inline-start:var(--_field-padding-inline-start)}.forge-field .input ::slotted(:is([data-forge-field-input],:last-of-type:is(input,textarea))){padding-inline-end:var(--_field-padding-inline-end)}.forge-field .input ::slotted([data-forge-multi-input-separator]){align-self:center;padding-inline:4px;block-size:fit-content;inline-size:fit-content}.forge-field .label ::slotted(forge-label){font:inherit}.forge-field.has-start .input ::slotted(:is([data-forge-field-input],:first-of-type:is(input,textarea))){padding-inline-start:var(--_field-inner-padding-inline)}.forge-field.has-end .input ::slotted(:is([data-forge-field-input],:last-of-type:is(input,textarea))){padding-inline-end:var(--_field-inner-padding-inline)}.forge-field.has-accessory .end{padding-inline-end:var(--_field-inner-padding-inline)}:host([variant=plain]) .forge-field.has-accessory .end{padding-inline-end:var(--_field-inner-padding-inline)}:host(:where([label-position=inset],:not([label-position]))) .forge-field.has-start .label{padding-inline-start:var(--_field-inner-padding-inline)}:host(:where([label-position=inset],:not([label-position]))) .label ::slotted(*){max-inline-size:100%;overflow:hidden;text-overflow:ellipsis}:host([popover-icon]) .forge-field .input ::slotted(:is([data-forge-field-input],:last-of-type:is(input,textarea))){padding-inline-end:var(--_field-inner-padding-inline)}:host([popover-icon]) .forge-field .end{padding-inline-end:var(--_field-inner-padding-inline)}:host(:not(popover-icon)) .forge-field.has-accessory:not(:is(.has-end)) .input ::slotted(:is([data-forge-field-input],:last-of-type:is(input,textarea))){padding-inline-end:var(--_field-inner-padding-inline)}:host([multiline]) .input ::slotted(:is(input,textarea)){padding-block-start:calc((var(--_field-height) - var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))))/ 2);padding-block-end:calc(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)) + (var(--_field-height) - var(--forge-typography-body2-line-height,calc(var(--forge-typography-font-size,1rem) * var(--forge-typography-body-line-height-scale,1.375))))/ 2)}:host([multiline]) .accessory slot{align-items:center;block-size:var(--_field-height);display:flex;align-self:start}forge-focus-indicator{--forge-focus-indicator-color:var(--_field-focus-indicator-color);--forge-focus-indicator-outward-offset:calc(var(--_field-outline-width) * -1);--forge-focus-indicator-shape:var(--_field-shape);--forge-focus-indicator-width:var(--_field-focus-indicator-width)}:host([variant=plain]) forge-focus-indicator{--forge-focus-indicator-offset-inline:-4px}@media (prefers-reduced-motion:reduce){.forge-field{--_field-floating-animation-duration:var(--forge-field-floating-animation-duration, 0s)}}';
15
15
  /**
16
16
  * @tag forge-field
17
17
  *
package/esm/icon-button/icon-button.d.ts CHANGED
@@ -96,6 +96,7 @@ declare global {
96
96
  * @cssproperty --forge-icon-button-density-medium-size - The size of the button when in the medium density.
97
97
  * @cssproperty --forge-icon-button-density-medium-padding - The padding of the button when in the medium density.
98
98
  * @cssproperty --forge-icon-button-density-large-size - The size of the button when in the large density.
99
+ * @cssproperty --forge-icon-button-toggle-on-background-color - The background color of the when in toggle mode and toggled on.
99
100
  * @cssproperty --forge-icon-button-toggle-on-icon-color - The color of the icon when in toggle mode and toggled on.
100
101
  * @cssproperty --forge-icon-button-outlined-toggle-on-background-color - The background color when in the outlined variant and toggled on.
101
102
  * @cssproperty --forge-icon-button-outlined-toggle-on-icon-color - The icon color when in the outlined variant and toggled on.
package/esm/icon-button/icon-button.js CHANGED
@@ -14,7 +14,7 @@ import { ICON_BUTTON_CONSTANTS } from './icon-button-constants';
14
14
  import { IconButtonCore } from './icon-button-core';
15
15
  import { IconButtonAdapter } from './icon-button-adapter';
16
16
  const template = '<template><div class=\"forge-icon-button\" part=\"root\"><slot name=\"start\"></slot><slot></slot><slot name=\"on\"></slot><slot name=\"end\"></slot><slot name=\"badge\"></slot><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div></template>';
17
- const styles = ':host{--_icon-button-display:var(--forge-icon-button-display, inline-flex);--_icon-button-disabled-cursor:var(--forge-icon-button-disabled-cursor, not-allowed)}:host{display:var(--_icon-button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-icon-button{--_icon-button-size:var(--forge-icon-button-size, 48px);--_icon-button-gap:var(--forge-icon-button-gap, 0);--_icon-button-icon-color:var(--forge-icon-button-icon-color, currentColor);--_icon-button-background-color:var(--forge-icon-button-background-color, none);--_icon-button-icon-size:var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));--_icon-button-cursor:var(--forge-icon-button-cursor, pointer);--_icon-button-padding:var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-border:var(--forge-icon-button-border, none);--_icon-button-shadow:var(--forge-icon-button-shadow, none);--_icon-button-transition-duration:var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_icon-button-transition-timing:var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_icon-button-shape:var(--forge-icon-button-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_icon-button-shape-start-start:var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));--_icon-button-shape-start-end:var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));--_icon-button-shape-end-start:var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));--_icon-button-shape-end-end:var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));--_icon-button-shape-squared:var(--forge-icon-button-shape-squared, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_icon-button-outlined-border-width:var(--forge-icon-button-outlined-border-width, 1px);--_icon-button-outlined-border-style:var(--forge-icon-button-outlined-border-style, solid);--_icon-button-outlined-border-color:var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));--_icon-button-tonal-icon-color:var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #222c62));--_icon-button-tonal-background-color:var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-filled-icon-color:var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-filled-background-color:var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-raised-shadow:var(--forge-icon-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-hover-shadow:var(--forge-icon-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-active-shadow:var(--forge-icon-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_icon-button-raised-disabled-shadow:var(--forge-icon-button-raised-disabled-shadow, none);--_icon-button-density-small-size:var(--forge-icon-button-density-small-size, 24px);--_icon-button-density-small-padding:var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));--_icon-button-density-small-icon-size:var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_icon-button-density-medium-size:var(--forge-icon-button-density-medium-size, 36px);--_icon-button-density-medium-padding:var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-density-large-size:var(--forge-icon-button-density-large-size, var(--_icon-button-size));--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-tonal-toggle-background-color:var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-background-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-filled-toggle-icon-color:var(--forge-icon-button-filled-toggle-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-disabled-opacity:var(--forge-icon-button-disabled-opacity, 0.38);--_icon-button-popover-icon-padding:var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}.forge-icon-button{position:relative;z-index:0;display:var(--_icon-button-display);align-items:center;justify-content:center;gap:var(--_icon-button-gap);box-sizing:border-box;height:var(--_icon-button-density-large-size);min-width:var(--_icon-button-density-large-size);border:var(--_icon-button-border);border-start-start-radius:var(--_icon-button-shape-start-start);border-start-end-radius:var(--_icon-button-shape-start-end);border-end-start-radius:var(--_icon-button-shape-end-start);border-end-end-radius:var(--_icon-button-shape-end-end);padding:var(--_icon-button-padding);box-shadow:var(--_icon-button-shadow);color:var(--_icon-button-icon-color);background:var(--_icon-button-background-color);font-size:var(--_icon-button-icon-size);cursor:var(--_icon-button-cursor);user-select:none;transition-property:box-shadow,background;transition-duration:var(--_icon-button-transition-duration);transition-timing-function:var(--_icon-button-transition-timing)}.forge-icon-button ::slotted(:is([slot=start],[slot=end])){font-size:var(--_icon-button-icon-size);height:var(--_icon-button-icon-size);width:var(--_icon-button-icon-size);font-weight:inherit}::slotted(a){height:100%;width:100%;outline:0;border-radius:var(--_icon-button-shape);padding-inline:var(--_icon-button-padding);display:flex;align-items:center;justify-content:center;gap:var(--_icon-button-gap);color:var(--_icon-button-icon-color);text-decoration:none}forge-focus-indicator{--forge-focus-indicator-color:var(--_icon-button-focus-indicator-color);--forge-focus-indicator-shape-start-start:var(--_icon-button-shape-start-start);--forge-focus-indicator-shape-start-end:var(--_icon-button-shape-start-end);--forge-focus-indicator-shape-end-start:var(--_icon-button-shape-end-start);--forge-focus-indicator-shape-end-end:var(--_icon-button-shape-end-end)}:host(:is([variant=icon],:not([variant]))){--forge-focus-indicator-outward-offset:0px}forge-state-layer{--forge-state-layer-color:var(--_icon-button-icon-color)}:host([popover-icon]) .forge-icon-button{--_icon-button-padding:var(--_icon-button-popover-icon-padding)}:host([variant=outlined]) .forge-icon-button{border-width:var(--_icon-button-outlined-border-width);border-style:var(--_icon-button-outlined-border-style);border-color:var(--_icon-button-outlined-border-color)}:host([variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-background-color)}:host(:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-icon-color);--_icon-button-background-color:var(--_icon-button-filled-background-color)}:host([variant=raised]) .forge-icon-button{--_icon-button-shadow:var(--_icon-button-raised-shadow)}:host([variant=raised]) .forge-icon-button:hover{--_icon-button-raised-shadow:var(--_icon-button-raised-hover-shadow)}:host([variant=raised]) .forge-icon-button:active{--_icon-button-raised-shadow:var(--_icon-button-raised-active-shadow)}:host(:is(:not([toggle]),[toggle]:not([on]))) slot[name=on]{display:none}:host([toggle][on]) slot:not([name]){display:none}:host([toggle][on]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-toggle-on-icon-color)}:host([toggle][on][variant=outlined]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-outlined-toggle-on-background-color);--_icon-button-icon-color:var(--_icon-button-outlined-toggle-on-icon-color)}:host([toggle]:not([on])[variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-tonal-toggle-background-color)}:host([toggle][on][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-toggle-on-background-color)}:host([toggle]:not([on]):is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-background-color)}:host([toggle][on]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-on-background-color)}::slotted([slot=badge]){position:absolute;top:0;left:60%;z-index:1;pointer-events:none}::slotted(forge-badge[slot=badge][dot]){top:8px}:host(:is([dense],[density=small],[density=medium])) ::slotted(forge-badge[slot=badge]:not([dot])){top:-25%}:host(:is([dense],[density=small],[density=medium])) ::slotted(forge-badge[slot=badge][dot]){top:0}::slotted(forge-circular-progress){--forge-circular-progress-indicator-color:var(--_icon-button-icon-color);--forge-circular-progress-track-color:transparent;--forge-circular-progress-size:1em}:host(:is([dense],[density=small])) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-small-size);--_icon-button-icon-size:var(--_icon-button-density-small-icon-size);--_icon-button-padding:var(--_icon-button-density-small-padding)}:host(:is([dense],[density=small])) ::slotted(*){font-size:var(--_icon-button-density-small-icon-size)}:host([density=medium]) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-medium-size);--_icon-button-padding:var(--_icon-button-density-medium-padding)}:host([shape=squared]) .forge-icon-button{--_icon-button-shape:var(--_icon-button-shape-squared)}:host([disabled]){cursor:var(--_icon-button-disabled-cursor)}:host([disabled]) .forge-icon-button{pointer-events:none;opacity:var(--_icon-button-disabled-opacity)}:host([disabled][variant=raised]) .forge-icon-button{--_icon-button-raised-shadow:var(--_icon-button-raised-disabled-shadow)}:host(:not([toggle])[theme=primary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([theme=primary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}:host(:not([toggle])[theme=secondary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-secondary-container, #fff0c3));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary-container, #8a6804));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle]:not([on])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle][theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-secondary-container, #fff0c3));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-secondary-container, #8a6804))}:host(:not([toggle])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary, #000000));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary, #ffc107))}:host([toggle]:not([on])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle][theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-secondary, #ffc107));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=tertiary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-tertiary-container, #d0d7ff));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary-container, #213189));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle]:not([on])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle][theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-tertiary-container, #d0d7ff));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-tertiary-container, #213189))}:host(:not([toggle])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle]:not([on])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle][theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=success]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-success-container, #cde0ce));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success-container, #19441b));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle]:not([on])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle][theme=success][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-success-container, #cde0ce));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-success-container, #19441b))}:host(:not([toggle])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success, #2e7d32))}:host([toggle]:not([on])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle][theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-success, #2e7d32));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=error]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-error-container, #ecc2c9));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error-container, #5f0011));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle]:not([on])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle][theme=error][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-error-container, #ecc2c9));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-error-container, #5f0011))}:host(:not([toggle])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error, #b00020))}:host([toggle]:not([on])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle][theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-error, #b00020));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=warning]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-warning-container, #f4d3c2));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning-container, #712700));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle]:not([on])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle][theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-warning-container, #f4d3c2));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-warning-container, #712700))}:host(:not([toggle])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning, #d14900))}:host([toggle]:not([on])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle][theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-warning, #d14900));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=info]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-info-container, #c7daf0));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host(:not([toggle])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info-container, #0b3768));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle]:not([on])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle][theme=info][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-info-container, #c7daf0));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-info-container, #0b3768))}:host(:not([toggle])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info, #1565c0))}:host([toggle]:not([on])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle][theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-info, #1565c0));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-info, #1565c0))}';
17
+ const styles = ':host{--_icon-button-display:var(--forge-icon-button-display, inline-flex);--_icon-button-disabled-cursor:var(--forge-icon-button-disabled-cursor, not-allowed)}:host{display:var(--_icon-button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-icon-button{--_icon-button-size:var(--forge-icon-button-size, 48px);--_icon-button-gap:var(--forge-icon-button-gap, 0);--_icon-button-icon-color:var(--forge-icon-button-icon-color, currentColor);--_icon-button-background-color:var(--forge-icon-button-background-color, none);--_icon-button-icon-size:var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));--_icon-button-cursor:var(--forge-icon-button-cursor, pointer);--_icon-button-padding:var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-border:var(--forge-icon-button-border, none);--_icon-button-shadow:var(--forge-icon-button-shadow, none);--_icon-button-transition-duration:var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_icon-button-transition-timing:var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_icon-button-shape:var(--forge-icon-button-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_icon-button-shape-start-start:var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));--_icon-button-shape-start-end:var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));--_icon-button-shape-end-start:var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));--_icon-button-shape-end-end:var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));--_icon-button-shape-squared:var(--forge-icon-button-shape-squared, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_icon-button-outlined-border-width:var(--forge-icon-button-outlined-border-width, 1px);--_icon-button-outlined-border-style:var(--forge-icon-button-outlined-border-style, solid);--_icon-button-outlined-border-color:var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));--_icon-button-tonal-icon-color:var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #222c62));--_icon-button-tonal-background-color:var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-filled-icon-color:var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-filled-background-color:var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-raised-shadow:var(--forge-icon-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-hover-shadow:var(--forge-icon-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-active-shadow:var(--forge-icon-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_icon-button-raised-disabled-shadow:var(--forge-icon-button-raised-disabled-shadow, none);--_icon-button-density-small-size:var(--forge-icon-button-density-small-size, 24px);--_icon-button-density-small-padding:var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));--_icon-button-density-small-icon-size:var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_icon-button-density-medium-size:var(--forge-icon-button-density-medium-size, 36px);--_icon-button-density-medium-padding:var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-density-large-size:var(--forge-icon-button-density-large-size, var(--_icon-button-size));--_icon-button-toggle-on-background-color:var(--forge-icon-button-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-tonal-toggle-background-color:var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-background-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-filled-toggle-icon-color:var(--forge-icon-button-filled-toggle-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-disabled-opacity:var(--forge-icon-button-disabled-opacity, 0.38);--_icon-button-popover-icon-padding:var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}.forge-icon-button{position:relative;z-index:0;display:var(--_icon-button-display);align-items:center;justify-content:center;gap:var(--_icon-button-gap);box-sizing:border-box;height:var(--_icon-button-density-large-size);min-width:var(--_icon-button-density-large-size);border:var(--_icon-button-border);border-start-start-radius:var(--_icon-button-shape-start-start);border-start-end-radius:var(--_icon-button-shape-start-end);border-end-start-radius:var(--_icon-button-shape-end-start);border-end-end-radius:var(--_icon-button-shape-end-end);padding:var(--_icon-button-padding);box-shadow:var(--_icon-button-shadow);color:var(--_icon-button-icon-color);background:var(--_icon-button-background-color);font-size:var(--_icon-button-icon-size);cursor:var(--_icon-button-cursor);user-select:none;transition-property:box-shadow,background;transition-duration:var(--_icon-button-transition-duration);transition-timing-function:var(--_icon-button-transition-timing)}.forge-icon-button ::slotted(:is([slot=start],[slot=end])){font-size:var(--_icon-button-icon-size);height:var(--_icon-button-icon-size);width:var(--_icon-button-icon-size);font-weight:inherit}::slotted(a){height:100%;width:100%;outline:0;border-radius:var(--_icon-button-shape);padding-inline:var(--_icon-button-padding);display:flex;align-items:center;justify-content:center;gap:var(--_icon-button-gap);color:var(--_icon-button-icon-color);text-decoration:none}forge-focus-indicator{--forge-focus-indicator-color:var(--_icon-button-focus-indicator-color);--forge-focus-indicator-shape-start-start:var(--_icon-button-shape-start-start);--forge-focus-indicator-shape-start-end:var(--_icon-button-shape-start-end);--forge-focus-indicator-shape-end-start:var(--_icon-button-shape-end-start);--forge-focus-indicator-shape-end-end:var(--_icon-button-shape-end-end)}:host(:is([variant=icon],:not([variant]))){--forge-focus-indicator-outward-offset:0px}forge-state-layer{--forge-state-layer-color:var(--_icon-button-icon-color)}:host([popover-icon]) .forge-icon-button{--_icon-button-padding:var(--_icon-button-popover-icon-padding)}:host([variant=outlined]) .forge-icon-button{border-width:var(--_icon-button-outlined-border-width);border-style:var(--_icon-button-outlined-border-style);border-color:var(--_icon-button-outlined-border-color)}:host([variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-background-color)}:host(:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-icon-color);--_icon-button-background-color:var(--_icon-button-filled-background-color)}:host([variant=raised]) .forge-icon-button{--_icon-button-shadow:var(--_icon-button-raised-shadow)}:host([variant=raised]) .forge-icon-button:hover{--_icon-button-raised-shadow:var(--_icon-button-raised-hover-shadow)}:host([variant=raised]) .forge-icon-button:active{--_icon-button-raised-shadow:var(--_icon-button-raised-active-shadow)}:host(:is(:not([toggle]),[toggle]:not([on]))) slot[name=on]{display:none}:host([toggle][on]) slot:not([name]){display:none}:host([toggle][on]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-toggle-on-background-color);--_icon-button-icon-color:var(--_icon-button-toggle-on-icon-color)}:host([toggle][on][variant=outlined]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-outlined-toggle-on-background-color);--_icon-button-icon-color:var(--_icon-button-outlined-toggle-on-icon-color)}:host([toggle]:not([on])[variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-tonal-toggle-background-color)}:host([toggle][on][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-toggle-on-background-color)}:host([toggle]:not([on]):is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-background-color)}:host([toggle][on]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-on-background-color)}::slotted([slot=badge]){position:absolute;top:0;left:60%;z-index:1;pointer-events:none}::slotted(forge-badge[slot=badge][dot]){top:8px}:host(:is([dense],[density=small],[density=medium])) ::slotted(forge-badge[slot=badge]:not([dot])){top:-25%}:host(:is([dense],[density=small],[density=medium])) ::slotted(forge-badge[slot=badge][dot]){top:0}::slotted(forge-circular-progress){--forge-circular-progress-indicator-color:var(--_icon-button-icon-color);--forge-circular-progress-track-color:transparent;--forge-circular-progress-size:1em}:host(:is([dense],[density=small])) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-small-size);--_icon-button-icon-size:var(--_icon-button-density-small-icon-size);--_icon-button-padding:var(--_icon-button-density-small-padding)}:host(:is([dense],[density=small])) ::slotted(*){font-size:var(--_icon-button-density-small-icon-size)}:host([density=medium]) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-medium-size);--_icon-button-padding:var(--_icon-button-density-medium-padding)}:host([shape=squared]) .forge-icon-button{--_icon-button-shape:var(--_icon-button-shape-squared)}:host([disabled]){cursor:var(--_icon-button-disabled-cursor)}:host([disabled]) .forge-icon-button{pointer-events:none;opacity:var(--_icon-button-disabled-opacity)}:host([disabled][variant=raised]) .forge-icon-button{--_icon-button-raised-shadow:var(--_icon-button-raised-disabled-shadow)}:host(:not([toggle])[theme=primary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([theme=primary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}:host(:not([toggle])[theme=secondary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-secondary-container, #fff0c3));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary-container, #8a6804));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle]:not([on])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle][theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-secondary-container, #fff0c3));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-secondary-container, #8a6804))}:host(:not([toggle])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary, #000000));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary, #ffc107))}:host([toggle]:not([on])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle][theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-secondary, #ffc107));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=tertiary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-tertiary-container, #d0d7ff));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary-container, #213189));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle]:not([on])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle][theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-tertiary-container, #d0d7ff));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-tertiary-container, #213189))}:host(:not([toggle])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle]:not([on])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle][theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=success]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-success-container, #cde0ce));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success-container, #19441b));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle]:not([on])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle][theme=success][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-success-container, #cde0ce));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-success-container, #19441b))}:host(:not([toggle])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success, #2e7d32))}:host([toggle]:not([on])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle][theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-success, #2e7d32));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=error]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-error-container, #ecc2c9));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error-container, #5f0011));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle]:not([on])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle][theme=error][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-error-container, #ecc2c9));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-error-container, #5f0011))}:host(:not([toggle])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error, #b00020))}:host([toggle]:not([on])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle][theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-error, #b00020));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=warning]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-warning-container, #f4d3c2));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning-container, #712700));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle]:not([on])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle][theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-warning-container, #f4d3c2));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-warning-container, #712700))}:host(:not([toggle])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning, #d14900))}:host([toggle]:not([on])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle][theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-warning, #d14900));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=info]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-info-container, #c7daf0));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host(:not([toggle])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info-container, #0b3768));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle]:not([on])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle][theme=info][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-info-container, #c7daf0));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-info-container, #0b3768))}:host(:not([toggle])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info, #1565c0))}:host([toggle]:not([on])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle][theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-info, #1565c0));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-info, #1565c0))}';
18
18
  /**
19
19
  * @tag forge-icon-button
20
20
  *
@@ -89,6 +89,7 @@ const styles = ':host{--_icon-button-display:var(--forge-icon-button-display, in
89
89
  * @cssproperty --forge-icon-button-density-medium-size - The size of the button when in the medium density.
90
90
  * @cssproperty --forge-icon-button-density-medium-padding - The padding of the button when in the medium density.
91
91
  * @cssproperty --forge-icon-button-density-large-size - The size of the button when in the large density.
92
+ * @cssproperty --forge-icon-button-toggle-on-background-color - The background color of the when in toggle mode and toggled on.
92
93
  * @cssproperty --forge-icon-button-toggle-on-icon-color - The color of the icon when in toggle mode and toggled on.
93
94
  * @cssproperty --forge-icon-button-outlined-toggle-on-background-color - The background color when in the outlined variant and toggled on.
94
95
  * @cssproperty --forge-icon-button-outlined-toggle-on-icon-color - The icon color when in the outlined variant and toggled on.
package/esm/popover/popover-adapter.js CHANGED
@@ -6,6 +6,7 @@
6
6
  import { getShadowElement } from '@tylertech/forge-core';
7
7
  import { prefersReducedMotion } from '../core/utils/feature-detection';
8
8
  import { VirtualElement } from '../core/utils/position-utils';
9
+ import { frame } from '../core/utils/utils';
9
10
  import { OVERLAY_CONSTANTS } from '../overlay';
10
11
  import { OverlayAwareAdapter } from '../overlay/base/overlay-aware-adapter';
11
12
  import { POPOVER_CONSTANTS } from './popover-constants';
@@ -54,13 +55,14 @@ export class PopoverAdapter extends OverlayAwareAdapter {
54
55
  this._overlayElement.open = newState;
55
56
  this._updateAnchorExpandedState(newState);
56
57
  }
57
- hide() {
58
+ async hide() {
58
59
  if (prefersReducedMotion()) {
59
60
  this._surfaceElement.classList.remove(POPOVER_CONSTANTS.classes.EXITING);
60
61
  this._overlayElement.open = false;
61
62
  this._updateAnchorExpandedState(false);
62
63
  return Promise.resolve();
63
64
  }
65
+ await frame();
64
66
  if (!this._surfaceElement.checkVisibility()) {
65
67
  this._overlayElement.open = false;
66
68
  this._updateAnchorExpandedState(false);
package/esm/radio/radio/radio.d.ts CHANGED
@@ -45,10 +45,7 @@ declare const RadioComponent_base: import("../../constants").AbstractConstructor
45
45
  * @cssproperty --forge-radio-mark-size - The size of the radio button's mark in the inline and block directions.
46
46
  * @cssproperty --forge-radio-mark-width - The width of the radio button's mark.
47
47
  * @cssproperty --forge-radio-mark-height - The height of the radio button's mark.
48
- * @cssproperty --forge-radio-mark-unchecked-color - The color of the radio button's mark when unchecked.
49
- * @cssproperty --forge-radio-mark-checked-color - The color of the radio button's mark when checked.
50
- * @cssproperty --forge-radio-mark-unchecked-background - The background of the radio button's mark when unchecked.
51
- * @cssproperty --forge-radio-mark-checked-background - The background of the radio button's mark when checked.
48
+ * @cssproperty --forge-radio-mark-color - The color of the radio button's mark.
52
49
  * @cssproperty --forge-radio-gap - The gap between the radio button and its label.
53
50
  * @cssproperty --forge-radio-justify - The alignment of the radio button and its label in the inline direction.
54
51
  * @cssproperty --forge-radio-direction - The direction of the radio button and its label.
package/esm/radio/radio/radio.js CHANGED
@@ -19,7 +19,7 @@ import { RadioAdapter } from './radio-adapter';
19
19
  import { RADIO_CONSTANTS, tryCheck } from './radio-constants';
20
20
  import { RadioCore } from './radio-core';
21
21
  const template = '<template><div id=\"radio\" class=\"forge-radio\" part=\"root\"><div id=\"container\" class=\"container\" aria-hidden=\"true\"><div id=\"background\" class=\"background\" part=\"background\"></div><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer exportparts=\"surface:state-layer\"></forge-state-layer></div><span id=\"label\" class=\"label\" for=\"input\" part=\"label\"><slot></slot></span></div></template>';
22
- const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host(:focus){outline:0}.forge-radio{--_radio-primary-color:var(--forge-radio-primary-color, var(--forge-theme-tertiary, #3d5afe));--_radio-inactive-color:var(--forge-radio-inactive-color, var(--forge-theme-surface-container-high, #9e9e9e));--_radio-size:var(--forge-radio-size, 20px);--_radio-mark-size:var(--forge-radio-mark-size, 12px);--_radio-state-layer-size:var(--forge-radio-state-layer-size, 40px);--_radio-state-layer-dense-size:var(--forge-radio-state-layer-dense-size, 24px);--_radio-width:var(--forge-radio-width, var(--_radio-size));--_radio-height:var(--forge-radio-height, var(--_radio-size));--_radio-border-width:var(--forge-radio-border-width, var(--forge-border-medium, 2px));--_radio-unchecked-border-color:var(--forge-radio-unchecked-border-color, var(--_radio-inactive-color));--_radio-checked-border-color:var(--forge-radio-checked-border-color, var(--_radio-primary-color));--_radio-background:var(--forge-radio-background, transparent);--_radio-shape:var(--forge-radio-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1)));--_radio-mark-width:var(--forge-radio-mark-width, var(--_radio-mark-size));--_radio-mark-height:var(--forge-radio-mark-height, var(--_radio-mark-size));--_radio-mark-unchecked-color:var(--forge-radio-mark-unchecked-color, var(--_radio-inactive-color));--_radio-mark-checked-color:var(--forge-radio-mark-checked-color, var(--_radio-primary-color));--_radio-mark-unchecked-background:var(--forge-radio-mark-unchecked-background, transparent);--_radio-mark-checked-background:var(--forge-radio-mark-checked-background, transparent);--_radio-gap:var(--forge-radio-gap, 0);--_radio-justify:var(--forge-radio-justify, start);--_radio-direction:var(--forge-radio-direction, initial);--_radio-state-layer-width:var(--forge-radio-state-layer-width, var(--_radio-state-layer-size));--_radio-state-layer-height:var(--forge-radio-state-layer-height, var(--_radio-state-layer-size));--_radio-state-layer-unchecked-color:var(--forge-radio-state-layer-unchecked-color, var(--_radio-color));--_radio-state-layer-checked-color:var(--forge-radio-state-layer-checked-color, var(--_radio-primary-color));--_radio-state-layer-shape:var(--forge-radio-state-layer-shape, var(--_radio-shape));--_radio-state-layer-dense-width:var(--forge-radio-state-layer-dense-width, var(--_radio-state-layer-dense-size));--_radio-state-layer-dense-height:var(--forge-radio-state-layer-dense-height, var(--_radio-state-layer-dense-size));--_radio-disabled-opacity:var(--forge-radio-disabled-opacity, 0.38);--_radio-animation-duration:var(--forge-radio-animation-duration, var(--forge-animation-duration-short4, 200ms));--_radio-animation-timing-function:var(--forge-radio-animation-timing-function, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_radio-animation-delay:var(--forge-radio-animation-delay, 0ms)}.forge-radio{position:relative;flex-direction:var(--_radio-direction);flex-shrink:0;align-items:center;justify-content:var(--_radio-justify);gap:var(--_radio-gap);display:flex}.forge-radio .container{position:relative;align-items:center;justify-content:center;display:flex;border-radius:var(--_radio-shape);inline-size:var(--_radio-state-layer-width);block-size:var(--_radio-state-layer-height);cursor:pointer}.forge-radio .background{position:relative;align-items:center;justify-content:center;display:flex;overflow:hidden;transition-duration:var(--_radio-animation-duration);transition-delay:var(--_radio-animation-delay);transition-timing-function:var(--_radio-animation-timing-function);transition-property:border-color;box-sizing:border-box;border-radius:var(--_radio-shape);border-width:var(--_radio-border-width);border-style:solid;border-color:var(--_radio-unchecked-border-color);inline-size:var(--_radio-width);block-size:var(--_radio-height);background:var(--_radio-background)}.forge-radio .background::after{content:\"\";position:absolute;contain:strict;transition-duration:var(--_radio-animation-duration);transition-delay:var(--_radio-animation-delay);transition-timing-function:var(--_radio-animation-timing-function);transition-property:inline-size,block-size,border-color;border-radius:var(--_radio-shape);border-width:calc(var(--_radio-mark-height)/ 2) calc(var(--_radio-mark-width)/ 2);border-color:var(--_radio-mark-unchecked-color);border-style:solid;inline-size:calc(var(--_radio-width) - 2 * var(--_radio-border-width));block-size:calc(var(--_radio-height) - 2 * var(--_radio-border-width));background:var(--_radio-mark-unchecked-background)}.forge-radio .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit);cursor:default}.forge-radio .label:empty{display:none}:host([checked]) .forge-radio .background{border-color:var(--_radio-checked-border-color)}:host([checked]) .forge-radio .background::after{border-color:var(--_radio-mark-checked-color);inline-size:0px;block-size:0px;background:var(--_radio-mark-checked-background)}:host([checked]) forge-state-layer{--forge-state-layer-color:var(--_radio-state-layer-checked-color)}:host([dense]) .forge-radio .container{inline-size:var(--_radio-state-layer-dense-width);block-size:var(--_radio-state-layer-dense-height)}:host([disabled]) .forge-radio .container{opacity:var(--_radio-disabled-opacity);cursor:not-allowed}:host([readonly]) .forge-radio .container{cursor:not-allowed}forge-focus-indicator{--forge-focus-indicator-color:var(--_radio-primary-color);--forge-focus-indicator-outward-offset:0px;--forge-focus-indicator-shape:var(--_radio-state-layer-shape)}forge-state-layer{--forge-state-layer-color:var(--_radio-state-layer-unchecked-color)}';
22
+ const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host(:focus){outline:0}.forge-radio{--_radio-primary-color:var(--forge-radio-primary-color, var(--forge-theme-tertiary, #3d5afe));--_radio-inactive-color:var(--forge-radio-inactive-color, var(--forge-theme-surface-container-high, #9e9e9e));--_radio-size:var(--forge-radio-size, 20px);--_radio-mark-size:var(--forge-radio-mark-size, 75%);--_radio-state-layer-size:var(--forge-radio-state-layer-size, 40px);--_radio-state-layer-dense-size:var(--forge-radio-state-layer-dense-size, 24px);--_radio-width:var(--forge-radio-width, var(--_radio-size));--_radio-height:var(--forge-radio-height, var(--_radio-size));--_radio-border-width:var(--forge-radio-border-width, var(--forge-border-medium, 2px));--_radio-unchecked-border-color:var(--forge-radio-unchecked-border-color, var(--_radio-inactive-color));--_radio-checked-border-color:var(--forge-radio-checked-border-color, var(--_radio-primary-color));--_radio-background:var(--forge-radio-background, transparent);--_radio-shape:var(--forge-radio-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1)));--_radio-mark-width:var(--forge-radio-mark-width, var(--_radio-mark-size));--_radio-mark-height:var(--forge-radio-mark-height, var(--_radio-mark-size));--_radio-mark-color:var(--forge-radio-mark-color, var(--_radio-primary-color));--_radio-gap:var(--forge-radio-gap, 0);--_radio-justify:var(--forge-radio-justify, start);--_radio-direction:var(--forge-radio-direction, initial);--_radio-state-layer-width:var(--forge-radio-state-layer-width, var(--_radio-state-layer-size));--_radio-state-layer-height:var(--forge-radio-state-layer-height, var(--_radio-state-layer-size));--_radio-state-layer-unchecked-color:var(--forge-radio-state-layer-unchecked-color, var(--_radio-color));--_radio-state-layer-checked-color:var(--forge-radio-state-layer-checked-color, var(--_radio-primary-color));--_radio-state-layer-shape:var(--forge-radio-state-layer-shape, var(--_radio-shape));--_radio-state-layer-dense-width:var(--forge-radio-state-layer-dense-width, var(--_radio-state-layer-dense-size));--_radio-state-layer-dense-height:var(--forge-radio-state-layer-dense-height, var(--_radio-state-layer-dense-size));--_radio-disabled-opacity:var(--forge-radio-disabled-opacity, 0.38);--_radio-animation-duration:var(--forge-radio-animation-duration, var(--forge-animation-duration-short4, 200ms));--_radio-animation-timing-function:var(--forge-radio-animation-timing-function, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_radio-animation-delay:var(--forge-radio-animation-delay, 0ms)}.forge-radio{position:relative;flex-direction:var(--_radio-direction);flex-shrink:0;align-items:center;justify-content:var(--_radio-justify);gap:var(--_radio-gap);display:flex}.forge-radio .container{position:relative;align-items:center;justify-content:center;display:flex;border-radius:var(--_radio-shape);inline-size:var(--_radio-state-layer-width);block-size:var(--_radio-state-layer-height);cursor:pointer}.forge-radio .background{position:relative;display:inline block;overflow:hidden;transition-duration:var(--_radio-animation-duration);transition-delay:var(--_radio-animation-delay);transition-timing-function:var(--_radio-animation-timing-function);transition-property:border-color;box-sizing:border-box;border-radius:var(--_radio-shape);border-width:var(--_radio-border-width);border-style:solid;border-color:var(--_radio-unchecked-border-color);inline-size:var(--_radio-width);block-size:var(--_radio-height);background:var(--_radio-background)}.forge-radio .background::after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:top left;transition-duration:var(--_radio-animation-duration);transition-delay:var(--_radio-animation-delay);transition-timing-function:var(--_radio-animation-timing-function);transition-property:opacity,scale;border-radius:var(--_radio-shape);inline-size:var(--_radio-mark-width);block-size:var(--_radio-mark-height);background:var(--_radio-mark-color);scale:0.5;opacity:0}.forge-radio .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit);cursor:default}.forge-radio .label:empty{display:none}:host([checked]) .forge-radio .background{border-color:var(--_radio-checked-border-color)}:host([checked]) .forge-radio .background::after{scale:1;opacity:1}:host([checked]) forge-state-layer{--forge-state-layer-color:var(--_radio-state-layer-checked-color)}:host([dense]) .forge-radio .container{inline-size:var(--_radio-state-layer-dense-width);block-size:var(--_radio-state-layer-dense-height)}:host([disabled]) .forge-radio .container{opacity:var(--_radio-disabled-opacity);cursor:not-allowed}:host([readonly]) .forge-radio .container{cursor:not-allowed}forge-focus-indicator{--forge-focus-indicator-color:var(--_radio-primary-color);--forge-focus-indicator-outward-offset:0px;--forge-focus-indicator-shape:var(--_radio-state-layer-shape)}forge-state-layer{--forge-state-layer-color:var(--_radio-state-layer-unchecked-color)}';
23
23
  /**
24
24
  * @tag forge-radio
25
25
  *
@@ -39,10 +39,7 @@ const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transpare
39
39
  * @cssproperty --forge-radio-mark-size - The size of the radio button's mark in the inline and block directions.
40
40
  * @cssproperty --forge-radio-mark-width - The width of the radio button's mark.
41
41
  * @cssproperty --forge-radio-mark-height - The height of the radio button's mark.
42
- * @cssproperty --forge-radio-mark-unchecked-color - The color of the radio button's mark when unchecked.
43
- * @cssproperty --forge-radio-mark-checked-color - The color of the radio button's mark when checked.
44
- * @cssproperty --forge-radio-mark-unchecked-background - The background of the radio button's mark when unchecked.
45
- * @cssproperty --forge-radio-mark-checked-background - The background of the radio button's mark when checked.
42
+ * @cssproperty --forge-radio-mark-color - The color of the radio button's mark.
46
43
  * @cssproperty --forge-radio-gap - The gap between the radio button and its label.
47
44
  * @cssproperty --forge-radio-justify - The alignment of the radio button and its label in the inline direction.
48
45
  * @cssproperty --forge-radio-direction - The direction of the radio button and its label.
package/esm/switch/switch.js CHANGED
@@ -18,7 +18,7 @@ import { SwitchAdapter } from './switch-adapter';
18
18
  import { SWITCH_CONSTANTS } from './switch-constants';
19
19
  import { SwitchCore } from './switch-core';
20
20
  const template = '<template><div class=\"forge-switch\" part=\"switch\"><div id=\"container\" class=\"container\"><div class=\"track\" part=\"track\"></div><div class=\"handle\" part=\"handle\"><div id=\"icon-off\" class=\"icon icon__off\" part=\"icon-off\"><slot name=\"icon-off\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M20 13H4v-2h16v2z\"/></svg></slot></div><div id=\"icon-on\" class=\"icon icon__on\" part=\"icon-on\"><slot name=\"icon-on\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\"/></svg></slot></div><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator></div><label id=\"label\" class=\"label\" part=\"label\"><slot></slot></label></div></template>';
21
- const styles = ':host{display:inline-block;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-switch{--_switch-handle-size:var(--forge-switch-handle-size, 20px);--_switch-handle-scale:var(--forge-switch-handle-scale, 1);--_switch-handle-elevation:var(--forge-switch-handle-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_switch-track-border-width:var(--forge-switch-track-border-width, 0);--_switch-track-border-color:var(--forge-switch-track-border-color, transparent);--_switch-icon-color:var(--forge-switch-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_switch-icon-size:var(--forge-switch-icon-size, 16px);--_switch-icon-scale:var(--forge-switch-icon-scale, 1);--_switch-state-layer-size:var(--forge-switch-state-layer-size, 40px);--_switch-state-layer-dense-size:var(--forge-switch-state-layer-dense-size, 28px);--_switch-handle-on-color:var(--forge-switch-handle-on-color, var(--forge-theme-tertiary, #3d5afe));--_switch-handle-off-color:var(--forge-switch-handle-off-color, var(--forge-theme-surface-container-high, #9e9e9e));--_switch-handle-width:var(--forge-switch-handle-width, var(--_switch-handle-size));--_switch-handle-height:var(--forge-switch-handle-height, var(--_switch-handle-size));--_switch-handle-on-scale:var(--forge-switch-handle-on-scale, var(--_switch-handle-scale));--_switch-handle-off-scale:var(--forge-switch-handle-off-scale, var(--_switch-handle-scale));--_switch-handle-shape:var(--forge-switch-handle-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1)));--_switch-handle-on-elevation:var(--forge-switch-handle-on-elevation, var(--_switch-handle-elevation));--_switch-handle-off-elevation:var(--forge-switch-handle-off-elevation, var(--_switch-handle-elevation));--_switch-track-on-color:var(--forge-switch-track-on-color, var(--forge-theme-tertiary-container, #d0d7ff));--_switch-track-off-color:var(--forge-switch-track-off-color, var(--forge-theme-surface-container, #e0e0e0));--_switch-track-width:var(--forge-switch-track-width, 36px);--_switch-track-height:var(--forge-switch-track-height, 14px);--_switch-track-shape:var(--forge-switch-track-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_switch-track-on-border-width:var(--forge-switch-track-on-border-width, var(--_switch-track-border-width));--_switch-track-off-border-width:var(--forge-switch-track-off-border-width, var(--_switch-track-border-width));--_switch-track-on-border-color:var(--forge-switch-track-on-border-color, var(--_switch-track-border-color));--_switch-track-off-border-color:var(--forge-switch-track-off-border-color, var(--_switch-track-border-color));--_switch-icon-on-color:var(--forge-switch-icon-on-color, var(--_switch-icon-color));--_switch-icon-off-color:var(--forge-switch-icon-off-color, var(--_switch-icon-color));--_switch-icon-on-size:var(--forge-switch-icon-on-size, var(--_switch-icon-size));--_switch-icon-off-size:var(--forge-switch-icon-off-size, var(--_switch-icon-size));--_switch-icon-on-scale:var(--forge-switch-icon-on-scale, var(--_switch-icon-scale));--_switch-icon-off-scale:var(--forge-switch-icon-off-scale, var(--_switch-icon-scale));--_switch-gap:var(--forge-switch-gap, 0);--_switch-justify:var(--forge-switch-justify, start);--_switch-direction:var(--forge-switch-direction, initial);--_switch-state-layer-width:var(--forge-switch-state-layer-width, var(--_switch-state-layer-size));--_switch-state-layer-height:var(--forge-switch-state-layer-height, var(--_switch-state-layer-size));--_switch-state-layer-on-color:var(--forge-switch-state-layer-on-color, var(--_switch-handle-on-color));--_switch-state-layer-off-color:var(--forge-switch-state-layer-off-color, var(--_switch-color));--_switch-state-layer-dense-width:var(--forge-switch-state-layer-dense-width, var(--_switch-state-layer-dense-size));--_switch-state-layer-dense-height:var(--forge-switch-state-layer-dense-height, var(--_switch-state-layer-dense-size));--_switch-disabled-opacity:var(--forge-switch-disabled-opacity, 0.38);--_switch-handle-active-on-color:var(--forge-switch-handle-active-on-color, var(--_switch-handle-on-color));--_switch-handle-active-off-color:var(--forge-switch-handle-active-off-color, var(--_switch-handle-off-color));--_switch-handle-active-scale:var(--forge-switch-handle-active-scale, 1.2);--_switch-handle-active-on-scale:var(--forge-switch-handle-active-on-scale, var(--_switch-handle-active-scale));--_switch-handle-active-off-scale:var(--forge-switch-handle-active-off-scale, var(--_switch-handle-active-scale));--_switch-handle-active-elevation:var(--forge-switch-handle-active-elevation, var(--_switch-handle-elevation));--_switch-handle-active-on-elevation:var(--forge-switch-handle-active-on-elevation, var(--_switch-handle-active-elevation));--_switch-handle-active-off-elevation:var(--forge-switch-handle-active-off-elevation, var(--_switch-handle-active-elevation));--_switch-track-active-on-color:var(--forge-switch-track-active-on-color, var(--_switch-track-on-color));--_switch-track-active-off-color:var(--forge-switch-track-active-off-color, var(--_switch-track-off-color));--_switch-track-active-on-border-width:var(--forge-switch-track-active-on-border-width, var(--_switch-track-on-border-width));--_switch-track-active-off-border-width:var(--forge-switch-track-active-off-border-width, var(--_switch-track-off-border-width));--_switch-track-active-on-border-color:var(--forge-switch-track-active-on-border-color, var(--_switch-track-on-border-color));--_switch-track-active-off-border-color:var(--forge-switch-track-active-off-border-color, var(--_switch-track-off-border-color));--_switch-icon-active-on-color:var(--forge-switch-icon-active-on-color, var(--_switch-icon-on-color));--_switch-icon-active-off-color:var(--forge-switch-icon-active-off-color, var(--_switch-icon-off-color));--_switch-icon-active-on-scale:var(--forge-switch-icon-active-on-scale, var(--_switch-icon-on-scale));--_switch-icon-active-off-scale:var(--forge-switch-icon-active-off-scale, var(--_switch-icon-off-scale));--_switch-animation-duration:var(--forge-switch-animation-duration, var(--forge-animation-duration-short2, 100ms));--_switch-animation-timing:var(--forge-switch-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_switch-active-animation-timing:var(--forge-switch-active-animation-timing, var(--forge-animation-easing-linear, cubic-bezier(0, 0, 1, 1)))}.forge-switch{display:flex;position:relative;flex-direction:var(--_switch-direction);flex-shrink:0;align-items:center;justify-content:var(--_switch-justify);gap:var(--_switch-gap);--_switch-current-state-layer-width:var(--_switch-state-layer-width);--_switch-current-state-layer-height:var(--_switch-state-layer-height)}.forge-switch .container{position:relative;align-items:center;display:flex;block-size:max(var(--_switch-handle-height),var(--_switch-track-height),var(--_switch-current-state-layer-height));cursor:pointer}.forge-switch .input{position:absolute;z-index:1;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-switch .track{transition-property:background-color,border-color,border-width;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);box-sizing:border-box;margin-inline:calc(max(var(--_switch-handle-width),var(--_switch-current-state-layer-width))/ 2 - calc(var(--_switch-track-height)/ 2));border-width:var(--_switch-track-off-border-width);border-color:var(--_switch-track-off-border-color);border-style:solid;border-radius:var(--_switch-track-shape);inline-size:var(--_switch-track-width);block-size:var(--_switch-track-height);background-color:var(--_switch-track-off-color)}.forge-switch .handle{position:absolute;justify-content:center;align-items:center;display:flex;transition-property:translate;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-current-state-layer-width);block-size:var(--_switch-current-state-layer-height)}.forge-switch .handle::before{content:\"\";position:relative;display:block;scale:var(--_switch-handle-off-scale);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing);box-shadow:var(--_switch-handle-off-elevation);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-handle-width);block-size:var(--_switch-handle-height);background-color:var(--_switch-handle-off-color)}.forge-switch .icon{position:absolute;align-items:center;justify-content:center;display:flex;transition-property:opacity,scale;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);inline-size:var(--_switch-icon-off-size);block-size:var(--_switch-icon-off-size);color:var(--_switch-icon-off-color);fill:var(--_switch-icon-off-color);font-size:var(--_switch-icon-off-size);--forge-icon-font-size:var(--_switch-icon-off-size)}.forge-switch .icon__on{--forge-icon-font-size:var(--_switch-icon-on-size);inline-size:var(--_switch-icon-on-size);block-size:var(--_switch-icon-on-size);color:var(--_switch-icon-on-color);fill:var(--_switch-icon-on-color);font-size:var(--_switch-icon-on-size);opacity:0;scale:0.4}.forge-switch .icon__off{opacity:1;scale:var(--_switch-icon-off-scale)}.forge-switch .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit)}.forge-switch .label:empty{display:none}.forge-switch .hidden{display:none}.forge-switch ::slotted([slot=input]){position:absolute;z-index:1;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([on]) .track{border-width:var(--_switch-track-on-border-width);border-color:var(--_switch-track-on-border-color);background-color:var(--_switch-track-on-color)}:host([on]) .handle{translate:calc(var(--_switch-track-width) - calc(var(--_switch-track-height)/ 2) * 2)}:host([on]) .handle::before{scale:var(--_switch-handle-on-scale);box-shadow:var(--_switch-handle-on-elevation);background-color:var(--_switch-handle-on-color)}:host([on]) .handle .icon__on{opacity:1;scale:var(--_switch-icon-on-scale)}:host([on]) .handle .icon__off{opacity:0;scale:0.4}:host([on]) forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-on-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .track{border-width:var(--_switch-track-active-off-border-width);border-color:var(--_switch-track-active-off-border-color);background-color:var(--_switch-track-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-off-scale);box-shadow:var(--_switch-handle-active-off-elevation);background-color:var(--_switch-handle-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-off-scale);color:var(--_switch-icon-active-off-color);fill:var(--_switch-icon-active-off-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .track{border-width:var(--_switch-track-active-on-border-width);border-color:var(--_switch-track-active-on-border-color);background-color:var(--_switch-track-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-on-scale);box-shadow:var(--_switch-handle-active-on-elevation);background-color:var(--_switch-handle-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-on-scale);color:var(--_switch-icon-active-on-color);fill:var(--_switch-icon-active-on-color)}:host([dense]) .forge-switch{--_switch-current-state-layer-width:var(--_switch-state-layer-dense-width);--_switch-current-state-layer-height:var(--_switch-state-layer-dense-height)}:host([disabled]) .forge-switch .container{opacity:var(--_switch-disabled-opacity);cursor:not-allowed}:host([disabled]) .forge-switch .handle::before{box-shadow:none}:host([readonly]) .forge-switch .container{cursor:not-allowed}@media (prefers-reduced-motion){.switch{--_switch-animation-duration:var(--forge-switch-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-off-color)}forge-focus-indicator{--forge-focus-indicator-shape:var(--_switch-track-shape);--forge-focus-indicator-outward-offset:0px}';
21
+ const styles = ':host{display:inline-block;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-switch{--_switch-handle-size:var(--forge-switch-handle-size, 20px);--_switch-handle-scale:var(--forge-switch-handle-scale, 1);--_switch-handle-elevation:var(--forge-switch-handle-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_switch-track-border-width:var(--forge-switch-track-border-width, 0);--_switch-track-border-color:var(--forge-switch-track-border-color, transparent);--_switch-icon-color:var(--forge-switch-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_switch-icon-size:var(--forge-switch-icon-size, 16px);--_switch-icon-scale:var(--forge-switch-icon-scale, 1);--_switch-state-layer-size:var(--forge-switch-state-layer-size, 40px);--_switch-state-layer-dense-size:var(--forge-switch-state-layer-dense-size, 28px);--_switch-handle-on-color:var(--forge-switch-handle-on-color, var(--forge-theme-tertiary, #3d5afe));--_switch-handle-off-color:var(--forge-switch-handle-off-color, var(--forge-theme-surface-container-high, #9e9e9e));--_switch-handle-width:var(--forge-switch-handle-width, var(--_switch-handle-size));--_switch-handle-height:var(--forge-switch-handle-height, var(--_switch-handle-size));--_switch-handle-on-scale:var(--forge-switch-handle-on-scale, var(--_switch-handle-scale));--_switch-handle-off-scale:var(--forge-switch-handle-off-scale, var(--_switch-handle-scale));--_switch-handle-shape:var(--forge-switch-handle-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1)));--_switch-handle-on-elevation:var(--forge-switch-handle-on-elevation, var(--_switch-handle-elevation));--_switch-handle-off-elevation:var(--forge-switch-handle-off-elevation, var(--_switch-handle-elevation));--_switch-track-on-color:var(--forge-switch-track-on-color, var(--forge-theme-tertiary-container, #d0d7ff));--_switch-track-off-color:var(--forge-switch-track-off-color, var(--forge-theme-surface-container, #e0e0e0));--_switch-track-width:var(--forge-switch-track-width, 36px);--_switch-track-height:var(--forge-switch-track-height, 14px);--_switch-track-shape:var(--forge-switch-track-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_switch-track-on-border-width:var(--forge-switch-track-on-border-width, var(--_switch-track-border-width));--_switch-track-off-border-width:var(--forge-switch-track-off-border-width, var(--_switch-track-border-width));--_switch-track-on-border-color:var(--forge-switch-track-on-border-color, var(--_switch-track-border-color));--_switch-track-off-border-color:var(--forge-switch-track-off-border-color, var(--_switch-track-border-color));--_switch-icon-on-color:var(--forge-switch-icon-on-color, var(--_switch-icon-color));--_switch-icon-off-color:var(--forge-switch-icon-off-color, var(--_switch-icon-color));--_switch-icon-on-size:var(--forge-switch-icon-on-size, var(--_switch-icon-size));--_switch-icon-off-size:var(--forge-switch-icon-off-size, var(--_switch-icon-size));--_switch-icon-on-scale:var(--forge-switch-icon-on-scale, var(--_switch-icon-scale));--_switch-icon-off-scale:var(--forge-switch-icon-off-scale, var(--_switch-icon-scale));--_switch-gap:var(--forge-switch-gap, 0);--_switch-justify:var(--forge-switch-justify, start);--_switch-direction:var(--forge-switch-direction, initial);--_switch-state-layer-width:var(--forge-switch-state-layer-width, var(--_switch-state-layer-size));--_switch-state-layer-height:var(--forge-switch-state-layer-height, var(--_switch-state-layer-size));--_switch-state-layer-on-color:var(--forge-switch-state-layer-on-color, var(--_switch-handle-on-color));--_switch-state-layer-off-color:var(--forge-switch-state-layer-off-color, var(--_switch-color));--_switch-state-layer-dense-width:var(--forge-switch-state-layer-dense-width, var(--_switch-state-layer-dense-size));--_switch-state-layer-dense-height:var(--forge-switch-state-layer-dense-height, var(--_switch-state-layer-dense-size));--_switch-disabled-opacity:var(--forge-switch-disabled-opacity, 0.38);--_switch-handle-active-on-color:var(--forge-switch-handle-active-on-color, var(--_switch-handle-on-color));--_switch-handle-active-off-color:var(--forge-switch-handle-active-off-color, var(--_switch-handle-off-color));--_switch-handle-active-scale:var(--forge-switch-handle-active-scale, 1.2);--_switch-handle-active-on-scale:var(--forge-switch-handle-active-on-scale, var(--_switch-handle-active-scale));--_switch-handle-active-off-scale:var(--forge-switch-handle-active-off-scale, var(--_switch-handle-active-scale));--_switch-handle-active-elevation:var(--forge-switch-handle-active-elevation, var(--_switch-handle-elevation));--_switch-handle-active-on-elevation:var(--forge-switch-handle-active-on-elevation, var(--_switch-handle-active-elevation));--_switch-handle-active-off-elevation:var(--forge-switch-handle-active-off-elevation, var(--_switch-handle-active-elevation));--_switch-track-active-on-color:var(--forge-switch-track-active-on-color, var(--_switch-track-on-color));--_switch-track-active-off-color:var(--forge-switch-track-active-off-color, var(--_switch-track-off-color));--_switch-track-active-on-border-width:var(--forge-switch-track-active-on-border-width, var(--_switch-track-on-border-width));--_switch-track-active-off-border-width:var(--forge-switch-track-active-off-border-width, var(--_switch-track-off-border-width));--_switch-track-active-on-border-color:var(--forge-switch-track-active-on-border-color, var(--_switch-track-on-border-color));--_switch-track-active-off-border-color:var(--forge-switch-track-active-off-border-color, var(--_switch-track-off-border-color));--_switch-icon-active-on-color:var(--forge-switch-icon-active-on-color, var(--_switch-icon-on-color));--_switch-icon-active-off-color:var(--forge-switch-icon-active-off-color, var(--_switch-icon-off-color));--_switch-icon-active-on-scale:var(--forge-switch-icon-active-on-scale, var(--_switch-icon-on-scale));--_switch-icon-active-off-scale:var(--forge-switch-icon-active-off-scale, var(--_switch-icon-off-scale));--_switch-animation-duration:var(--forge-switch-animation-duration, var(--forge-animation-duration-short2, 100ms));--_switch-animation-timing:var(--forge-switch-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_switch-active-animation-timing:var(--forge-switch-active-animation-timing, var(--forge-animation-easing-linear, cubic-bezier(0, 0, 1, 1)))}.forge-switch{display:flex;position:relative;flex-direction:var(--_switch-direction);flex-shrink:0;align-items:center;justify-content:var(--_switch-justify);gap:var(--_switch-gap);--_switch-current-state-layer-width:var(--_switch-state-layer-width);--_switch-current-state-layer-height:var(--_switch-state-layer-height)}.forge-switch .container{position:relative;align-items:center;display:flex;block-size:max(var(--_switch-handle-height),var(--_switch-track-height),var(--_switch-current-state-layer-height));cursor:pointer}.forge-switch .input{position:absolute;z-index:1;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-switch .track{transition-property:background-color,border-color,border-width;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);box-sizing:border-box;margin-inline:calc(max(var(--_switch-handle-width),var(--_switch-current-state-layer-width))/ 2 - calc(var(--_switch-track-height)/ 2));border-width:var(--_switch-track-off-border-width);border-color:var(--_switch-track-off-border-color);border-style:solid;border-radius:var(--_switch-track-shape);inline-size:var(--_switch-track-width);block-size:var(--_switch-track-height);background-color:var(--_switch-track-off-color)}.forge-switch .handle{position:absolute;justify-content:center;align-items:center;display:flex;transition-property:translate;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-current-state-layer-width);block-size:var(--_switch-current-state-layer-height)}.forge-switch .handle::before{content:\"\";position:relative;display:block;scale:var(--_switch-handle-off-scale);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing);box-shadow:var(--_switch-handle-off-elevation);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-handle-width);block-size:var(--_switch-handle-height);background-color:var(--_switch-handle-off-color)}.forge-switch .icon{position:absolute;align-items:center;justify-content:center;display:flex;transition-property:opacity,scale;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);inline-size:var(--_switch-icon-off-size);block-size:var(--_switch-icon-off-size);color:var(--_switch-icon-off-color);fill:var(--_switch-icon-off-color);font-size:var(--_switch-icon-off-size);--forge-icon-font-size:var(--_switch-icon-off-size)}.forge-switch .icon__on{--forge-icon-font-size:var(--_switch-icon-on-size);inline-size:var(--_switch-icon-on-size);block-size:var(--_switch-icon-on-size);color:var(--_switch-icon-on-color);fill:var(--_switch-icon-on-color);font-size:var(--_switch-icon-on-size);opacity:0;scale:0.4}.forge-switch .icon__off{opacity:1;scale:var(--_switch-icon-off-scale)}.forge-switch .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit)}.forge-switch .label:empty{display:none}.forge-switch .hidden{display:none}.forge-switch ::slotted([slot=input]){position:absolute;z-index:1;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([on]) .track{border-width:var(--_switch-track-on-border-width);border-color:var(--_switch-track-on-border-color);background-color:var(--_switch-track-on-color)}:host([on]) .handle{translate:calc(var(--_switch-track-width) - calc(var(--_switch-track-height)/ 2) * 2)}:host([on]) .handle::before{scale:var(--_switch-handle-on-scale);box-shadow:var(--_switch-handle-on-elevation);background-color:var(--_switch-handle-on-color)}:host([on]) .handle .icon__on{opacity:1;scale:var(--_switch-icon-on-scale)}:host([on]) .handle .icon__off{opacity:0;scale:0.4}:host([on]) forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-on-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .track{border-width:var(--_switch-track-active-off-border-width);border-color:var(--_switch-track-active-off-border-color);background-color:var(--_switch-track-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-off-scale);box-shadow:var(--_switch-handle-active-off-elevation);background-color:var(--_switch-handle-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-off-scale);color:var(--_switch-icon-active-off-color);fill:var(--_switch-icon-active-off-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .track{border-width:var(--_switch-track-active-on-border-width);border-color:var(--_switch-track-active-on-border-color);background-color:var(--_switch-track-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-on-scale);box-shadow:var(--_switch-handle-active-on-elevation);background-color:var(--_switch-handle-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-on-scale);color:var(--_switch-icon-active-on-color);fill:var(--_switch-icon-active-on-color)}:host([dense]) .forge-switch{--_switch-current-state-layer-width:var(--_switch-state-layer-dense-width);--_switch-current-state-layer-height:var(--_switch-state-layer-dense-height)}:host([disabled]) .forge-switch .container{opacity:var(--_switch-disabled-opacity);cursor:not-allowed}:host([disabled]) .forge-switch .handle::before{box-shadow:none}:host([readonly]) .forge-switch .container{cursor:not-allowed}@media (prefers-reduced-motion){.switch{--_switch-animation-duration:var(--forge-switch-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-off-color)}forge-focus-indicator{--forge-focus-indicator-shape:var(--_switch-track-shape);--forge-focus-indicator-outward-offset:0px}';
22
22
  /**
23
23
  * @tag forge-switch
24
24
  *
package/esm/tabs/tab/tab-adapter.d.ts CHANGED
@@ -7,6 +7,7 @@ import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
7
7
  import type { ITabComponent } from './tab';
8
8
  export interface ITabAdapter extends IBaseAdapter {
9
9
  initialize(): void;
10
+ activateFocusIndicator(): void;
10
11
  addInteractionListener(type: string, listener: EventListener): void;
11
12
  setDisabled(value: boolean): void;
12
13
  setSelected(value: boolean): void;
@@ -15,9 +16,11 @@ export interface ITabAdapter extends IBaseAdapter {
15
16
  }
16
17
  export declare class TabAdapter extends BaseAdapter<ITabComponent> implements ITabAdapter {
17
18
  private readonly _tabIndicatorElement;
19
+ private readonly _focusIndicatorElement;
18
20
  private readonly _stateLayerElement;
19
21
  constructor(component: ITabComponent);
20
22
  initialize(): void;
23
+ activateFocusIndicator(): void;
21
24
  addInteractionListener(type: string, listener: EventListener): void;
22
25
  setDisabled(value: boolean): void;
23
26
  setSelected(value: boolean): void;