@tcn/ui 0.7.0 → 0.8.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 (137) hide show
  1. package/dist/{Color-6BZIO3FS-CWWwv-fq.js → Color-6BZIO3FS-C9xkPWgz.js} +2 -2
  2. package/dist/{Color-6BZIO3FS-CWWwv-fq.js.map → Color-6BZIO3FS-C9xkPWgz.js.map} +1 -1
  3. package/dist/{WithTooltip-65CFNBJE-DvcUZizH.js → WithTooltip-65CFNBJE-DEnh547F.js} +2 -2
  4. package/dist/{WithTooltip-65CFNBJE-DvcUZizH.js.map → WithTooltip-65CFNBJE-DEnh547F.js.map} +1 -1
  5. package/dist/actions/__docs__/components/showcase.js +1 -1
  6. package/dist/actions/index.d.ts +1 -0
  7. package/dist/actions/index.d.ts.map +1 -1
  8. package/dist/actions/index.js +8 -6
  9. package/dist/actions/index.js.map +1 -1
  10. package/dist/body.css +1 -0
  11. package/dist/form/field_presenters/field_presenter.d.ts +2 -2
  12. package/dist/form/field_presenters/field_presenter.d.ts.map +1 -1
  13. package/dist/form/field_presenters/field_presenter.js.map +1 -1
  14. package/dist/formatter-EIJCOSYU-DWmgEY3b.js +6 -0
  15. package/dist/{formatter-EIJCOSYU-D6nmx63h.js.map → formatter-EIJCOSYU-DWmgEY3b.js.map} +1 -1
  16. package/dist/inputs/color_input/color_input.js +10 -9
  17. package/dist/inputs/color_input/color_input.js.map +1 -1
  18. package/dist/inputs/date_picker/date_picker_header.js +7 -6
  19. package/dist/inputs/date_picker/date_picker_header.js.map +1 -1
  20. package/dist/inputs/date_picker/date_picker_input.js +3 -2
  21. package/dist/inputs/date_picker/date_picker_input.js.map +1 -1
  22. package/dist/inputs/date_picker/date_picker_time_selector.js +3 -2
  23. package/dist/inputs/date_picker/date_picker_time_selector.js.map +1 -1
  24. package/dist/inputs/date_picker/date_picker_year_input.js +6 -5
  25. package/dist/inputs/date_picker/date_picker_year_input.js.map +1 -1
  26. package/dist/inputs/date_picker/date_picker_year_selector.js +3 -2
  27. package/dist/inputs/date_picker/date_picker_year_selector.js.map +1 -1
  28. package/dist/inputs/multiselect/multiselect_inline_values.js +8 -7
  29. package/dist/inputs/multiselect/multiselect_inline_values.js.map +1 -1
  30. package/dist/inputs/multiselect/multiselect_values.js +3 -2
  31. package/dist/inputs/multiselect/multiselect_values.js.map +1 -1
  32. package/dist/inputs/phone_number_input/phone_number_input.js +44 -43
  33. package/dist/inputs/phone_number_input/phone_number_input.js.map +1 -1
  34. package/dist/inputs/select/select.js +3 -2
  35. package/dist/inputs/select/select.js.map +1 -1
  36. package/dist/inputs/suggestions/suggestion_list.js +3 -2
  37. package/dist/inputs/suggestions/suggestion_list.js.map +1 -1
  38. package/dist/layouts/body/body.d.ts +6 -0
  39. package/dist/layouts/body/body.d.ts.map +1 -0
  40. package/dist/layouts/body/body.js +21 -0
  41. package/dist/layouts/body/body.js.map +1 -0
  42. package/dist/layouts/index.d.ts +5 -0
  43. package/dist/layouts/index.d.ts.map +1 -1
  44. package/dist/layouts/index.js +38 -22
  45. package/dist/layouts/index.js.map +1 -1
  46. package/dist/layouts/rail/main/main.d.ts +6 -0
  47. package/dist/layouts/rail/main/main.d.ts.map +1 -0
  48. package/dist/layouts/rail/main/main.js +21 -0
  49. package/dist/layouts/rail/main/main.js.map +1 -0
  50. package/dist/layouts/rail/rail.d.ts +9 -0
  51. package/dist/layouts/rail/rail.d.ts.map +1 -0
  52. package/dist/layouts/rail/rail.js +55 -0
  53. package/dist/layouts/rail/rail.js.map +1 -0
  54. package/dist/layouts/rail/side/side.d.ts +6 -0
  55. package/dist/layouts/rail/side/side.d.ts.map +1 -0
  56. package/dist/layouts/rail/side/side.js +21 -0
  57. package/dist/layouts/rail/side/side.js.map +1 -0
  58. package/dist/layouts/rail/utility_strip/utility_strip.d.ts +9 -0
  59. package/dist/layouts/rail/utility_strip/utility_strip.d.ts.map +1 -0
  60. package/dist/layouts/rail/utility_strip/utility_strip.js +32 -0
  61. package/dist/layouts/rail/utility_strip/utility_strip.js.map +1 -0
  62. package/dist/layouts/scaffold/scaffold.js +31 -31
  63. package/dist/layouts/scaffold/scaffold.js.map +1 -1
  64. package/dist/layouts/table/table.d.ts +27 -0
  65. package/dist/layouts/table/table.d.ts.map +1 -0
  66. package/dist/layouts/table/table.js +70 -0
  67. package/dist/layouts/table/table.js.map +1 -0
  68. package/dist/main.css +1 -0
  69. package/dist/navigation/tabs/primitives/tabs_list.d.ts.map +1 -1
  70. package/dist/navigation/tabs/primitives/tabs_list.js +61 -21
  71. package/dist/navigation/tabs/primitives/tabs_list.js.map +1 -1
  72. package/dist/navigation/tabs/state/link/tab_link.d.ts.map +1 -1
  73. package/dist/navigation/tabs/state/link/tab_link.js +20 -17
  74. package/dist/navigation/tabs/state/link/tab_link.js.map +1 -1
  75. package/dist/navigation/tabs/state/tab.d.ts.map +1 -1
  76. package/dist/navigation/tabs/state/tab.js +8 -3
  77. package/dist/navigation/tabs/state/tab.js.map +1 -1
  78. package/dist/rail.css +1 -0
  79. package/dist/scaffold.css +1 -1
  80. package/dist/{showcase-DK557szS.js → showcase-y9D3_Y8T.js} +3413 -3396
  81. package/dist/showcase-y9D3_Y8T.js.map +1 -0
  82. package/dist/side.css +1 -0
  83. package/dist/stacks/box/box.d.ts +2 -2
  84. package/dist/stacks/box/box.d.ts.map +1 -1
  85. package/dist/stacks/box/box.js.map +1 -1
  86. package/dist/stacks/story_components/style_box.d.ts +1 -1
  87. package/dist/stacks/story_components/style_box.d.ts.map +1 -1
  88. package/dist/surfaces/alert/alert.js +3 -2
  89. package/dist/surfaces/alert/alert.js.map +1 -1
  90. package/dist/surfaces/pop_confirm/pop_confirm.js +13 -2
  91. package/dist/surfaces/pop_confirm/pop_confirm.js.map +1 -1
  92. package/dist/{syntaxhighlighter-ED5Y7EFY-DaMS-2cF.js → syntaxhighlighter-ED5Y7EFY-CqInEOwQ.js} +2 -2
  93. package/dist/{syntaxhighlighter-ED5Y7EFY-DaMS-2cF.js.map → syntaxhighlighter-ED5Y7EFY-CqInEOwQ.js.map} +1 -1
  94. package/dist/table.css +1 -0
  95. package/dist/table.module-BtSxOntS.js +5 -0
  96. package/dist/table.module-BtSxOntS.js.map +1 -0
  97. package/dist/themes/themes/ergo/ergo_theme.css +1 -1
  98. package/dist/themes/themes/ergo/ergo_theme.js +179 -44
  99. package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
  100. package/dist/utility_strip.css +1 -0
  101. package/package.json +2 -2
  102. package/src/actions/index.ts +1 -0
  103. package/src/form/field_presenters/field_presenter.ts +3 -3
  104. package/src/layouts/__stories__/composed.stories.tsx +113 -0
  105. package/src/layouts/__stories__/composed_stories.module.css +142 -0
  106. package/src/layouts/__stories__/utils.tsx +174 -0
  107. package/src/layouts/body/body.module.css +11 -0
  108. package/src/layouts/body/body.tsx +23 -0
  109. package/src/layouts/index.ts +10 -0
  110. package/src/layouts/rail/__stories__/rail.stories.tsx +64 -0
  111. package/src/layouts/rail/__stories__/rail_stories.module.css +25 -0
  112. package/src/layouts/rail/main/main.module.css +7 -0
  113. package/src/layouts/rail/main/main.tsx +26 -0
  114. package/src/layouts/rail/rail.module.css +10 -0
  115. package/src/layouts/rail/rail.tsx +62 -0
  116. package/src/layouts/rail/side/side.module.css +8 -0
  117. package/src/layouts/rail/side/side.tsx +25 -0
  118. package/src/layouts/rail/utility_strip/utility_strip.module.css +6 -0
  119. package/src/layouts/rail/utility_strip/utility_strip.tsx +40 -0
  120. package/src/layouts/scaffold/__stories__/scaffold.stories.tsx +53 -0
  121. package/src/layouts/scaffold/__stories__/scaffold_stories.module.css +31 -0
  122. package/src/layouts/scaffold/scaffold.module.css +4 -0
  123. package/src/layouts/table/__stories__/mock_data.ts +420 -0
  124. package/src/layouts/table/__stories__/table.stories.tsx +326 -0
  125. package/src/layouts/table/__stories__/table_stories.module.css +30 -0
  126. package/src/layouts/table/table.module.css +37 -0
  127. package/src/layouts/table/table.tsx +132 -0
  128. package/src/navigation/tabs/primitives/tabs_list.tsx +46 -2
  129. package/src/navigation/tabs/state/link/tab_link.tsx +4 -1
  130. package/src/navigation/tabs/state/tab.tsx +10 -0
  131. package/src/stacks/box/box.tsx +1 -1
  132. package/src/surfaces/modal/__stories__/modal.stories.tsx +5 -5
  133. package/src/surfaces/panel/__stories__/panel.stories.tsx +114 -1
  134. package/src/surfaces/pop_confirm/pop_confirm.stories.tsx +4 -2
  135. package/src/themes/themes/ergo/ergo_theme.css +178 -43
  136. package/dist/formatter-EIJCOSYU-D6nmx63h.js +0 -6
  137. package/dist/showcase-DK557szS.js.map +0 -1
package/dist/table.css ADDED
@@ -0,0 +1 @@
1
+ @layer tcn-system{:where(._table_57e61e9){overflow:auto;width:100%;height:auto}:where(._table_57e61e9[data-is-sticky=true]) th:first-of-type{position:sticky;left:0;z-index:2}:where(._table_57e61e9[data-is-sticky=true]) th:last-of-type{position:sticky;right:0;z-index:2}:where(._table_57e61e9[data-is-sticky=true]) thead:first-of-type{position:sticky;top:0;z-index:3}:where(._table_57e61e9[data-is-sticky=true]) tfoot:first-of-type{position:sticky;bottom:0;z-index:3}:where(._tcn-th_bc5ca58[data-should-fill=true]){width:auto}}
package/dist/table.module-BtSxOntS.js ADDED
@@ -0,0 +1,5 @@
1
+ import './table.css';const t = "_table_57e61e9", c = "_tcn-th_bc5ca58", s = { table: t, "tcn-th": c };
2
+ export {
3
+ s
4
+ };
5
+ //# sourceMappingURL=table.module-BtSxOntS.js.map
package/dist/table.module-BtSxOntS.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"table.module-BtSxOntS.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
package/dist/themes/themes/ergo/ergo_theme.css CHANGED
@@ -1 +1 @@
1
- @layer tcn-reset{*{position:relative;box-sizing:border-box}}@layer tcn-theme{:root{--ergo-primary: #ce6b2b;--ergo-secondary: #669eb4;--ergo-secondary-light: #ecf4fb;--ergo-secondary-dark: #497485;--ergo-tertiary: #dfd7cd;--ergo-tertiary-light: #f9f4ed;--ergo-tertiary-dark: #7e6c5d;--ergo-white: #ffffff;--ergo-accent-blue: #395578;--ergo-accent-blue-light: #f3f4f6;--ergo-accent-green: #97bba3;--ergo-accent-green-light: #eef8ef;--ergo-accent-green-dark: #4f785c;--ergo-accent-yellow: #dbc97e;--ergo-accent-yellow-light: #fef9e7;--ergo-grey: #aaaaaa;--ergo-grey-light: #d3d3d3;--ergo-grey-dark: #808080;--ergo-status-red: #ff6565;--ergo-status-red-dark: #c24848;--ergo-status-yellow: #ffd439;--ergo-status-yellow-dark: #dbb735;--ergo-status-blue: var(--ergo-secondary);--ergo-status-blue-dark: var(--ergo-secondary-dark);--ergo-status-green: #3fbc6a;--ergo-status-green-dark: #2d904f;--ergo-ink-primary: var(--ergo-accent-blue);--ergo-ink-inverse: var(--ergo-white);--scalar: 1;--accent-color: var(--ergo-primary);--font-color: var(--ergo-ink-primary);--font-family: "Lato", sans-serif;--font-size: 12px;--gap-small: 4px;--gap-medium: 8px;--gap-large: 16px;--padding-small: 4px;--padding-medium: 8px;--padding-large: 16px;--status-color-disabled: var(--ergo-grey-light);--status-color-info: var(--ergo-status-blue);--status-color-warning: var(--ergo-status-yellow);--status-color-positive: var(--ergo-status-green);--status-color-error: var(--ergo-status-red);--async-color-initial: var(--ergo-grey-main);--async-color-pending: var(--ergo-status-blue);--async-color-success: var(--ergo-status-green);--async-color-failed: var(--ergo-status-red);--action-severity-dangerous: var(--ergo-status-red);--action-severity-cautious: var(--ergo-status-yellow);--action-severity-neutral: var(--ergo-primary);--action-severity-suggested: var(--ergo-status-blue);--action-severity-encouraged: var(--ergo-status-green);--shape-radius-small: 2px;--shape-radius-medium: 4px;--shape-radius-large: 8px;--primary-color-faint: #c0c0c0;--primary-color: #008cff;--primary-color-strong: #008cff;--secondary-color-faint: #c0c0c0;--secondary-color: #008cff;--secondary-color-strong: #008cff;--tertiary-color-faint: #c0c0c0;--tertiary-color: #008cff;--tertiary-color-strong: #008cff;--quaternary-color-faint: #c0c0c0;--quaternary-color: #008cff;--quaternary-color-strong: #008cff;--background-color-primary: #ffffff;--background-color-secondary: #ffffff;--background-color-tertiary: #ffffff;--background-color-quaternary: #ffffff;--foreground-color-primary: #aaa;--foreground-color-secondary: #222222;--foreground-color-tertiary: #222222;--foreground-color-quaternary: #222222;--material-disabled: var(--ergo-grey-light);--on-material-disabled: var(--ergo-ink-inverse);--ink-disabled: var(--ergo-grey-light);--material-line: var(--ergo-grey);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-theme-root{font-family:var(--font-family);color:var(--font-color);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-interactive{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .1s,background .1s,color .1s;--ink: var(--on-material);--act: var(--action);--mat: var(--material);--act-down: color-mix(in srgb, var(--mat), black 12%);--act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);--act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);--act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);background:var(--mat);color:var(--ink);transition:background .1s,color .1s}.tcn-interactive:focus-visible,.tcn-interactive[data-focus-visible]{background:var(--act-focus);outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-interactive:hover,.tcn-interactive[data-hover]{background:var(--act-raised)}.tcn-interactive:active,.tcn-interactive[data-active]{background:var(--act-down)}.tcn-interactive[data-is-disabled=true]{pointer-events:none}.tcn-base-button{--btn-size-base: 26px;--btn-pad-base: 12px;--btn-pad-delta: 4px;--btn-size-delta: 4px;--btn-step: 1;--btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));--btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));border-radius:var(--shape-radius-medium);min-height:var(--btn-size);padding:var(--padding-small) var(--btn-pad)}.tcn-base-button[data-size=sm]{--btn-step: -1}.tcn-base-button[data-size=md]{--btn-step: 0}.tcn-base-button[data-size=lg]{--btn-step: 1}.tcn-base-button[data-is-utility=true]{height:auto;width:auto;min-width:var(--btn-size);padding:0;--util-ratio: .75;--btn-size-base: 18px}.tcn-base-button[data-is-utility=true] .tcn-icon{min-height:min(2px,calc(var(--btn-size) * var(--util-ratio)));min-width:min(2px,calc(var(--btn-size) * var(--util-ratio)))}.tcn-button{--btn-primary: var(--action);--btn-on-primary: var(--on-action);--btn-variant: var(--on-material);transition:box-shadow .1s,transform .1s}.tcn-button[data-severity=dangerous]{--btn-primary: var(--action-severity-dangerous);--btn-variant: var(--ergo-status-red-dark)}.tcn-button[data-severity=cautious]{--btn-primary: var(--action-severity-cautious);--btn-on-primary: var(--ergo-accent-blue);--btn-variant: var(--ergo-status-yellow-dark)}.tcn-button[data-severity=suggested]{--btn-primary: var(--action-severity-suggested);--btn-variant: var(--ergo-status-blue-dark)}.tcn-button[data-severity=encouraged]{--btn-primary: var(--action-severity-encouraged);--btn-variant: var(--ergo-status-green-dark)}.tcn-button[data-hierarchy=primary]{--act: var(--ergo-white);--ink: var(--tcn-button-text-color, var(--btn-on-primary));--mat: var(--tcn-button-color, var(--btn-primary))}.tcn-button[data-hierarchy=primary][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary]{--act: var(--tcn-button-color, var(--btn-variant));--ink: var(--tcn-button-color, var(--btn-variant))}:is(.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary])[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-button[data-hierarchy=tertiary]:hover{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:1px;text-underline-offset:4px}.tcn-button[data-hierarchy=tertiary]{border:1px solid transparent}.tcn-button[data-hierarchy=secondary]{border:1px solid var(--ink)}.tcn-button[data-hierarchy=primary]{border:1px solid var(--mat)}.tcn-button:hover,.tcn-button[data-hover]{transform:translateY(-1px);box-shadow:0 4px 4px #0000001f}:is(.tcn-button:hover,.tcn-button[data-hover]):before,:is(.tcn-button:hover,.tcn-button[data-hover]):after{content:"";position:absolute;left:0;right:0;height:4px}:is(.tcn-button:hover,.tcn-button[data-hover]):before{top:-2px}:is(.tcn-button:hover,.tcn-button[data-hover]):after{bottom:-2px}.tcn-button:active,.tcn-button[data-active]{transform:translateY(1px);box-shadow:inset 0 2px 2px #0000001f}.tcn-slim-button{height:auto;width:auto;padding:0}.tcn-slim-button[data-size=sm]{min-height:12px;min-width:12px;padding:0}.tcn-slim-button[data-size=sm] .tcn-icon{min-height:10px;min-width:10px}.tcn-slim-button[data-size=md]{min-height:18px;min-width:18px;padding:0}.tcn-slim-button[data-size=md] .tcn-icon{min-height:14px;min-width:14px}.tcn-slim-button[data-size=lg]{min-height:24px;min-width:24px;padding:0}.tcn-slim-button[data-size=lg] .tcn-icon{min-height:20px;min-width:20px}.tcn-button[data-size].tcn-select{padding-inline-end:26px}.tcn-toggle{--tgl-false: var(--ergo-accent-blue);--tgl-true: var(--ergo-accent-blue);--on-tgl-true: var(--ergo-white);--ink: var(--tcn-button-color, var(--tgl-false));--act: var(--tcn-button-color, var(--tgl-false))}.tcn-toggle[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-toggle[data-is-selected=true]{--mat: var(--tcn-button-color, var(--tgl-true));--ink: var(--tcn-button-text-color, var(--ergo-white));--act: var(--ergo-white)}.tcn-toggle[data-is-selected=true][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-button-group .tcn-button-group-button:hover,.tcn-button-group .tcn-button-group-button:active{transform:none}.tcn-button-group .tcn-button-group-button{border-radius:0}.tcn-button-group .tcn-button-group-button:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]{border:0}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:last-child){border-right:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:first-child){border-left:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:last-child){border-right:1px solid var(--act-down)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:first-child){border-left:1px solid var(--act-down)}.tcn-select-group .tcn-select-group-option:hover,.tcn-select-group .tcn-select-group-option:active{transform:none}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]{color:var(--act);border-color:var(--act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:hover{background:var(--act-faint)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:active{background:var(--act-down);color:var(--on-act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary][data-is-disabled=true]{color:var(--material-disabled);border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option[data-hierarchy=primary][data-is-disabled=true]{background:var(--material-disabled);color:#fff;border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option{border-radius:0}.tcn-select-group .tcn-select-group-option:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-select-group .tcn-select-group-option:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-tabs-bar .tcn-tabs-list .tcn-tab-item{min-height:24px;padding:0px var(--padding-medium);text-decoration:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item{box-sizing:border-box;border:none;padding:0px var(--padding-medium);border-radius:0}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=true]{--mat: var(--tcn-button-color, var(--material));--ink: var(--tcn-button-text-color, var(--ergo-primary));--act: var(--ergo-primary)}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:hover:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ergo-accent-blue);pointer-events:none;width:100%;z-index:3}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list:after{content:"";position:absolute;bottom:-1px;left:0;min-height:2px;transform:translate(var(--tabs-active-rectangle-position-x, 0));width:var(--tabs-active-rectangle-width, 0);background:var(--ergo-primary);pointer-events:none;border-bottom-left-radius:2px;border-bottom-right-radius:2px;transition:transform .3s ease-in-out,width .3s ease-in-out;will-change:transform,width;z-index:2}.tcn-tabs-bar[data-variant=default]:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--material-line);pointer-events:none;z-index:1}.tcn-tabs-bar[data-variant=inline]{min-width:min-content;width:auto;flex-grow:0;border-radius:var(--shape-radius-medium);border:1px solid var(--on-material)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list{gap:var(--gap-small);padding:var(--padding-small)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list .tcn-tab-item{border-radius:var(--shape-radius-medium)}.material{background-color:var(--material);color:var(--on-material)}.tcn-draggable[data-is-draggable=true] .tcn-drag-handle{cursor:move}.tcn-frame[data-is-veil=true]{background-color:#00000080}.tcn-tooltip{background:#395578d9;box-shadow:0 4px 7px #414141a8;color:#fff;border-radius:var(--shape-radius-medium);padding:var(--padding-medium)}.tcn-list{gap:var(--gap-medium)}.tcn-list .tcn-item{height:24px;padding:0px var(--padding-medium);border-radius:var(--shape-radius-medium)}.tcn-scaffold{--scaffold-v-inset: var(--v-inset, var(--padding-large));--scaffold-header-size: var(--header-size, 40px);--scaffold-footer-size: var(--footer-size, 40px);--scaffold-utility-bar-size: var(--utility-bar-size, 32px);--scaffold-divide-footer: var(--divide-footer, 1);--scaffold-divide-header: var(--divide-header, 1)}.tcn-scaffold :where(.tcn-header){min-height:var(--scaffold-header-size);padding:0 var(--scaffold-v-inset);gap:var(--gap-medium)}.tcn-scaffold :where(.tcn-header)+:where(.tcn-body),.tcn-scaffold :where(.tcn-utility-bar)+:where(.tcn-body){border-top:calc(var(--scaffold-divide-header) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-body)+:where(.tcn-footer){border-top:calc(var(--scaffold-divide-footer) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-utility-bar){min-height:var(--scaffold-utility-bar-size);padding:0 var(--scaffold-v-inset);gap:var(--gap-medium)}.tcn-scaffold :where(.tcn-body){--section-tab-start: var(--scaffold-v-inset);gap:var(--gap-medium)}.tcn-scaffold :where(.tcn-body) .tcn-section{--section-tab-start: var(--scaffold-v-inset)}.tcn-scaffold :where(.tcn-footer){gap:var(--gap-medium);min-height:var(--scaffold-footer-size);padding:0 var(--scaffold-v-inset)}.tcn-frame-veil[data-is-veil=true]{background-color:#00000080}.tcn-modal{--divide-header: 0}.tcn-modal :where(.tcn-scaffold){border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:1px solid var(--foreground-color-primary)}.tcn-modal :where(.tcn-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-modal :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-window{--divide-header: 0}.tcn-window :where(.tcn-scaffold){box-shadow:0 4px 34px #00000096;border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:2px solid white}.tcn-window :where(.tcn-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-window :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-pop-confirm{--divide-header: 0;--v-inset: var(--padding-medium)}.tcn-pop-confirm :where(.tcn-scaffold){box-shadow:0 4px 8px #0006;border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden}.tcn-pop-confirm :where(.tcn-header){min-height:32px;--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-pop-confirm :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-confirm{background-color:var(--background-color-primary)}.tcn-panel{background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);overflow:hidden}.tcn-card{--header-size: 32px;--footer-size: 32px;--utility-bar-size: 24px;--divide-header: 0;background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);border:1px solid var(--foreground-color-primary);overflow:hidden}.tcn-card :where(.tcn-header){min-height:32px;--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-secondary);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-card :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-section{--max-section-depth: 4;--section-tab-width: 4px;--section-tab-start: 8px;--section-tab-depth: 0;--section-tab: calc( var(--section-tab-start) + (var(--section-tab-width) * var(--section-tab-depth)) );--section-action: var(--ergo-secondary);--section-mat: var(--ergo-secondary-light);--section-on-mat: var(--ergo-ink-primary)}.tcn-heading{background-color:#f1f1f1;padding-inline-start:8px;height:30px;z-index:5}.tcn-section>.tcn-heading{z-index:calc(var(--max-section-depth) - var(--section-tab-depth));padding-inline-start:var(--section-tab);--material: var(--section-mat);--on-material: var(--section-on-mat);--action: var(--section-action);background-color:var(--material);color:var(--on-material);gap:var(--gap-small)}.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:var(--section-tab)}.tcn-section>.tcn-section{--section-tab-depth: 1;--section-mat: var(--ergo-accent-blue-light);--section-action: var(--ergo-accent-blue)}.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 2;--section-mat: var(--ergo-accent-green-light);--section-action: var(--ergo-accent-green-dark)}.tcn-section>.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 3;--section-mat: var(--ergo-tertiary-light);--section-action: var(--ergo-tertiary-dark)}.tcn-caret{--caret-size: 12px;--caret-triangle-height: calc(var(--caret-size) / 2);--caret-triangle-width: var(--caret-size);--caret-triangle-base: var(--caret-triangle-height) solid transparent;--caret-triangle-peak: var(--caret-triangle-width) solid var(--material);width:0;height:0;flex-grow:0;display:inline-block}.tcn-caret[data-direction=top]{border-bottom:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=bottom]{border-top:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=start]{border-right:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}.tcn-caret[data-direction=end]{border-left:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}}
1
+ @layer tcn-theme{:root{--ergo-primary: #ce6b2b;--ergo-secondary: #669eb4;--ergo-secondary-light: #ecf4fb;--ergo-secondary-dark: #497485;--ergo-tertiary: #dfd7cd;--ergo-tertiary-light: #f9f4ed;--ergo-tertiary-dark: #7e6c5d;--ergo-white: #ffffff;--ergo-accent-blue: #395578;--ergo-accent-blue-light: #f3f4f6;--ergo-accent-green: #97bba3;--ergo-accent-green-light: #eef8ef;--ergo-accent-green-dark: #4f785c;--ergo-accent-yellow: #dbc97e;--ergo-accent-yellow-light: #fef9e7;--ergo-grey: #aaaaaa;--ergo-grey-light: #d3d3d3;--ergo-grey-dark: #808080;--ergo-status-red: #ff6565;--ergo-status-red-dark: #c24848;--ergo-status-yellow: #ffd439;--ergo-status-yellow-dark: #dbb735;--ergo-status-blue: var(--ergo-secondary);--ergo-status-blue-dark: var(--ergo-secondary-dark);--ergo-status-green: #3fbc6a;--ergo-status-green-dark: #2d904f;--ergo-ink-primary: var(--ergo-accent-blue);--ergo-ink-inverse: var(--ergo-white);--scalar: 1;--accent-color: var(--ergo-primary);--font-color: var(--ergo-ink-primary);--font-family: "Lato", sans-serif;--font-size: 12px;--gap-small: 4px;--gap-medium: 8px;--gap-large: 16px;--padding-small: 4px;--padding-medium: 8px;--padding-large: 16px;--bar-xs: 16px;--bar-sm: 24px;--bar-md: 32px;--bar-lg: 40px;--bar-xl: 48px;--status-color-disabled: var(--ergo-grey-light);--status-color-info: var(--ergo-status-blue);--status-color-warning: var(--ergo-status-yellow);--status-color-positive: var(--ergo-status-green);--status-color-error: var(--ergo-status-red);--async-color-initial: var(--ergo-grey);--async-color-pending: var(--ergo-status-blue);--async-color-success: var(--ergo-status-green);--async-color-failed: var(--ergo-status-red);--action-severity-dangerous: var(--ergo-status-red);--action-severity-cautious: var(--ergo-status-yellow);--action-severity-neutral: var(--ergo-primary);--action-severity-suggested: var(--ergo-status-blue);--action-severity-encouraged: var(--ergo-status-green);--shape-radius-small: 2px;--shape-radius-medium: 4px;--shape-radius-large: 8px;--primary-color-faint: #c0c0c0;--primary-color: #008cff;--primary-color-strong: #008cff;--secondary-color-faint: #c0c0c0;--secondary-color: #008cff;--secondary-color-strong: #008cff;--tertiary-color-faint: #c0c0c0;--tertiary-color: #008cff;--tertiary-color-strong: #008cff;--quaternary-color-faint: #c0c0c0;--quaternary-color: #008cff;--quaternary-color-strong: #008cff;--background-color-primary: #ffffff;--background-color-secondary: #ffffff;--background-color-tertiary: #ffffff;--background-color-quaternary: #ffffff;--foreground-color-primary: #aaa;--foreground-color-secondary: #222222;--foreground-color-tertiary: #222222;--foreground-color-quaternary: #222222;--material-disabled: var(--ergo-grey-light);--on-material-disabled: var(--ergo-ink-inverse);--ink-disabled: var(--ergo-grey-light);--material-line: var(--ergo-grey);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-theme-root{font-family:var(--font-family);color:var(--font-color);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-interactive{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .1s,background .1s,color .1s;--ink: var(--on-material);--act: var(--action);--mat: var(--material);--act-down: color-mix(in srgb, var(--mat), black 12%);--act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);--act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);--act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);background:var(--mat);color:var(--ink);transition:background .1s,color .1s}.tcn-interactive:focus-visible,.tcn-interactive[data-focus-visible]{background:var(--act-focus);outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-interactive:hover,.tcn-interactive[data-hover]{background:var(--act-raised)}.tcn-interactive:active,.tcn-interactive[data-active]{background:var(--act-down)}.tcn-interactive[data-is-disabled=true]{pointer-events:none}.tcn-base-button{--btn-size-base: 26px;--btn-pad-base: 12px;--btn-pad-delta: 4px;--btn-size-delta: 4px;--btn-font-size-delta: 2px;--btn-step: 1;--btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));--btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));border-radius:var(--shape-radius-medium);min-height:var(--btn-size);padding:var(--padding-small) var(--btn-pad)}.tcn-base-button[data-size=sm]{--btn-step: -1}.tcn-base-button[data-size=md]{--btn-step: 0}.tcn-base-button[data-size=lg]{--btn-step: 1}.tcn-base-button[data-is-utility=true]{height:auto;width:auto;min-width:var(--btn-size);padding:0;--util-ratio: .75;--btn-size-base: 18px;font-size:calc(var(--font-size) + var(--btn-font-size-delta) * var(--btn-step))}.tcn-base-button[data-is-utility=true] .tcn-icon{min-height:min(2px,calc(var(--btn-size) * var(--util-ratio)));min-width:min(2px,calc(var(--btn-size) * var(--util-ratio)))}.tcn-button{--btn-primary: var(--action);--btn-on-primary: var(--on-action);--btn-variant: var(--on-material);transition:box-shadow .1s,transform .1s}.tcn-button[data-severity=dangerous]{--btn-primary: var(--action-severity-dangerous);--btn-variant: var(--ergo-status-red-dark)}.tcn-button[data-severity=cautious]{--btn-primary: var(--action-severity-cautious);--btn-on-primary: var(--ergo-accent-blue);--btn-variant: var(--ergo-status-yellow-dark)}.tcn-button[data-severity=suggested]{--btn-primary: var(--action-severity-suggested);--btn-variant: var(--ergo-status-blue-dark)}.tcn-button[data-severity=encouraged]{--btn-primary: var(--action-severity-encouraged);--btn-variant: var(--ergo-status-green-dark)}.tcn-button[data-hierarchy=primary]{--act: var(--ergo-white);--ink: var(--tcn-button-text-color, var(--btn-on-primary));--mat: var(--tcn-button-color, var(--btn-primary))}.tcn-button[data-hierarchy=primary][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary]{--act: var(--tcn-button-color, var(--btn-variant));--ink: var(--tcn-button-color, var(--btn-variant))}:is(.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary])[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-button[data-hierarchy=tertiary]:hover{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:1px;text-underline-offset:4px}.tcn-button[data-hierarchy=tertiary]{border:1px solid transparent}.tcn-button[data-hierarchy=secondary]{border:1px solid var(--ink)}.tcn-button[data-hierarchy=primary]{border:1px solid var(--mat)}.tcn-button:hover,.tcn-button[data-hover]{transform:translateY(-1px);box-shadow:0 4px 4px #0000001f}:is(.tcn-button:hover,.tcn-button[data-hover]):before,:is(.tcn-button:hover,.tcn-button[data-hover]):after{content:"";position:absolute;left:0;right:0;height:4px}:is(.tcn-button:hover,.tcn-button[data-hover]):before{top:-2px}:is(.tcn-button:hover,.tcn-button[data-hover]):after{bottom:-2px}.tcn-button:active,.tcn-button[data-active]{transform:translateY(1px);box-shadow:inset 0 2px 2px #0000001f}.tcn-slim-button{height:auto;width:auto;padding:0}.tcn-slim-button[data-size=sm]{min-height:12px;min-width:12px;padding:0}.tcn-slim-button[data-size=sm] .tcn-icon{min-height:10px;min-width:10px}.tcn-slim-button[data-size=md]{min-height:18px;min-width:18px;padding:0}.tcn-slim-button[data-size=md] .tcn-icon{min-height:14px;min-width:14px}.tcn-slim-button[data-size=lg]{min-height:24px;min-width:24px;padding:0}.tcn-slim-button[data-size=lg] .tcn-icon{min-height:20px;min-width:20px}.tcn-button[data-size].tcn-select{padding-inline-end:26px}.tcn-toggle{--tgl-false: var(--ergo-accent-blue);--tgl-true: var(--ergo-accent-blue);--on-tgl-true: var(--ergo-white);--ink: var(--tcn-button-color, var(--tgl-false));--act: var(--tcn-button-color, var(--tgl-false))}.tcn-toggle[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-toggle[data-is-selected=true]{--mat: var(--tcn-button-color, var(--tgl-true));--ink: var(--tcn-button-text-color, var(--ergo-white));--act: var(--ergo-white)}.tcn-toggle[data-is-selected=true][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-button-group .tcn-button-group-button:hover,.tcn-button-group .tcn-button-group-button:active{transform:none}.tcn-button-group .tcn-button-group-button{border-radius:0}.tcn-button-group .tcn-button-group-button:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]{border:0}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:last-child){border-right:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:first-child){border-left:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:last-child){border-right:1px solid var(--act-down)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:first-child){border-left:1px solid var(--act-down)}.tcn-select-group .tcn-select-group-option:hover,.tcn-select-group .tcn-select-group-option:active{transform:none}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]{color:var(--act);border-color:var(--act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:hover{background:var(--act-faint)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:active{background:var(--act-down);color:var(--on-act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary][data-is-disabled=true]{color:var(--material-disabled);border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option[data-hierarchy=primary][data-is-disabled=true]{background:var(--material-disabled);color:#fff;border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option{border-radius:0}.tcn-select-group .tcn-select-group-option:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-select-group .tcn-select-group-option:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-tabs-bar .tcn-tabs-list .tcn-tab-item{min-height:24px;padding:0px var(--padding-medium);text-decoration:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item{box-sizing:border-box;border:none;padding:0px var(--padding-medium);border-radius:0}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=true]{--mat: var(--tcn-button-color, var(--material));--ink: var(--tcn-button-text-color, var(--ergo-primary));--act: var(--ergo-primary)}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item:focus-visible{z-index:2}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:hover:after,.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:focus-visible:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ergo-accent-blue);pointer-events:none;width:100%;z-index:3}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list:after{content:"";position:absolute;bottom:-1px;left:0;min-height:2px;transform:translate(var(--tabs-active-rectangle-position-x, 0));width:var(--tabs-active-rectangle-width, 0);background:var(--ergo-primary);pointer-events:none;border-bottom-left-radius:2px;border-bottom-right-radius:2px;transition:transform .3s ease-in-out,width .3s ease-in-out;will-change:transform,width;z-index:2}.tcn-tabs-bar[data-variant=default]:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--material-line);pointer-events:none;z-index:1}.tcn-tabs-bar[data-variant=inline]{min-width:min-content;width:auto;flex-grow:0;border-radius:var(--shape-radius-medium);border:1px solid var(--on-material)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list{gap:var(--gap-small);padding:var(--padding-small)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list .tcn-tab-item{border-radius:var(--shape-radius-medium)}.material{background-color:var(--material);color:var(--on-material)}.tcn-draggable[data-is-draggable=true] .tcn-drag-handle{cursor:move}.tcn-frame[data-is-veil=true]{background-color:#00000080}.tcn-tooltip{background:#395578d9;box-shadow:0 4px 7px #414141a8;color:#fff;border-radius:var(--shape-radius-medium);padding:var(--padding-medium)}.tcn-list{gap:var(--gap-medium)}.tcn-list .tcn-item{height:24px;padding:0px var(--padding-medium);border-radius:var(--shape-radius-medium)}.tcn-footer,.tcn-header,.tcn-utility-bar{padding-inline:var(--pad-inline, var(--padding-medium));gap:var(--gap-medium)}.tcn-utility-bar{min-height:var(--bar-md)}.tcn-footer,.tcn-header{min-height:var(--bar-lg)}.tcn-scaffold{--scaffold-divide-footer: var(--divide-footer, 1);--scaffold-divide-header: var(--divide-header, 1);--pad-inline: var(--padding-large)}.tcn-scaffold :where(.tcn-header)+:where(.tcn-body),.tcn-scaffold :where(.tcn-utility-bar)+:where(.tcn-body){border-top:calc(var(--scaffold-divide-header) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-body)+:where(.tcn-footer){border-top:calc(var(--scaffold-divide-footer) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-body){gap:var(--gap-medium)}.tcn-frame-veil[data-is-veil=true]{background-color:#00000080}.tcn-modal{--divide-header: 0}.tcn-modal :where(.tcn-scaffold){border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:1px solid var(--foreground-color-primary)}.tcn-modal :where(.tcn-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-modal :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-window{--divide-header: 0}.tcn-window :where(.tcn-scaffold){box-shadow:0 4px 34px #00000096;border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:2px solid white}.tcn-window :where(.tcn-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-window :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-pop-confirm{--divide-header: 0}.tcn-pop-confirm :where(.tcn-scaffold){--pad-inline: var(--padding-medium);box-shadow:0 4px 8px #0006;border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden}.tcn-pop-confirm :where(.tcn-header){min-height:var(--bar-md);--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-pop-confirm :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-confirm{background-color:var(--background-color-primary)}.tcn-panel{background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);overflow:hidden}.tcn-card{--divide-header: 0;background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);border:1px solid var(--foreground-color-primary);overflow:hidden}.tcn-card :where(.tcn-header){min-height:var(--bar-md);--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-secondary);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-card :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-card :where(.tcn-utility-bar){min-height:var(--bar-sm)}.tcn-section{--max-section-depth: 4;--section-tab-width: 4px;--section-tab-start: var(--pad-inline, var(--padding-medium));--section-tab-depth: 0;--section-tab: calc( var(--section-tab-start) + (var(--section-tab-width) * var(--section-tab-depth)) );--section-action: var(--ergo-secondary);--section-mat: var(--ergo-secondary-light);--section-on-mat: var(--ergo-ink-primary)}.tcn-heading{background-color:#f1f1f1;padding-inline-start:8px;height:30px;z-index:5}.tcn-section>.tcn-heading{z-index:calc(var(--max-section-depth) - var(--section-tab-depth));padding-inline-start:var(--section-tab);--material: var(--section-mat);--on-material: var(--section-on-mat);--action: var(--section-action);background-color:var(--material);color:var(--on-material);gap:var(--gap-small)}.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:var(--section-tab)}.tcn-section>.tcn-section{--section-tab-depth: 1;--section-mat: var(--ergo-accent-blue-light);--section-action: var(--ergo-accent-blue)}.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 2;--section-mat: var(--ergo-accent-green-light);--section-action: var(--ergo-accent-green-dark)}.tcn-section>.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 3;--section-mat: var(--ergo-tertiary-light);--section-action: var(--ergo-tertiary-dark)}.tcn-caret{--caret-size: 12px;--caret-triangle-height: calc(var(--caret-size) / 2);--caret-triangle-width: var(--caret-size);--caret-triangle-base: var(--caret-triangle-height) solid transparent;--caret-triangle-peak: var(--caret-triangle-width) solid var(--material);width:0;height:0;flex-grow:0;display:inline-block}.tcn-caret[data-direction=top]{border-bottom:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=bottom]{border-top:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=start]{border-right:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}.tcn-caret[data-direction=end]{border-left:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}.tcn-table{--table-pad-inline: var(--pad-inline, var(--padding-medium));--material: var(--ergo-white);--on-material: var(--ergo-ink-primary);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material);border-collapse:separate;display:block}:is(.tcn-table[data-is-sticky=true] .tcn-tbody,.tcn-table[data-is-sticky=true] .tcn-thead) th:first-of-type{border-right:1px solid color-mix(in srgb,var(--material) 80%,black)}:is(.tcn-table[data-is-sticky=true] .tcn-tbody,.tcn-table[data-is-sticky=true] .tcn-thead) th:last-of-type{border-left:1px solid color-mix(in srgb,var(--material) 80%,black)}.tcn-td{text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tcn-thead .tcn-tr{height:var(--bar-md)}.tcn-thead .tcn-tr .tcn-th{border-bottom:1px solid var(--ergo-grey-light)}.tcn-thead .tcn-tr .tcn-th:not(:last-of-type):not(:nth-last-of-type(2)){border-right:1px solid var(--ergo-grey)}.tcn-thead .tcn-tr .tcn-th:last-of-type{border-left:1px solid var(--ergo-grey)}.tcn-tfoot{font-weight:700}.tcn-tfoot .tcn-tr{height:var(--bar-sm)}.tcn-tfoot .tcn-tr .tcn-th,.tcn-tfoot .tcn-tr .tcn-td{border-top:1px solid var(--ergo-grey-light)}.tcn-thead,.tcn-tfoot{font-size:14px;--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-secondary);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-tr{height:var(--bar-sm);align-content:center}.tcn-td,.tcn-th{padding-inline:var(--padding-medium);vertical-align:middle;text-align:start;background:var(--material)}.tcn-table .tcn-tr>.tcn-th:first-child,.tcn-table .tcn-tr>.tcn-td:first-child{padding-inline-start:var(--table-pad-inline)}.tcn-table .tcn-tr>.tcn-th:last-child,.tcn-table .tcn-tr>.tcn-td:last-child{padding-inline-end:var(--table-pad-inline)}.tcn-tbody{font-size:12px}.tcn-tbody .tcn-tr:nth-of-type(2n){--material: var(--ergo-accent-blue-light)}.tcn-tbody .tcn-tr:nth-of-type(odd){--material: var(--ergo-white)}.tcn-tbody .tcn-tr:hover{--material: color-mix(in srgb, var(--ergo-accent-blue-light), var(--action) 12%)}.tcn-tbody .tcn-tr[data-is-selected=true]{--material: var(--ergo-secondary);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-accent-blue)}.tcn-tbody .tcn-tr{--material: var(--bg-row);--on-material: var(--ergo-accent-blue);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}}
package/dist/themes/themes/ergo/ergo_theme.js CHANGED
@@ -1,12 +1,5 @@
1
1
  import "@fontsource/lato";
2
- const n = `@layer tcn-reset {
3
- * {
4
- position: relative;
5
- box-sizing: border-box;
6
- }
7
- }
8
-
9
- @layer tcn-theme {
2
+ const n = `@layer tcn-theme {
10
3
  /* ===== CSS VARIABLES ===== */
11
4
  :root {
12
5
  /* ========== Ergo Brand Palette ========== */
@@ -64,6 +57,13 @@ const n = `@layer tcn-reset {
64
57
  --padding-medium: 8px;
65
58
  --padding-large: 16px;
66
59
 
60
+ /* Sizing */
61
+ --bar-xs: 16px;
62
+ --bar-sm: 24px;
63
+ --bar-md: 32px;
64
+ --bar-lg: 40px;
65
+ --bar-xl: 48px;
66
+
67
67
  /* Status Colors */
68
68
  --status-color-disabled: var(--ergo-grey-light);
69
69
  --status-color-info: var(--ergo-status-blue);
@@ -71,7 +71,7 @@ const n = `@layer tcn-reset {
71
71
  --status-color-positive: var(--ergo-status-green);
72
72
  --status-color-error: var(--ergo-status-red);
73
73
 
74
- --async-color-initial: var(--ergo-grey-main);
74
+ --async-color-initial: var(--ergo-grey);
75
75
  --async-color-pending: var(--ergo-status-blue);
76
76
  --async-color-success: var(--ergo-status-green);
77
77
  --async-color-failed: var(--ergo-status-red);
@@ -194,6 +194,7 @@ const n = `@layer tcn-reset {
194
194
 
195
195
  --btn-pad-delta: 4px;
196
196
  --btn-size-delta: 4px;
197
+ --btn-font-size-delta: 2px;
197
198
  --btn-step: 1;
198
199
 
199
200
  /* Increase size and pad by 4px for each size "step" from medium */
@@ -224,6 +225,7 @@ const n = `@layer tcn-reset {
224
225
  --util-ratio: 0.75;
225
226
  --btn-size-base: 18px;
226
227
 
228
+ font-size: calc(var(--font-size) + var(--btn-font-size-delta) * var(--btn-step));
227
229
  .tcn-icon {
228
230
  min-height: min(2px, calc(var(--btn-size) * var(--util-ratio)));
229
231
  min-width: min(2px, calc(var(--btn-size) * var(--util-ratio)));
@@ -500,8 +502,12 @@ const n = `@layer tcn-reset {
500
502
  --act: var(--ergo-primary);
501
503
  }
502
504
 
505
+ .tcn-tab-item:focus-visible {
506
+ z-index: 2;
507
+ }
503
508
  /* Hover Indicator */
504
- .tcn-tab-item[data-is-selected="false"]:hover::after {
509
+ .tcn-tab-item[data-is-selected="false"]:hover::after,
510
+ .tcn-tab-item[data-is-selected="false"]:focus-visible::after {
505
511
  content: "";
506
512
  display: block;
507
513
  position: absolute;
@@ -603,19 +609,26 @@ const n = `@layer tcn-reset {
603
609
  }
604
610
 
605
611
  /* Scaffold: */
612
+ .tcn-footer,
613
+ .tcn-header,
614
+ .tcn-utility-bar {
615
+ padding-inline: var(--pad-inline, var(--padding-medium));
616
+ gap: var(--gap-medium);
617
+ }
618
+
619
+ .tcn-utility-bar {
620
+ min-height: var(--bar-md);
621
+ }
622
+
623
+ .tcn-footer,
624
+ .tcn-header {
625
+ min-height: var(--bar-lg);
626
+ }
627
+
606
628
  .tcn-scaffold {
607
- --scaffold-v-inset: var(--v-inset, var(--padding-large));
608
- --scaffold-header-size: var(--header-size, 40px);
609
- --scaffold-footer-size: var(--footer-size, 40px);
610
- --scaffold-utility-bar-size: var(--utility-bar-size, 32px);
611
629
  --scaffold-divide-footer: var(--divide-footer, 1);
612
630
  --scaffold-divide-header: var(--divide-header, 1);
613
-
614
- :where(.tcn-header) {
615
- min-height: var(--scaffold-header-size);
616
- padding: 0 var(--scaffold-v-inset);
617
- gap: var(--gap-medium);
618
- }
631
+ --pad-inline: var(--padding-large);
619
632
 
620
633
  /* Border appears on body only when it follows header or utility-bar */
621
634
  :where(.tcn-header) + :where(.tcn-body),
@@ -630,25 +643,8 @@ const n = `@layer tcn-reset {
630
643
  var(--foreground-color-primary);
631
644
  }
632
645
 
633
- :where(.tcn-utility-bar) {
634
- min-height: var(--scaffold-utility-bar-size);
635
- padding: 0 var(--scaffold-v-inset);
636
- gap: var(--gap-medium);
637
- }
638
-
639
646
  :where(.tcn-body) {
640
- --section-tab-start: var(--scaffold-v-inset);
641
-
642
647
  gap: var(--gap-medium);
643
- .tcn-section {
644
- --section-tab-start: var(--scaffold-v-inset);
645
- }
646
- }
647
-
648
- :where(.tcn-footer) {
649
- gap: var(--gap-medium);
650
- min-height: var(--scaffold-footer-size);
651
- padding: 0 var(--scaffold-v-inset);
652
648
  }
653
649
  }
654
650
 
@@ -709,9 +705,10 @@ const n = `@layer tcn-reset {
709
705
 
710
706
  .tcn-pop-confirm {
711
707
  --divide-header: 0;
712
- --v-inset: var(--padding-medium);
713
708
 
714
709
  :where(.tcn-scaffold) {
710
+ --pad-inline: var(--padding-medium);
711
+
715
712
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);
716
713
  border-radius: var(--shape-radius-medium);
717
714
  background-color: var(--background-color-primary);
@@ -719,7 +716,7 @@ const n = `@layer tcn-reset {
719
716
  }
720
717
 
721
718
  :where(.tcn-header) {
722
- min-height: 32px;
719
+ min-height: var(--bar-md);
723
720
 
724
721
  --material: var(--ergo-secondary-dark);
725
722
  --on-material: var(--ergo-white);
@@ -747,9 +744,6 @@ const n = `@layer tcn-reset {
747
744
 
748
745
  /* Card */
749
746
  .tcn-card {
750
- --header-size: 32px;
751
- --footer-size: 32px;
752
- --utility-bar-size: 24px;
753
747
  --divide-header: 0;
754
748
 
755
749
  background-color: var(--background-color-primary);
@@ -758,7 +752,7 @@ const n = `@layer tcn-reset {
758
752
  overflow: hidden;
759
753
 
760
754
  :where(.tcn-header) {
761
- min-height: 32px;
755
+ min-height: var(--bar-md);
762
756
 
763
757
  --material: var(--ergo-secondary-light);
764
758
  --on-material: var(--ergo-accent-blue);
@@ -771,13 +765,17 @@ const n = `@layer tcn-reset {
771
765
  color: inherit;
772
766
  }
773
767
  }
768
+
769
+ :where(.tcn-utility-bar) {
770
+ min-height: var(--bar-sm);
771
+ }
774
772
  }
775
773
 
776
774
  /* SECTION */
777
775
  .tcn-section {
778
776
  --max-section-depth: 4;
779
777
  --section-tab-width: 4px;
780
- --section-tab-start: 8px;
778
+ --section-tab-start: var(--pad-inline, var(--padding-medium));
781
779
  --section-tab-depth: 0;
782
780
  --section-tab: calc(
783
781
  var(--section-tab-start) +
@@ -864,6 +862,143 @@ const n = `@layer tcn-reset {
864
862
  border-bottom: var(--caret-triangle-base);
865
863
  }
866
864
  }
865
+
866
+ /* ===== TABLE ===== */
867
+ .tcn-table {
868
+ --table-pad-inline: var(--pad-inline, var(--padding-medium));
869
+
870
+ --material: var(--ergo-white);
871
+ --on-material: var(--ergo-ink-primary);
872
+ --action: var(--ergo-accent-blue);
873
+ --on-action: var(--ergo-white);
874
+ background-color: var(--material);
875
+ color: var(--on-material);
876
+ border-collapse: separate;
877
+ display: block;
878
+ }
879
+
880
+ /* TODO: cleanup - this needs merged with ui-table sticky logic/styles */
881
+ .tcn-table[data-is-sticky="true"] {
882
+ .tcn-tbody {
883
+ th:first-of-type {
884
+ border-right: 1px solid color-mix(in srgb, var(--material) 80%, black);
885
+ }
886
+
887
+ th:last-of-type {
888
+ border-left: 1px solid color-mix(in srgb, var(--material) 80%, black);
889
+ }
890
+ }
891
+ .tcn-thead {
892
+ th:first-of-type {
893
+ border-right: 1px solid color-mix(in srgb, var(--material) 80%, black);
894
+ }
895
+
896
+ th:last-of-type {
897
+ border-left: 1px solid color-mix(in srgb, var(--material) 80%, black);
898
+ }
899
+ }
900
+ }
901
+
902
+ .tcn-td {
903
+ text-align: start;
904
+ overflow: hidden;
905
+ white-space: nowrap;
906
+ text-overflow: ellipsis;
907
+ }
908
+
909
+ .tcn-thead {
910
+ /* Border for header row */
911
+ .tcn-tr {
912
+ height: var(--bar-md);
913
+ .tcn-th {
914
+ border-bottom: 1px solid var(--ergo-grey-light);
915
+ }
916
+ .tcn-th:not(:last-of-type):not(:nth-last-of-type(2)) {
917
+ border-right: 1px solid var(--ergo-grey);
918
+ }
919
+ .tcn-th:last-of-type {
920
+ border-left: 1px solid var(--ergo-grey);
921
+ }
922
+ }
923
+ }
924
+
925
+ .tcn-tfoot {
926
+ font-weight: bold;
927
+ /* Border for footer row */
928
+ .tcn-tr {
929
+ height: var(--bar-sm);
930
+ .tcn-th,
931
+ .tcn-td {
932
+ border-top: 1px solid var(--ergo-grey-light);
933
+ }
934
+ }
935
+ }
936
+
937
+ /* Header and footer - both are light blue */
938
+ .tcn-thead,
939
+ .tcn-tfoot {
940
+ font-size: 14px;
941
+ --material: var(--ergo-secondary-light);
942
+ --on-material: var(--ergo-accent-blue);
943
+ --action: var(--ergo-secondary);
944
+ --on-action: var(--ergo-white);
945
+
946
+ background-color: var(--material);
947
+ color: var(--on-material);
948
+ }
949
+
950
+ .tcn-tr {
951
+ height: var(--bar-sm);
952
+ align-content: center;
953
+ }
954
+
955
+ .tcn-td,
956
+ .tcn-th {
957
+ padding-inline: var(--padding-medium);
958
+ vertical-align: middle;
959
+ text-align: start;
960
+ background: var(--material);
961
+ }
962
+
963
+ /* First column (header, body, footer): use context for pad inline or default 8px */
964
+ .tcn-table .tcn-tr > .tcn-th:first-child,
965
+ .tcn-table .tcn-tr > .tcn-td:first-child {
966
+ padding-inline-start: var(--table-pad-inline);
967
+ }
968
+
969
+ /* Last column (header, body, footer): use context for pad inline or default 8px */
970
+ .tcn-table .tcn-tr > .tcn-th:last-child,
971
+ .tcn-table .tcn-tr > .tcn-td:last-child {
972
+ padding-inline-end: var(--table-pad-inline);
973
+ }
974
+
975
+ .tcn-tbody {
976
+ font-size: 12px;
977
+ .tcn-tr:nth-of-type(even) {
978
+ --material: var(--ergo-accent-blue-light);
979
+ }
980
+ .tcn-tr:nth-of-type(odd) {
981
+ --material: var(--ergo-white);
982
+ }
983
+ .tcn-tr:hover {
984
+ --material: color-mix(in srgb, var(--ergo-accent-blue-light), var(--action) 12%);
985
+ }
986
+ .tcn-tr[data-is-selected="true"] {
987
+ --material: var(--ergo-secondary);
988
+ --on-material: var(--ergo-white);
989
+ --action: var(--ergo-tertiary);
990
+ --on-action: var(--ergo-accent-blue);
991
+ }
992
+
993
+ .tcn-tr {
994
+ --material: var(--bg-row);
995
+ --on-material: var(--ergo-accent-blue);
996
+ --action: var(--ergo-accent-blue);
997
+ --on-action: var(--ergo-white);
998
+ background-color: var(--material);
999
+ color: var(--on-material);
1000
+ }
1001
+ }
867
1002
  }
868
1003
  `, r = new CSSStyleSheet();
869
1004
  r.replaceSync(n);
package/dist/themes/themes/ergo/ergo_theme.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ergo_theme.js","sources":["../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"@layer tcn-reset {\\n * {\\n position: relative;\\n box-sizing: border-box;\\n }\\n}\\n\\n@layer tcn-theme {\\n /* ===== CSS VARIABLES ===== */\\n :root {\\n /* ========== Ergo Brand Palette ========== */\\n --ergo-primary: #ce6b2b;\\n --ergo-secondary: #669eb4;\\n --ergo-secondary-light: #ecf4fb;\\n --ergo-secondary-dark: #497485;\\n --ergo-tertiary: #dfd7cd;\\n --ergo-tertiary-light: #f9f4ed;\\n --ergo-tertiary-dark: #7e6c5d;\\n --ergo-white: #ffffff;\\n\\n --ergo-accent-blue: #395578;\\n --ergo-accent-blue-light: #f3f4f6;\\n --ergo-accent-green: #97bba3;\\n --ergo-accent-green-light: #eef8ef;\\n --ergo-accent-green-dark: #4f785c;\\n --ergo-accent-yellow: #dbc97e;\\n --ergo-accent-yellow-light: #fef9e7;\\n\\n --ergo-grey: #aaaaaa;\\n --ergo-grey-light: #d3d3d3;\\n --ergo-grey-dark: #808080;\\n\\n --ergo-status-red: #ff6565;\\n --ergo-status-red-dark: #c24848;\\n\\n --ergo-status-yellow: #ffd439;\\n --ergo-status-yellow-dark: #dbb735;\\n\\n --ergo-status-blue: var(--ergo-secondary);\\n --ergo-status-blue-dark: var(--ergo-secondary-dark);\\n\\n --ergo-status-green: #3fbc6a;\\n --ergo-status-green-dark: #2d904f;\\n\\n --ergo-ink-primary: var(--ergo-accent-blue);\\n --ergo-ink-inverse: var(--ergo-white);\\n\\n /* ========== Blackcat System Tokens ========== */\\n --scalar: 1;\\n --accent-color: var(--ergo-primary);\\n\\n /* Typography */\\n --font-color: var(--ergo-ink-primary);\\n --font-family: \\\"Lato\\\", sans-serif;\\n --font-size: 12px;\\n\\n /* Spacing */\\n --gap-small: 4px;\\n --gap-medium: 8px;\\n --gap-large: 16px;\\n\\n --padding-small: 4px;\\n --padding-medium: 8px;\\n --padding-large: 16px;\\n\\n /* Status Colors */\\n --status-color-disabled: var(--ergo-grey-light);\\n --status-color-info: var(--ergo-status-blue);\\n --status-color-warning: var(--ergo-status-yellow);\\n --status-color-positive: var(--ergo-status-green);\\n --status-color-error: var(--ergo-status-red);\\n\\n --async-color-initial: var(--ergo-grey-main);\\n --async-color-pending: var(--ergo-status-blue);\\n --async-color-success: var(--ergo-status-green);\\n --async-color-failed: var(--ergo-status-red);\\n\\n --action-severity-dangerous: var(--ergo-status-red);\\n --action-severity-cautious: var(--ergo-status-yellow);\\n --action-severity-neutral: var(--ergo-primary);\\n --action-severity-suggested: var(--ergo-status-blue);\\n --action-severity-encouraged: var(--ergo-status-green);\\n\\n /* Shape */\\n --shape-radius-small: 2px;\\n --shape-radius-medium: 4px;\\n --shape-radius-large: 8px;\\n\\n /* Palette */\\n --primary-color-faint: #c0c0c0;\\n --primary-color: #008cff;\\n --primary-color-strong: #008cff;\\n\\n --secondary-color-faint: #c0c0c0;\\n --secondary-color: #008cff;\\n --secondary-color-strong: #008cff;\\n\\n --tertiary-color-faint: #c0c0c0;\\n --tertiary-color: #008cff;\\n --tertiary-color-strong: #008cff;\\n\\n --quaternary-color-faint: #c0c0c0;\\n --quaternary-color: #008cff;\\n --quaternary-color-strong: #008cff;\\n\\n --background-color-primary: #ffffff;\\n --background-color-secondary: #ffffff;\\n --background-color-tertiary: #ffffff;\\n --background-color-quaternary: #ffffff;\\n\\n --foreground-color-primary: #aaa;\\n --foreground-color-secondary: #222222;\\n --foreground-color-tertiary: #222222;\\n --foreground-color-quaternary: #222222;\\n\\n --material-disabled: var(--ergo-grey-light);\\n --on-material-disabled: var(--ergo-ink-inverse);\\n --ink-disabled: var(--ergo-grey-light);\\n\\n --material-line: var(--ergo-grey);\\n\\n /* Default Material */\\n --action: var(--ergo-primary);\\n --on-action: var(--ergo-white);\\n --material: var(--ergo-white);\\n --on-material: var(--ergo-accent-blue);\\n }\\n\\n .tcn-theme-root {\\n font-family: var(--font-family);\\n color: var(--font-color);\\n --action: var(--ergo-primary);\\n --on-action: var(--ergo-white);\\n --material: var(--ergo-white);\\n --on-material: var(--ergo-accent-blue);\\n }\\n\\n /* ===== Actions ===== */\\n\\n .tcn-interactive {\\n cursor: pointer;\\n user-select: none;\\n transition:\\n transform 0.1s,\\n background 0.1s,\\n color 0.1s;\\n\\n --ink: var(--on-material);\\n --act: var(--action);\\n --mat: var(--material);\\n\\n --act-down: color-mix(in srgb, var(--mat), black 12%);\\n --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);\\n --act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);\\n --act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);\\n\\n background: var(--mat);\\n color: var(--ink);\\n transition:\\n background 0.1s,\\n color 0.1s;\\n\\n &:focus-visible,\\n &[data-focus-visible] {\\n background: var(--act-focus);\\n outline: 2px solid var(--ergo-primary);\\n outline-offset: 2px;\\n }\\n\\n &:hover,\\n &[data-hover] {\\n background: var(--act-raised);\\n }\\n\\n &:active,\\n &[data-active] {\\n background: var(--act-down);\\n }\\n\\n &[data-is-disabled=\\\"true\\\"] {\\n pointer-events: none;\\n }\\n }\\n\\n /* ===== Base Button ===== \\n * Shared between Button and Toggle.\\n * Primarily manages button dimensions and sizing ratios.\\n */\\n .tcn-base-button {\\n /* TODO: btn size should look for \\\"--tcn-action-size\\\" variable before defaulting. */\\n --btn-size-base: 26px;\\n --btn-pad-base: 12px;\\n\\n --btn-pad-delta: 4px;\\n --btn-size-delta: 4px;\\n --btn-step: 1;\\n\\n /* Increase size and pad by 4px for each size \\\"step\\\" from medium */\\n --btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));\\n --btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));\\n\\n border-radius: var(--shape-radius-medium);\\n min-height: var(--btn-size);\\n padding: var(--padding-small) var(--btn-pad);\\n\\n &[data-size=\\\"sm\\\"] {\\n --btn-step: -1;\\n }\\n &[data-size=\\\"md\\\"] {\\n --btn-step: 0;\\n }\\n &[data-size=\\\"lg\\\"] {\\n --btn-step: 1;\\n }\\n\\n &[data-is-utility=\\\"true\\\"] {\\n height: auto;\\n width: auto;\\n min-width: var(--btn-size);\\n padding: 0;\\n\\n /* Icon is 75% of the button size but minimum of 2px to account for border and 1px offset */\\n --util-ratio: 0.75;\\n --btn-size-base: 18px;\\n\\n .tcn-icon {\\n min-height: min(2px, calc(var(--btn-size) * var(--util-ratio)));\\n min-width: min(2px, calc(var(--btn-size) * var(--util-ratio)));\\n }\\n }\\n }\\n\\n /* ===== Button ===== \\n * Manages Hierarchy and Severity.\\n */\\n .tcn-button {\\n --btn-primary: var(--action);\\n --btn-on-primary: var(--on-action);\\n --btn-variant: var(--on-material);\\n\\n &[data-severity=\\\"dangerous\\\"] {\\n --btn-primary: var(--action-severity-dangerous);\\n --btn-variant: var(--ergo-status-red-dark);\\n }\\n &[data-severity=\\\"cautious\\\"] {\\n --btn-primary: var(--action-severity-cautious);\\n --btn-on-primary: var(--ergo-accent-blue);\\n --btn-variant: var(--ergo-status-yellow-dark);\\n }\\n &[data-severity=\\\"suggested\\\"] {\\n --btn-primary: var(--action-severity-suggested);\\n --btn-variant: var(--ergo-status-blue-dark);\\n }\\n &[data-severity=\\\"encouraged\\\"] {\\n --btn-primary: var(--action-severity-encouraged);\\n --btn-variant: var(--ergo-status-green-dark);\\n }\\n\\n &[data-hierarchy=\\\"primary\\\"] {\\n --act: var(--ergo-white);\\n --ink: var(--tcn-button-text-color, var(--btn-on-primary));\\n --mat: var(--tcn-button-color, var(--btn-primary));\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-white);\\n --mat: var(--ergo-grey-light);\\n }\\n }\\n\\n &[data-hierarchy=\\\"secondary\\\"],\\n &[data-hierarchy=\\\"tertiary\\\"] {\\n --act: var(--tcn-button-color, var(--btn-variant));\\n --ink: var(--tcn-button-color, var(--btn-variant));\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-grey-light);\\n }\\n }\\n\\n /* Decorations */\\n &[data-hierarchy=\\\"tertiary\\\"]:hover {\\n text-decoration: underline;\\n text-decoration-color: var(--ink);\\n text-decoration-thickness: 1px;\\n text-underline-offset: 4px;\\n }\\n\\n &[data-hierarchy=\\\"tertiary\\\"] {\\n border: 1px solid transparent;\\n }\\n\\n &[data-hierarchy=\\\"secondary\\\"] {\\n border: 1px solid var(--ink);\\n }\\n\\n &[data-hierarchy=\\\"primary\\\"] {\\n border: 1px solid var(--mat);\\n }\\n\\n transition:\\n box-shadow 0.1s,\\n transform 0.1s;\\n\\n &:hover,\\n &[data-hover] {\\n transform: translateY(-1px);\\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);\\n\\n /* Increases the clickable area by 2px on hover to avoid click events not firing due to the button transform y - or slight mouse wiggles */\\n &::before,\\n &::after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 0;\\n right: 0;\\n height: 4px;\\n }\\n\\n &::before {\\n top: -2px;\\n }\\n\\n &::after {\\n bottom: -2px;\\n }\\n }\\n\\n &:active,\\n &[data-active] {\\n transform: translateY(1px);\\n box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.12);\\n }\\n }\\n\\n /* @deprecated - use Button with utility prop instead */\\n .tcn-slim-button {\\n height: auto;\\n width: auto;\\n padding: 0;\\n\\n &[data-size=\\\"sm\\\"] {\\n min-height: 12px;\\n min-width: 12px;\\n padding: 0;\\n .tcn-icon {\\n min-height: 10px;\\n min-width: 10px;\\n }\\n }\\n &[data-size=\\\"md\\\"] {\\n min-height: 18px;\\n min-width: 18px;\\n padding: 0;\\n .tcn-icon {\\n min-height: 14px;\\n min-width: 14px;\\n }\\n }\\n\\n &[data-size=\\\"lg\\\"] {\\n min-height: 24px;\\n min-width: 24px;\\n padding: 0;\\n .tcn-icon {\\n min-height: 20px;\\n min-width: 20px;\\n }\\n }\\n }\\n\\n .tcn-button[data-size].tcn-select {\\n padding-inline-end: 26px;\\n }\\n\\n /* Toggle */\\n .tcn-toggle {\\n --tgl-false: var(--ergo-accent-blue);\\n --tgl-true: var(--ergo-accent-blue);\\n --on-tgl-true: var(--ergo-white);\\n\\n --ink: var(--tcn-button-color, var(--tgl-false));\\n --act: var(--tcn-button-color, var(--tgl-false));\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-grey-light);\\n }\\n &[data-is-selected=\\\"true\\\"] {\\n --mat: var(--tcn-button-color, var(--tgl-true));\\n --ink: var(--tcn-button-text-color, var(--ergo-white));\\n --act: var(--ergo-white);\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-white);\\n --mat: var(--ergo-grey-light);\\n }\\n }\\n }\\n\\n .tcn-button-group {\\n .tcn-button-group-button:hover,\\n .tcn-button-group-button:active {\\n transform: none;\\n }\\n\\n .tcn-button-group-button {\\n border-radius: 0;\\n }\\n .tcn-button-group-button:first-child {\\n border-top-left-radius: var(--shape-radius-medium);\\n border-bottom-left-radius: var(--shape-radius-medium);\\n }\\n .tcn-button-group-button:last-child {\\n border-top-right-radius: var(--shape-radius-medium);\\n border-bottom-right-radius: var(--shape-radius-medium);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"] {\\n border: 0;\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:last-child) {\\n border-right: 1px solid var(--on-mat-faint);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:first-child) {\\n border-left: 1px solid var(--on-mat-faint);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:last-child) {\\n border-right: 1px solid var(--act-down);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:first-child) {\\n border-left: 1px solid var(--act-down);\\n }\\n }\\n\\n .tcn-select-group {\\n .tcn-select-group-option:hover,\\n .tcn-select-group-option:active {\\n transform: none;\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"] {\\n color: var(--act);\\n border-color: var(--act);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:hover {\\n background: var(--act-faint);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:active {\\n background: var(--act-down);\\n color: var(--on-act);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n color: var(--material-disabled);\\n border: 1px solid var(--material-disabled);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n background: var(--material-disabled);\\n color: white;\\n border: 1px solid var(--material-disabled);\\n }\\n\\n .tcn-select-group-option {\\n border-radius: 0;\\n }\\n .tcn-select-group-option:first-child {\\n border-top-left-radius: var(--shape-radius-medium);\\n border-bottom-left-radius: var(--shape-radius-medium);\\n }\\n .tcn-select-group-option:last-child {\\n border-top-right-radius: var(--shape-radius-medium);\\n border-bottom-right-radius: var(--shape-radius-medium);\\n }\\n }\\n\\n /* ===== Tabs ===== */\\n .tcn-tabs-bar {\\n .tcn-tabs-list {\\n .tcn-tab-item {\\n min-height: 24px;\\n padding: 0px var(--padding-medium);\\n text-decoration: none;\\n text-overflow: ellipsis;\\n overflow: hidden;\\n white-space: nowrap;\\n }\\n }\\n }\\n\\n /* Default */\\n .tcn-tabs-bar[data-variant=\\\"default\\\"] {\\n .tcn-tabs-list {\\n .tcn-tab-item {\\n box-sizing: border-box;\\n border: none;\\n padding: 0px var(--padding-medium);\\n border-radius: 0;\\n }\\n .tcn-tab-item[data-is-selected=\\\"true\\\"] {\\n --mat: var(--tcn-button-color, var(--material));\\n --ink: var(--tcn-button-text-color, var(--ergo-primary));\\n --act: var(--ergo-primary);\\n }\\n\\n /* Hover Indicator */\\n .tcn-tab-item[data-is-selected=\\\"false\\\"]:hover::after {\\n content: \\\"\\\";\\n display: block;\\n position: absolute;\\n left: 0;\\n right: 0;\\n bottom: 0px;\\n height: 1px;\\n background: var(--ergo-accent-blue);\\n pointer-events: none;\\n width: 100%;\\n z-index: 3;\\n }\\n\\n /* Indicator */\\n &::after {\\n content: \\\"\\\";\\n position: absolute;\\n bottom: -1px;\\n left: 0;\\n min-height: 2px;\\n transform: translateX(var(--tabs-active-rectangle-position-x, 0));\\n width: var(--tabs-active-rectangle-width, 0);\\n background: var(--ergo-primary);\\n pointer-events: none;\\n border-bottom-left-radius: 2px;\\n border-bottom-right-radius: 2px;\\n transition:\\n transform 300ms ease-in-out,\\n width 300ms ease-in-out;\\n will-change: transform, width;\\n z-index: 2;\\n }\\n }\\n\\n /* Rail */\\n &::before {\\n content: \\\"\\\";\\n position: absolute;\\n bottom: 0px;\\n left: 0;\\n width: 100%;\\n height: 1px;\\n background: var(--material-line);\\n pointer-events: none;\\n z-index: 1;\\n }\\n }\\n\\n /* Inline */\\n .tcn-tabs-bar[data-variant=\\\"inline\\\"] {\\n min-width: min-content;\\n width: auto;\\n flex-grow: 0;\\n border-radius: var(--shape-radius-medium);\\n border: 1px solid var(--on-material);\\n\\n .tcn-tabs-list {\\n gap: var(--gap-small);\\n padding: var(--padding-small);\\n .tcn-tab-item {\\n border-radius: var(--shape-radius-medium);\\n }\\n }\\n }\\n\\n /* ===== MATERIAL ===== */\\n\\n .material {\\n background-color: var(--material);\\n color: var(--on-material);\\n }\\n\\n /* ===== SURFACES ===== */\\n .tcn-draggable[data-is-draggable=\\\"true\\\"] {\\n .tcn-drag-handle {\\n cursor: move;\\n }\\n }\\n\\n .tcn-frame[data-is-veil=\\\"true\\\"] {\\n background-color: rgba(0, 0, 0, 0.5);\\n }\\n\\n .tcn-tooltip {\\n background: rgba(57, 85, 120, 0.85);\\n box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);\\n color: rgba(255, 255, 255, 1);\\n border-radius: var(--shape-radius-medium);\\n padding: var(--padding-medium);\\n }\\n\\n .tcn-list {\\n gap: var(--gap-medium);\\n .tcn-item {\\n height: 24px;\\n padding: 0px var(--padding-medium);\\n border-radius: var(--shape-radius-medium);\\n }\\n }\\n\\n /* Scaffold: */\\n .tcn-scaffold {\\n --scaffold-v-inset: var(--v-inset, var(--padding-large));\\n --scaffold-header-size: var(--header-size, 40px);\\n --scaffold-footer-size: var(--footer-size, 40px);\\n --scaffold-utility-bar-size: var(--utility-bar-size, 32px);\\n --scaffold-divide-footer: var(--divide-footer, 1);\\n --scaffold-divide-header: var(--divide-header, 1);\\n\\n :where(.tcn-header) {\\n min-height: var(--scaffold-header-size);\\n padding: 0 var(--scaffold-v-inset);\\n gap: var(--gap-medium);\\n }\\n\\n /* Border appears on body only when it follows header or utility-bar */\\n :where(.tcn-header) + :where(.tcn-body),\\n :where(.tcn-utility-bar) + :where(.tcn-body) {\\n border-top: calc(var(--scaffold-divide-header) * 1px) solid\\n var(--foreground-color-primary);\\n }\\n\\n /* Border appears on footer only when it follows body and --scaffold-divide-footer is 1 */\\n :where(.tcn-body) + :where(.tcn-footer) {\\n border-top: calc(var(--scaffold-divide-footer) * 1px) solid\\n var(--foreground-color-primary);\\n }\\n\\n :where(.tcn-utility-bar) {\\n min-height: var(--scaffold-utility-bar-size);\\n padding: 0 var(--scaffold-v-inset);\\n gap: var(--gap-medium);\\n }\\n\\n :where(.tcn-body) {\\n --section-tab-start: var(--scaffold-v-inset);\\n\\n gap: var(--gap-medium);\\n .tcn-section {\\n --section-tab-start: var(--scaffold-v-inset);\\n }\\n }\\n\\n :where(.tcn-footer) {\\n gap: var(--gap-medium);\\n min-height: var(--scaffold-footer-size);\\n padding: 0 var(--scaffold-v-inset);\\n }\\n }\\n\\n .tcn-frame-veil[data-is-veil=\\\"true\\\"] {\\n background-color: rgba(0, 0, 0, 0.5);\\n }\\n\\n /* MODAL: */\\n .tcn-modal {\\n --divide-header: 0;\\n\\n :where(.tcn-scaffold) {\\n border-radius: var(--shape-radius-medium);\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n border: 1px solid var(--foreground-color-primary);\\n }\\n\\n :where(.tcn-header) {\\n --material: var(--ergo-secondary-dark);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n /* WINDOW: */\\n .tcn-window {\\n --divide-header: 0;\\n\\n :where(.tcn-scaffold) {\\n box-shadow: 0px 4px 34px 0px #00000096;\\n border-radius: var(--shape-radius-medium);\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n border: 2px solid white;\\n }\\n\\n :where(.tcn-header) {\\n --material: var(--ergo-secondary-dark);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n .tcn-pop-confirm {\\n --divide-header: 0;\\n --v-inset: var(--padding-medium);\\n\\n :where(.tcn-scaffold) {\\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);\\n border-radius: var(--shape-radius-medium);\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n }\\n\\n :where(.tcn-header) {\\n min-height: 32px;\\n\\n --material: var(--ergo-secondary-dark);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n .tcn-confirm {\\n background-color: var(--background-color-primary);\\n }\\n\\n /* PANEL */\\n .tcn-panel {\\n background-color: var(--background-color-primary);\\n border-radius: var(--shape-radius-medium);\\n overflow: hidden;\\n }\\n\\n /* Card */\\n .tcn-card {\\n --header-size: 32px;\\n --footer-size: 32px;\\n --utility-bar-size: 24px;\\n --divide-header: 0;\\n\\n background-color: var(--background-color-primary);\\n border-radius: var(--shape-radius-medium);\\n border: 1px solid var(--foreground-color-primary);\\n overflow: hidden;\\n\\n :where(.tcn-header) {\\n min-height: 32px;\\n\\n --material: var(--ergo-secondary-light);\\n --on-material: var(--ergo-accent-blue);\\n --action: var(--ergo-secondary);\\n --on-action: var(--ergo-white);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n /* SECTION */\\n .tcn-section {\\n --max-section-depth: 4;\\n --section-tab-width: 4px;\\n --section-tab-start: 8px;\\n --section-tab-depth: 0;\\n --section-tab: calc(\\n var(--section-tab-start) +\\n (var(--section-tab-width) * var(--section-tab-depth))\\n );\\n --section-action: var(--ergo-secondary);\\n --section-mat: var(--ergo-secondary-light);\\n --section-on-mat: var(--ergo-ink-primary);\\n }\\n\\n .tcn-heading {\\n background-color: #f1f1f1;\\n padding-inline-start: 8px;\\n height: 30px;\\n z-index: 5;\\n }\\n\\n .tcn-section > .tcn-heading {\\n z-index: calc(var(--max-section-depth) - var(--section-tab-depth));\\n padding-inline-start: var(--section-tab);\\n --material: var(--section-mat);\\n --on-material: var(--section-on-mat);\\n --action: var(--section-action);\\n background-color: var(--material);\\n color: var(--on-material);\\n gap: var(--gap-small);\\n }\\n\\n .tcn-section > :not(.tcn-heading, .tcn-section) {\\n padding-inline-start: var(--section-tab);\\n }\\n\\n .tcn-section > .tcn-section {\\n --section-tab-depth: 1;\\n --section-mat: var(--ergo-accent-blue-light);\\n --section-action: var(--ergo-accent-blue);\\n }\\n\\n .tcn-section > .tcn-section > .tcn-section {\\n --section-tab-depth: 2;\\n --section-mat: var(--ergo-accent-green-light);\\n --section-action: var(--ergo-accent-green-dark);\\n }\\n\\n .tcn-section > .tcn-section > .tcn-section > .tcn-section {\\n --section-tab-depth: 3;\\n --section-mat: var(--ergo-tertiary-light);\\n --section-action: var(--ergo-tertiary-dark);\\n }\\n\\n .tcn-caret {\\n --caret-size: 12px;\\n --caret-triangle-height: calc(var(--caret-size) / 2);\\n --caret-triangle-width: var(--caret-size);\\n --caret-triangle-base: var(--caret-triangle-height) solid transparent;\\n --caret-triangle-peak: var(--caret-triangle-width) solid var(--material);\\n\\n width: 0;\\n height: 0;\\n flex-grow: 0;\\n display: inline-block;\\n\\n &[data-direction=\\\"top\\\"] {\\n border-bottom: var(--caret-triangle-peak);\\n border-left: var(--caret-triangle-base);\\n border-right: var(--caret-triangle-base);\\n }\\n\\n &[data-direction=\\\"bottom\\\"] {\\n border-top: var(--caret-triangle-peak);\\n border-left: var(--caret-triangle-base);\\n border-right: var(--caret-triangle-base);\\n }\\n\\n &[data-direction=\\\"start\\\"] {\\n border-right: var(--caret-triangle-peak);\\n border-top: var(--caret-triangle-base);\\n border-bottom: var(--caret-triangle-base);\\n }\\n\\n &[data-direction=\\\"end\\\"] {\\n border-left: var(--caret-triangle-peak);\\n border-top: var(--caret-triangle-base);\\n border-bottom: var(--caret-triangle-base);\\n }\\n }\\n}\\n\"","import css from './ergo_theme.css?raw';\nimport '@fontsource/lato';\n\nexport const ergoStyleSheet = new CSSStyleSheet();\nergoStyleSheet.replaceSync(css);\n"],"names":["css","ergoStyleSheet"],"mappings":";AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCGFC,IAAiB,IAAI,cAAA;AAClCA,EAAe,YAAYD,CAAG;"}
1
+ {"version":3,"file":"ergo_theme.js","sources":["../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"@layer tcn-theme {\\n /* ===== CSS VARIABLES ===== */\\n :root {\\n /* ========== Ergo Brand Palette ========== */\\n --ergo-primary: #ce6b2b;\\n --ergo-secondary: #669eb4;\\n --ergo-secondary-light: #ecf4fb;\\n --ergo-secondary-dark: #497485;\\n --ergo-tertiary: #dfd7cd;\\n --ergo-tertiary-light: #f9f4ed;\\n --ergo-tertiary-dark: #7e6c5d;\\n --ergo-white: #ffffff;\\n\\n --ergo-accent-blue: #395578;\\n --ergo-accent-blue-light: #f3f4f6;\\n --ergo-accent-green: #97bba3;\\n --ergo-accent-green-light: #eef8ef;\\n --ergo-accent-green-dark: #4f785c;\\n --ergo-accent-yellow: #dbc97e;\\n --ergo-accent-yellow-light: #fef9e7;\\n\\n --ergo-grey: #aaaaaa;\\n --ergo-grey-light: #d3d3d3;\\n --ergo-grey-dark: #808080;\\n\\n --ergo-status-red: #ff6565;\\n --ergo-status-red-dark: #c24848;\\n\\n --ergo-status-yellow: #ffd439;\\n --ergo-status-yellow-dark: #dbb735;\\n\\n --ergo-status-blue: var(--ergo-secondary);\\n --ergo-status-blue-dark: var(--ergo-secondary-dark);\\n\\n --ergo-status-green: #3fbc6a;\\n --ergo-status-green-dark: #2d904f;\\n\\n --ergo-ink-primary: var(--ergo-accent-blue);\\n --ergo-ink-inverse: var(--ergo-white);\\n\\n /* ========== Blackcat System Tokens ========== */\\n --scalar: 1;\\n --accent-color: var(--ergo-primary);\\n\\n /* Typography */\\n --font-color: var(--ergo-ink-primary);\\n --font-family: \\\"Lato\\\", sans-serif;\\n --font-size: 12px;\\n\\n /* Spacing */\\n --gap-small: 4px;\\n --gap-medium: 8px;\\n --gap-large: 16px;\\n\\n --padding-small: 4px;\\n --padding-medium: 8px;\\n --padding-large: 16px;\\n\\n /* Sizing */\\n --bar-xs: 16px;\\n --bar-sm: 24px;\\n --bar-md: 32px;\\n --bar-lg: 40px;\\n --bar-xl: 48px;\\n\\n /* Status Colors */\\n --status-color-disabled: var(--ergo-grey-light);\\n --status-color-info: var(--ergo-status-blue);\\n --status-color-warning: var(--ergo-status-yellow);\\n --status-color-positive: var(--ergo-status-green);\\n --status-color-error: var(--ergo-status-red);\\n\\n --async-color-initial: var(--ergo-grey);\\n --async-color-pending: var(--ergo-status-blue);\\n --async-color-success: var(--ergo-status-green);\\n --async-color-failed: var(--ergo-status-red);\\n\\n --action-severity-dangerous: var(--ergo-status-red);\\n --action-severity-cautious: var(--ergo-status-yellow);\\n --action-severity-neutral: var(--ergo-primary);\\n --action-severity-suggested: var(--ergo-status-blue);\\n --action-severity-encouraged: var(--ergo-status-green);\\n\\n /* Shape */\\n --shape-radius-small: 2px;\\n --shape-radius-medium: 4px;\\n --shape-radius-large: 8px;\\n\\n /* Palette */\\n --primary-color-faint: #c0c0c0;\\n --primary-color: #008cff;\\n --primary-color-strong: #008cff;\\n\\n --secondary-color-faint: #c0c0c0;\\n --secondary-color: #008cff;\\n --secondary-color-strong: #008cff;\\n\\n --tertiary-color-faint: #c0c0c0;\\n --tertiary-color: #008cff;\\n --tertiary-color-strong: #008cff;\\n\\n --quaternary-color-faint: #c0c0c0;\\n --quaternary-color: #008cff;\\n --quaternary-color-strong: #008cff;\\n\\n --background-color-primary: #ffffff;\\n --background-color-secondary: #ffffff;\\n --background-color-tertiary: #ffffff;\\n --background-color-quaternary: #ffffff;\\n\\n --foreground-color-primary: #aaa;\\n --foreground-color-secondary: #222222;\\n --foreground-color-tertiary: #222222;\\n --foreground-color-quaternary: #222222;\\n\\n --material-disabled: var(--ergo-grey-light);\\n --on-material-disabled: var(--ergo-ink-inverse);\\n --ink-disabled: var(--ergo-grey-light);\\n\\n --material-line: var(--ergo-grey);\\n\\n /* Default Material */\\n --action: var(--ergo-primary);\\n --on-action: var(--ergo-white);\\n --material: var(--ergo-white);\\n --on-material: var(--ergo-accent-blue);\\n }\\n\\n .tcn-theme-root {\\n font-family: var(--font-family);\\n color: var(--font-color);\\n --action: var(--ergo-primary);\\n --on-action: var(--ergo-white);\\n --material: var(--ergo-white);\\n --on-material: var(--ergo-accent-blue);\\n }\\n\\n /* ===== Actions ===== */\\n\\n .tcn-interactive {\\n cursor: pointer;\\n user-select: none;\\n transition:\\n transform 0.1s,\\n background 0.1s,\\n color 0.1s;\\n\\n --ink: var(--on-material);\\n --act: var(--action);\\n --mat: var(--material);\\n\\n --act-down: color-mix(in srgb, var(--mat), black 12%);\\n --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);\\n --act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);\\n --act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);\\n\\n background: var(--mat);\\n color: var(--ink);\\n transition:\\n background 0.1s,\\n color 0.1s;\\n\\n &:focus-visible,\\n &[data-focus-visible] {\\n background: var(--act-focus);\\n outline: 2px solid var(--ergo-primary);\\n outline-offset: 2px;\\n }\\n\\n &:hover,\\n &[data-hover] {\\n background: var(--act-raised);\\n }\\n\\n &:active,\\n &[data-active] {\\n background: var(--act-down);\\n }\\n\\n &[data-is-disabled=\\\"true\\\"] {\\n pointer-events: none;\\n }\\n }\\n\\n /* ===== Base Button ===== \\n * Shared between Button and Toggle.\\n * Primarily manages button dimensions and sizing ratios.\\n */\\n .tcn-base-button {\\n /* TODO: btn size should look for \\\"--tcn-action-size\\\" variable before defaulting. */\\n --btn-size-base: 26px;\\n --btn-pad-base: 12px;\\n\\n --btn-pad-delta: 4px;\\n --btn-size-delta: 4px;\\n --btn-font-size-delta: 2px;\\n --btn-step: 1;\\n\\n /* Increase size and pad by 4px for each size \\\"step\\\" from medium */\\n --btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));\\n --btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));\\n\\n border-radius: var(--shape-radius-medium);\\n min-height: var(--btn-size);\\n padding: var(--padding-small) var(--btn-pad);\\n\\n &[data-size=\\\"sm\\\"] {\\n --btn-step: -1;\\n }\\n &[data-size=\\\"md\\\"] {\\n --btn-step: 0;\\n }\\n &[data-size=\\\"lg\\\"] {\\n --btn-step: 1;\\n }\\n\\n &[data-is-utility=\\\"true\\\"] {\\n height: auto;\\n width: auto;\\n min-width: var(--btn-size);\\n padding: 0;\\n\\n /* Icon is 75% of the button size but minimum of 2px to account for border and 1px offset */\\n --util-ratio: 0.75;\\n --btn-size-base: 18px;\\n\\n font-size: calc(var(--font-size) + var(--btn-font-size-delta) * var(--btn-step));\\n .tcn-icon {\\n min-height: min(2px, calc(var(--btn-size) * var(--util-ratio)));\\n min-width: min(2px, calc(var(--btn-size) * var(--util-ratio)));\\n }\\n }\\n }\\n\\n /* ===== Button ===== \\n * Manages Hierarchy and Severity.\\n */\\n .tcn-button {\\n --btn-primary: var(--action);\\n --btn-on-primary: var(--on-action);\\n --btn-variant: var(--on-material);\\n\\n &[data-severity=\\\"dangerous\\\"] {\\n --btn-primary: var(--action-severity-dangerous);\\n --btn-variant: var(--ergo-status-red-dark);\\n }\\n &[data-severity=\\\"cautious\\\"] {\\n --btn-primary: var(--action-severity-cautious);\\n --btn-on-primary: var(--ergo-accent-blue);\\n --btn-variant: var(--ergo-status-yellow-dark);\\n }\\n &[data-severity=\\\"suggested\\\"] {\\n --btn-primary: var(--action-severity-suggested);\\n --btn-variant: var(--ergo-status-blue-dark);\\n }\\n &[data-severity=\\\"encouraged\\\"] {\\n --btn-primary: var(--action-severity-encouraged);\\n --btn-variant: var(--ergo-status-green-dark);\\n }\\n\\n &[data-hierarchy=\\\"primary\\\"] {\\n --act: var(--ergo-white);\\n --ink: var(--tcn-button-text-color, var(--btn-on-primary));\\n --mat: var(--tcn-button-color, var(--btn-primary));\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-white);\\n --mat: var(--ergo-grey-light);\\n }\\n }\\n\\n &[data-hierarchy=\\\"secondary\\\"],\\n &[data-hierarchy=\\\"tertiary\\\"] {\\n --act: var(--tcn-button-color, var(--btn-variant));\\n --ink: var(--tcn-button-color, var(--btn-variant));\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-grey-light);\\n }\\n }\\n\\n /* Decorations */\\n &[data-hierarchy=\\\"tertiary\\\"]:hover {\\n text-decoration: underline;\\n text-decoration-color: var(--ink);\\n text-decoration-thickness: 1px;\\n text-underline-offset: 4px;\\n }\\n\\n &[data-hierarchy=\\\"tertiary\\\"] {\\n border: 1px solid transparent;\\n }\\n\\n &[data-hierarchy=\\\"secondary\\\"] {\\n border: 1px solid var(--ink);\\n }\\n\\n &[data-hierarchy=\\\"primary\\\"] {\\n border: 1px solid var(--mat);\\n }\\n\\n transition:\\n box-shadow 0.1s,\\n transform 0.1s;\\n\\n &:hover,\\n &[data-hover] {\\n transform: translateY(-1px);\\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);\\n\\n /* Increases the clickable area by 2px on hover to avoid click events not firing due to the button transform y - or slight mouse wiggles */\\n &::before,\\n &::after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 0;\\n right: 0;\\n height: 4px;\\n }\\n\\n &::before {\\n top: -2px;\\n }\\n\\n &::after {\\n bottom: -2px;\\n }\\n }\\n\\n &:active,\\n &[data-active] {\\n transform: translateY(1px);\\n box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.12);\\n }\\n }\\n\\n /* @deprecated - use Button with utility prop instead */\\n .tcn-slim-button {\\n height: auto;\\n width: auto;\\n padding: 0;\\n\\n &[data-size=\\\"sm\\\"] {\\n min-height: 12px;\\n min-width: 12px;\\n padding: 0;\\n .tcn-icon {\\n min-height: 10px;\\n min-width: 10px;\\n }\\n }\\n &[data-size=\\\"md\\\"] {\\n min-height: 18px;\\n min-width: 18px;\\n padding: 0;\\n .tcn-icon {\\n min-height: 14px;\\n min-width: 14px;\\n }\\n }\\n\\n &[data-size=\\\"lg\\\"] {\\n min-height: 24px;\\n min-width: 24px;\\n padding: 0;\\n .tcn-icon {\\n min-height: 20px;\\n min-width: 20px;\\n }\\n }\\n }\\n\\n .tcn-button[data-size].tcn-select {\\n padding-inline-end: 26px;\\n }\\n\\n /* Toggle */\\n .tcn-toggle {\\n --tgl-false: var(--ergo-accent-blue);\\n --tgl-true: var(--ergo-accent-blue);\\n --on-tgl-true: var(--ergo-white);\\n\\n --ink: var(--tcn-button-color, var(--tgl-false));\\n --act: var(--tcn-button-color, var(--tgl-false));\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-grey-light);\\n }\\n &[data-is-selected=\\\"true\\\"] {\\n --mat: var(--tcn-button-color, var(--tgl-true));\\n --ink: var(--tcn-button-text-color, var(--ergo-white));\\n --act: var(--ergo-white);\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-white);\\n --mat: var(--ergo-grey-light);\\n }\\n }\\n }\\n\\n .tcn-button-group {\\n .tcn-button-group-button:hover,\\n .tcn-button-group-button:active {\\n transform: none;\\n }\\n\\n .tcn-button-group-button {\\n border-radius: 0;\\n }\\n .tcn-button-group-button:first-child {\\n border-top-left-radius: var(--shape-radius-medium);\\n border-bottom-left-radius: var(--shape-radius-medium);\\n }\\n .tcn-button-group-button:last-child {\\n border-top-right-radius: var(--shape-radius-medium);\\n border-bottom-right-radius: var(--shape-radius-medium);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"] {\\n border: 0;\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:last-child) {\\n border-right: 1px solid var(--on-mat-faint);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:first-child) {\\n border-left: 1px solid var(--on-mat-faint);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:last-child) {\\n border-right: 1px solid var(--act-down);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:first-child) {\\n border-left: 1px solid var(--act-down);\\n }\\n }\\n\\n .tcn-select-group {\\n .tcn-select-group-option:hover,\\n .tcn-select-group-option:active {\\n transform: none;\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"] {\\n color: var(--act);\\n border-color: var(--act);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:hover {\\n background: var(--act-faint);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:active {\\n background: var(--act-down);\\n color: var(--on-act);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n color: var(--material-disabled);\\n border: 1px solid var(--material-disabled);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n background: var(--material-disabled);\\n color: white;\\n border: 1px solid var(--material-disabled);\\n }\\n\\n .tcn-select-group-option {\\n border-radius: 0;\\n }\\n .tcn-select-group-option:first-child {\\n border-top-left-radius: var(--shape-radius-medium);\\n border-bottom-left-radius: var(--shape-radius-medium);\\n }\\n .tcn-select-group-option:last-child {\\n border-top-right-radius: var(--shape-radius-medium);\\n border-bottom-right-radius: var(--shape-radius-medium);\\n }\\n }\\n\\n /* ===== Tabs ===== */\\n .tcn-tabs-bar {\\n .tcn-tabs-list {\\n .tcn-tab-item {\\n min-height: 24px;\\n padding: 0px var(--padding-medium);\\n text-decoration: none;\\n text-overflow: ellipsis;\\n overflow: hidden;\\n white-space: nowrap;\\n }\\n }\\n }\\n\\n /* Default */\\n .tcn-tabs-bar[data-variant=\\\"default\\\"] {\\n .tcn-tabs-list {\\n .tcn-tab-item {\\n box-sizing: border-box;\\n border: none;\\n padding: 0px var(--padding-medium);\\n border-radius: 0;\\n }\\n .tcn-tab-item[data-is-selected=\\\"true\\\"] {\\n --mat: var(--tcn-button-color, var(--material));\\n --ink: var(--tcn-button-text-color, var(--ergo-primary));\\n --act: var(--ergo-primary);\\n }\\n\\n .tcn-tab-item:focus-visible {\\n z-index: 2;\\n }\\n /* Hover Indicator */\\n .tcn-tab-item[data-is-selected=\\\"false\\\"]:hover::after,\\n .tcn-tab-item[data-is-selected=\\\"false\\\"]:focus-visible::after {\\n content: \\\"\\\";\\n display: block;\\n position: absolute;\\n left: 0;\\n right: 0;\\n bottom: 0px;\\n height: 1px;\\n background: var(--ergo-accent-blue);\\n pointer-events: none;\\n width: 100%;\\n z-index: 3;\\n }\\n\\n /* Indicator */\\n &::after {\\n content: \\\"\\\";\\n position: absolute;\\n bottom: -1px;\\n left: 0;\\n min-height: 2px;\\n transform: translateX(var(--tabs-active-rectangle-position-x, 0));\\n width: var(--tabs-active-rectangle-width, 0);\\n background: var(--ergo-primary);\\n pointer-events: none;\\n border-bottom-left-radius: 2px;\\n border-bottom-right-radius: 2px;\\n transition:\\n transform 300ms ease-in-out,\\n width 300ms ease-in-out;\\n will-change: transform, width;\\n z-index: 2;\\n }\\n }\\n\\n /* Rail */\\n &::before {\\n content: \\\"\\\";\\n position: absolute;\\n bottom: 0px;\\n left: 0;\\n width: 100%;\\n height: 1px;\\n background: var(--material-line);\\n pointer-events: none;\\n z-index: 1;\\n }\\n }\\n\\n /* Inline */\\n .tcn-tabs-bar[data-variant=\\\"inline\\\"] {\\n min-width: min-content;\\n width: auto;\\n flex-grow: 0;\\n border-radius: var(--shape-radius-medium);\\n border: 1px solid var(--on-material);\\n\\n .tcn-tabs-list {\\n gap: var(--gap-small);\\n padding: var(--padding-small);\\n .tcn-tab-item {\\n border-radius: var(--shape-radius-medium);\\n }\\n }\\n }\\n\\n /* ===== MATERIAL ===== */\\n\\n .material {\\n background-color: var(--material);\\n color: var(--on-material);\\n }\\n\\n /* ===== SURFACES ===== */\\n .tcn-draggable[data-is-draggable=\\\"true\\\"] {\\n .tcn-drag-handle {\\n cursor: move;\\n }\\n }\\n\\n .tcn-frame[data-is-veil=\\\"true\\\"] {\\n background-color: rgba(0, 0, 0, 0.5);\\n }\\n\\n .tcn-tooltip {\\n background: rgba(57, 85, 120, 0.85);\\n box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);\\n color: rgba(255, 255, 255, 1);\\n border-radius: var(--shape-radius-medium);\\n padding: var(--padding-medium);\\n }\\n\\n .tcn-list {\\n gap: var(--gap-medium);\\n .tcn-item {\\n height: 24px;\\n padding: 0px var(--padding-medium);\\n border-radius: var(--shape-radius-medium);\\n }\\n }\\n\\n /* Scaffold: */\\n .tcn-footer,\\n .tcn-header,\\n .tcn-utility-bar {\\n padding-inline: var(--pad-inline, var(--padding-medium));\\n gap: var(--gap-medium);\\n }\\n\\n .tcn-utility-bar {\\n min-height: var(--bar-md);\\n }\\n\\n .tcn-footer,\\n .tcn-header {\\n min-height: var(--bar-lg);\\n }\\n\\n .tcn-scaffold {\\n --scaffold-divide-footer: var(--divide-footer, 1);\\n --scaffold-divide-header: var(--divide-header, 1);\\n --pad-inline: var(--padding-large);\\n\\n /* Border appears on body only when it follows header or utility-bar */\\n :where(.tcn-header) + :where(.tcn-body),\\n :where(.tcn-utility-bar) + :where(.tcn-body) {\\n border-top: calc(var(--scaffold-divide-header) * 1px) solid\\n var(--foreground-color-primary);\\n }\\n\\n /* Border appears on footer only when it follows body and --scaffold-divide-footer is 1 */\\n :where(.tcn-body) + :where(.tcn-footer) {\\n border-top: calc(var(--scaffold-divide-footer) * 1px) solid\\n var(--foreground-color-primary);\\n }\\n\\n :where(.tcn-body) {\\n gap: var(--gap-medium);\\n }\\n }\\n\\n .tcn-frame-veil[data-is-veil=\\\"true\\\"] {\\n background-color: rgba(0, 0, 0, 0.5);\\n }\\n\\n /* MODAL: */\\n .tcn-modal {\\n --divide-header: 0;\\n\\n :where(.tcn-scaffold) {\\n border-radius: var(--shape-radius-medium);\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n border: 1px solid var(--foreground-color-primary);\\n }\\n\\n :where(.tcn-header) {\\n --material: var(--ergo-secondary-dark);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n /* WINDOW: */\\n .tcn-window {\\n --divide-header: 0;\\n\\n :where(.tcn-scaffold) {\\n box-shadow: 0px 4px 34px 0px #00000096;\\n border-radius: var(--shape-radius-medium);\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n border: 2px solid white;\\n }\\n\\n :where(.tcn-header) {\\n --material: var(--ergo-secondary-dark);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n .tcn-pop-confirm {\\n --divide-header: 0;\\n\\n :where(.tcn-scaffold) {\\n --pad-inline: var(--padding-medium);\\n\\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);\\n border-radius: var(--shape-radius-medium);\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n }\\n\\n :where(.tcn-header) {\\n min-height: var(--bar-md);\\n\\n --material: var(--ergo-secondary-dark);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n .tcn-confirm {\\n background-color: var(--background-color-primary);\\n }\\n\\n /* PANEL */\\n .tcn-panel {\\n background-color: var(--background-color-primary);\\n border-radius: var(--shape-radius-medium);\\n overflow: hidden;\\n }\\n\\n /* Card */\\n .tcn-card {\\n --divide-header: 0;\\n\\n background-color: var(--background-color-primary);\\n border-radius: var(--shape-radius-medium);\\n border: 1px solid var(--foreground-color-primary);\\n overflow: hidden;\\n\\n :where(.tcn-header) {\\n min-height: var(--bar-md);\\n\\n --material: var(--ergo-secondary-light);\\n --on-material: var(--ergo-accent-blue);\\n --action: var(--ergo-secondary);\\n --on-action: var(--ergo-white);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n\\n :where(.tcn-utility-bar) {\\n min-height: var(--bar-sm);\\n }\\n }\\n\\n /* SECTION */\\n .tcn-section {\\n --max-section-depth: 4;\\n --section-tab-width: 4px;\\n --section-tab-start: var(--pad-inline, var(--padding-medium));\\n --section-tab-depth: 0;\\n --section-tab: calc(\\n var(--section-tab-start) +\\n (var(--section-tab-width) * var(--section-tab-depth))\\n );\\n --section-action: var(--ergo-secondary);\\n --section-mat: var(--ergo-secondary-light);\\n --section-on-mat: var(--ergo-ink-primary);\\n }\\n\\n .tcn-heading {\\n background-color: #f1f1f1;\\n padding-inline-start: 8px;\\n height: 30px;\\n z-index: 5;\\n }\\n\\n .tcn-section > .tcn-heading {\\n z-index: calc(var(--max-section-depth) - var(--section-tab-depth));\\n padding-inline-start: var(--section-tab);\\n --material: var(--section-mat);\\n --on-material: var(--section-on-mat);\\n --action: var(--section-action);\\n background-color: var(--material);\\n color: var(--on-material);\\n gap: var(--gap-small);\\n }\\n\\n .tcn-section > :not(.tcn-heading, .tcn-section) {\\n padding-inline-start: var(--section-tab);\\n }\\n\\n .tcn-section > .tcn-section {\\n --section-tab-depth: 1;\\n --section-mat: var(--ergo-accent-blue-light);\\n --section-action: var(--ergo-accent-blue);\\n }\\n\\n .tcn-section > .tcn-section > .tcn-section {\\n --section-tab-depth: 2;\\n --section-mat: var(--ergo-accent-green-light);\\n --section-action: var(--ergo-accent-green-dark);\\n }\\n\\n .tcn-section > .tcn-section > .tcn-section > .tcn-section {\\n --section-tab-depth: 3;\\n --section-mat: var(--ergo-tertiary-light);\\n --section-action: var(--ergo-tertiary-dark);\\n }\\n\\n .tcn-caret {\\n --caret-size: 12px;\\n --caret-triangle-height: calc(var(--caret-size) / 2);\\n --caret-triangle-width: var(--caret-size);\\n --caret-triangle-base: var(--caret-triangle-height) solid transparent;\\n --caret-triangle-peak: var(--caret-triangle-width) solid var(--material);\\n\\n width: 0;\\n height: 0;\\n flex-grow: 0;\\n display: inline-block;\\n\\n &[data-direction=\\\"top\\\"] {\\n border-bottom: var(--caret-triangle-peak);\\n border-left: var(--caret-triangle-base);\\n border-right: var(--caret-triangle-base);\\n }\\n\\n &[data-direction=\\\"bottom\\\"] {\\n border-top: var(--caret-triangle-peak);\\n border-left: var(--caret-triangle-base);\\n border-right: var(--caret-triangle-base);\\n }\\n\\n &[data-direction=\\\"start\\\"] {\\n border-right: var(--caret-triangle-peak);\\n border-top: var(--caret-triangle-base);\\n border-bottom: var(--caret-triangle-base);\\n }\\n\\n &[data-direction=\\\"end\\\"] {\\n border-left: var(--caret-triangle-peak);\\n border-top: var(--caret-triangle-base);\\n border-bottom: var(--caret-triangle-base);\\n }\\n }\\n\\n /* ===== TABLE ===== */\\n .tcn-table {\\n --table-pad-inline: var(--pad-inline, var(--padding-medium));\\n\\n --material: var(--ergo-white);\\n --on-material: var(--ergo-ink-primary);\\n --action: var(--ergo-accent-blue);\\n --on-action: var(--ergo-white);\\n background-color: var(--material);\\n color: var(--on-material);\\n border-collapse: separate;\\n display: block;\\n }\\n\\n /* TODO: cleanup - this needs merged with ui-table sticky logic/styles */\\n .tcn-table[data-is-sticky=\\\"true\\\"] {\\n .tcn-tbody {\\n th:first-of-type {\\n border-right: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n }\\n\\n th:last-of-type {\\n border-left: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n }\\n }\\n .tcn-thead {\\n th:first-of-type {\\n border-right: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n }\\n\\n th:last-of-type {\\n border-left: 1px solid color-mix(in srgb, var(--material) 80%, black);\\n }\\n }\\n }\\n\\n .tcn-td {\\n text-align: start;\\n overflow: hidden;\\n white-space: nowrap;\\n text-overflow: ellipsis;\\n }\\n\\n .tcn-thead {\\n /* Border for header row */\\n .tcn-tr {\\n height: var(--bar-md);\\n .tcn-th {\\n border-bottom: 1px solid var(--ergo-grey-light);\\n }\\n .tcn-th:not(:last-of-type):not(:nth-last-of-type(2)) {\\n border-right: 1px solid var(--ergo-grey);\\n }\\n .tcn-th:last-of-type {\\n border-left: 1px solid var(--ergo-grey);\\n }\\n }\\n }\\n\\n .tcn-tfoot {\\n font-weight: bold;\\n /* Border for footer row */\\n .tcn-tr {\\n height: var(--bar-sm);\\n .tcn-th,\\n .tcn-td {\\n border-top: 1px solid var(--ergo-grey-light);\\n }\\n }\\n }\\n\\n /* Header and footer - both are light blue */\\n .tcn-thead,\\n .tcn-tfoot {\\n font-size: 14px;\\n --material: var(--ergo-secondary-light);\\n --on-material: var(--ergo-accent-blue);\\n --action: var(--ergo-secondary);\\n --on-action: var(--ergo-white);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n }\\n\\n .tcn-tr {\\n height: var(--bar-sm);\\n align-content: center;\\n }\\n\\n .tcn-td,\\n .tcn-th {\\n padding-inline: var(--padding-medium);\\n vertical-align: middle;\\n text-align: start;\\n background: var(--material);\\n }\\n\\n /* First column (header, body, footer): use context for pad inline or default 8px */\\n .tcn-table .tcn-tr > .tcn-th:first-child,\\n .tcn-table .tcn-tr > .tcn-td:first-child {\\n padding-inline-start: var(--table-pad-inline);\\n }\\n\\n /* Last column (header, body, footer): use context for pad inline or default 8px */\\n .tcn-table .tcn-tr > .tcn-th:last-child,\\n .tcn-table .tcn-tr > .tcn-td:last-child {\\n padding-inline-end: var(--table-pad-inline);\\n }\\n\\n .tcn-tbody {\\n font-size: 12px;\\n .tcn-tr:nth-of-type(even) {\\n --material: var(--ergo-accent-blue-light);\\n }\\n .tcn-tr:nth-of-type(odd) {\\n --material: var(--ergo-white);\\n }\\n .tcn-tr:hover {\\n --material: color-mix(in srgb, var(--ergo-accent-blue-light), var(--action) 12%);\\n }\\n .tcn-tr[data-is-selected=\\\"true\\\"] {\\n --material: var(--ergo-secondary);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-accent-blue);\\n }\\n\\n .tcn-tr {\\n --material: var(--bg-row);\\n --on-material: var(--ergo-accent-blue);\\n --action: var(--ergo-accent-blue);\\n --on-action: var(--ergo-white);\\n background-color: var(--material);\\n color: var(--on-material);\\n }\\n }\\n}\\n\"","import css from './ergo_theme.css?raw';\nimport '@fontsource/lato';\n\nexport const ergoStyleSheet = new CSSStyleSheet();\nergoStyleSheet.replaceSync(css);\n"],"names":["css","ergoStyleSheet"],"mappings":";AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCGFC,IAAiB,IAAI,cAAA;AAClCA,EAAe,YAAYD,CAAG;"}
package/dist/utility_strip.css ADDED
@@ -0,0 +1 @@
1
+ @layer tcn-system{:where(._utility-strip_23b31df){height:100%;min-width:0}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tcn/ui",
3
- "version": "0.7.0",
3
+ "version": "0.8.1",
4
4
  "type": "module",
5
5
  "description": "",
6
6
  "author": "TCN",
@@ -142,7 +142,7 @@
142
142
  "clsx": "^2.1.1",
143
143
  "react-color": "^2.19.3",
144
144
  "@tcn/icons": "2.2.1",
145
- "@tcn/state": "1.1.1"
145
+ "@tcn/state": "1.2.0"
146
146
  },
147
147
  "scripts": {
148
148
  "build": "vite build",
package/src/actions/index.ts CHANGED
@@ -17,3 +17,4 @@ export {
17
17
  SingleSelectGroup,
18
18
  type SingleSelectGroupProps,
19
19
  } from './button/select_group/single_select_group.js';
20
+ export { Toggle, type ToggleProps } from './toggle/toggle.js';
package/src/form/field_presenters/field_presenter.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ISubscription, Runner, Signal, WeakPromise } from '@tcn/state';
1
+ import { ISubscription, Runner, Signal, IWeakPromise } from '@tcn/state';
2
2
 
3
3
  function fastCopy<T>(value: T): T {
4
4
  return JSON.parse(JSON.stringify(value));
@@ -19,7 +19,7 @@ export interface FieldState<T> {
19
19
 
20
20
  export interface FieldOptions<T> {
21
21
  description?: string;
22
- validate?: (value: T) => Promise<void> | void;
22
+ validate?: (value: T) => Promise<void> | void | IWeakPromise<void>;
23
23
  validateOnChange?: boolean;
24
24
  equalityCheck?: (a: T, b: T) => boolean;
25
25
  copyInitialValue?: (value: T) => T;
@@ -35,7 +35,7 @@ export class FieldPresenter<T> {
35
35
  private _cloneInitialValue: (v: T) => T;
36
36
 
37
37
  private _validationRunner: Runner<void>;
38
- private _validate: (value: T) => Promise<void> | void | WeakPromise<void>;
38
+ private _validate: (value: T) => Promise<void> | void | IWeakPromise<void>;
39
39
  private _subscriptions: ISubscription<any>[];
40
40
  private _validateOnChange: boolean;
41
41
  private _cancelToken = 'field_presenter_cancel';