@tcn/ui 0.14.0 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (116) hide show
  1. package/dist/column.css +1 -1
  2. package/dist/inputs/multiselect/multiselect_inline_values.js +9 -7
  3. package/dist/inputs/multiselect/multiselect_inline_values.js.map +1 -1
  4. package/dist/inputs/multiselect/multiselect_values.js +4 -2
  5. package/dist/inputs/multiselect/multiselect_values.js.map +1 -1
  6. package/dist/layouts/containers/columns/column.d.ts +6 -0
  7. package/dist/layouts/containers/columns/column.d.ts.map +1 -0
  8. package/dist/layouts/containers/columns/column.js +20 -0
  9. package/dist/layouts/containers/columns/column.js.map +1 -0
  10. package/dist/layouts/containers/columns/columns.d.ts +6 -0
  11. package/dist/layouts/containers/columns/columns.d.ts.map +1 -0
  12. package/dist/layouts/containers/columns/columns.js +11 -0
  13. package/dist/layouts/containers/columns/columns.js.map +1 -0
  14. package/dist/layouts/index.d.ts +3 -5
  15. package/dist/layouts/index.d.ts.map +1 -1
  16. package/dist/layouts/index.js +27 -27
  17. package/dist/layouts/section/detail.d.ts +4 -0
  18. package/dist/layouts/section/detail.d.ts.map +1 -0
  19. package/dist/layouts/section/detail.js +11 -0
  20. package/dist/layouts/section/detail.js.map +1 -0
  21. package/dist/layouts/section/heading.js +1 -1
  22. package/dist/layouts/section/index.d.ts +4 -0
  23. package/dist/layouts/section/index.d.ts.map +1 -0
  24. package/dist/layouts/section/index.js +9 -0
  25. package/dist/layouts/section/index.js.map +1 -0
  26. package/dist/layouts/section/section.js +1 -1
  27. package/dist/section.css +1 -1
  28. package/dist/section.module-BXlxYmJK.js +5 -0
  29. package/dist/section.module-BXlxYmJK.js.map +1 -0
  30. package/dist/surfaces/pop_confirm/pop_confirm.js +4 -4
  31. package/dist/term.css +1 -0
  32. package/dist/themes/build_stylesheet.d.ts +2 -0
  33. package/dist/themes/build_stylesheet.d.ts.map +1 -0
  34. package/dist/themes/build_stylesheet.js +9 -0
  35. package/dist/themes/build_stylesheet.js.map +1 -0
  36. package/dist/themes/theme_variables.d.ts +7 -0
  37. package/dist/themes/theme_variables.d.ts.map +1 -1
  38. package/dist/themes/theme_variables.js +16 -9
  39. package/dist/themes/theme_variables.js.map +1 -1
  40. package/dist/themes/themes/ergo/ergo_theme.css +1 -1
  41. package/dist/themes/themes/ergo/ergo_theme.d.ts.map +1 -1
  42. package/dist/themes/themes/ergo/ergo_theme.js +281 -161
  43. package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
  44. package/dist/themes/themes/ergo/tokens/system_tokens.css +1 -0
  45. package/dist/themes/themes/ergo/tokens/theme_tokens.css +1 -0
  46. package/dist/tokens/index.d.ts +1 -0
  47. package/dist/tokens/index.d.ts.map +1 -1
  48. package/dist/tokens/index.js +4 -2
  49. package/dist/tokens/index.js.map +1 -1
  50. package/dist/tokens/key/key.d.ts +8 -1
  51. package/dist/tokens/key/key.d.ts.map +1 -1
  52. package/dist/tokens/key/key.js +20 -3
  53. package/dist/tokens/key/key.js.map +1 -1
  54. package/dist/tokens/term/term.d.ts +4 -0
  55. package/dist/tokens/term/term.d.ts.map +1 -0
  56. package/dist/tokens/term/term.js +20 -0
  57. package/dist/tokens/term/term.js.map +1 -0
  58. package/dist/tokens/value/value.d.ts +8 -1
  59. package/dist/tokens/value/value.d.ts.map +1 -1
  60. package/dist/tokens/value/value.js +23 -5
  61. package/dist/tokens/value/value.js.map +1 -1
  62. package/dist/utils/types/variations.d.ts +1 -0
  63. package/dist/utils/types/variations.d.ts.map +1 -1
  64. package/dist/value.css +1 -0
  65. package/dist/value.module-DFaCouFD.js +5 -0
  66. package/dist/value.module-DFaCouFD.js.map +1 -0
  67. package/package.json +1 -1
  68. package/src/layouts/__stories__/columns.stories.tsx +46 -0
  69. package/src/layouts/__stories__/rail.stories.tsx +4 -4
  70. package/src/layouts/__stories__/utils.tsx +4 -4
  71. package/src/layouts/containers/columns/column.module.css +14 -0
  72. package/src/layouts/containers/columns/column.tsx +22 -0
  73. package/src/layouts/containers/columns/columns.tsx +16 -0
  74. package/src/layouts/index.ts +3 -5
  75. package/src/layouts/section/__stories__/section.stories.tsx +79 -50
  76. package/src/layouts/section/detail.tsx +14 -0
  77. package/src/layouts/section/index.ts +3 -0
  78. package/src/layouts/section/section.module.css +0 -36
  79. package/src/surfaces/page/page.stories.tsx +32 -28
  80. package/src/surfaces/panel/__stories__/panel.stories.tsx +147 -40
  81. package/src/themes/build_stylesheet.ts +5 -0
  82. package/src/themes/theme_variables.ts +9 -0
  83. package/src/themes/themes/ergo/ergo_theme.css +175 -222
  84. package/src/themes/themes/ergo/ergo_theme.ts +4 -2
  85. package/src/themes/themes/ergo/tokens/system_tokens.css +68 -0
  86. package/src/themes/themes/ergo/tokens/theme_tokens.css +99 -0
  87. package/src/tokens/index.ts +1 -0
  88. package/src/tokens/key/key.tsx +23 -2
  89. package/src/tokens/term/term.module.css +14 -0
  90. package/src/tokens/term/term.stories.tsx +84 -0
  91. package/src/tokens/term/term.tsx +20 -0
  92. package/src/tokens/value/value.module.css +5 -0
  93. package/src/tokens/value/value.tsx +24 -2
  94. package/src/utils/types/variations.ts +1 -0
  95. package/dist/layouts/column/column.d.ts +0 -10
  96. package/dist/layouts/column/column.d.ts.map +0 -1
  97. package/dist/layouts/column/column.js +0 -52
  98. package/dist/layouts/column/column.js.map +0 -1
  99. package/dist/layouts/containers/side/side.d.ts +0 -6
  100. package/dist/layouts/containers/side/side.d.ts.map +0 -1
  101. package/dist/layouts/containers/side/side.js +0 -22
  102. package/dist/layouts/containers/side/side.js.map +0 -1
  103. package/dist/layouts/row/row.d.ts +0 -4
  104. package/dist/layouts/row/row.d.ts.map +0 -1
  105. package/dist/layouts/row/row.js +0 -11
  106. package/dist/layouts/row/row.js.map +0 -1
  107. package/dist/row.css +0 -1
  108. package/dist/section.module-0wyGkhDg.js +0 -5
  109. package/dist/section.module-0wyGkhDg.js.map +0 -1
  110. package/dist/side.css +0 -1
  111. package/src/layouts/column/column.module.css +0 -35
  112. package/src/layouts/column/column.tsx +0 -57
  113. package/src/layouts/containers/side/side.module.css +0 -7
  114. package/src/layouts/containers/side/side.tsx +0 -25
  115. package/src/layouts/row/row.module.css +0 -5
  116. package/src/layouts/row/row.tsx +0 -15
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-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 Component Tokens ========== */\\n --font-size-input: 12px;\\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-xs: 2px;\\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 --action-sm: 20px;\\n --action-md: 24px;\\n --action-lg: 32px;\\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 --shape-triangle-medium: 12px;\\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: #fafafa;\\n --background-color-tertiary: #f1f1f1;\\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 --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 :not(.tcn-select) {\\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\\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-fab {\\n border-radius: 50%;\\n }\\n\\n .tcn-mobile-button {\\n --btn-size-base: 44px;\\n --btn-pad-base: 16px;\\n --btn-size-delta: 8px;\\n --btn-pad-delta: 4px;\\n\\n font-size: calc(16px * var(--scalar, 1));\\n }\\n\\n .tcn-mobile-button[data-size=\\\"sm\\\"] {\\n --btn-size-base: 36px;\\n }\\n\\n .tcn-mobile-button[data-size=\\\"lg\\\"] {\\n --btn-size-base: 52px;\\n }\\n\\n .tcn-button-group .tcn-button-group-button.tcn-mobile-button {\\n --btn-size-base: 44px;\\n --btn-pad-base: 16px;\\n --btn-size-delta: 8px;\\n --btn-pad-delta: 4px;\\n\\n font-size: calc(16px * var(--scalar, 1));\\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-start-start-radius: var(--shape-radius-medium);\\n border-end-start-radius: var(--shape-radius-medium);\\n }\\n .tcn-button-group-button:last-child {\\n border-start-end-radius: var(--shape-radius-medium);\\n border-end-end-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 font-size: 12px;\\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 padding-block: 1px;\\n padding-inline: 2px;\\n\\n .tcn-tabs-list {\\n height: 20px;\\n gap: var(--gap-xs);\\n .tcn-tab-item {\\n border-radius: var(--shape-radius-medium);\\n min-height: 20px;\\n }\\n }\\n }\\n\\n /* ===== MATERIAL ===== */\\n\\n .material {\\n background-color: var(--material);\\n color: var(--on-material);\\n }\\n\\n /* Divider: use material-line; emphasis variants for strong/faint */\\n .tcn-divider-line,\\n .tcn-divider-line[data-emphasis=\\\"normal\\\"] {\\n background: var(--material-line);\\n }\\n .tcn-divider-line[data-emphasis=\\\"strong\\\"] {\\n background: color-mix(in srgb, var(--material-line) 80%, black 20%);\\n }\\n .tcn-divider-line[data-emphasis=\\\"faint\\\"] {\\n background: color-mix(in srgb, var(--material-line) 80%, white 20%);\\n }\\n\\n /* ===== SURFACES ===== */\\n .tcn-draggable[data-is-draggable=\\\"true\\\"] {\\n .tcn-drag-handle {\\n cursor: move;\\n }\\n }\\n\\n .tcn-frame-dialog {\\n border: inherit;\\n }\\n\\n .tcn-tethered {\\n /* Managing offset of the indicator in relation for the tethered element\\n pad defaults to 0, but should be set depending on the surface */\\n\\n --tether-pad-x: 0px;\\n --tether-pad-y: 0px;\\n --indicator-pad-x: 0px;\\n --indicator-pad-y: 0px;\\n --tether-pad-size: 0px;\\n --tether-pad-pos: var(--tether-pad-size);\\n --tether-pad-neg: calc(-1 * var(--tether-pad-size));\\n left: calc(\\n var(--tether-pad-x, 0) -\\n var(--indicator-pad-x, 0) +\\n var(--tethered-left, 0)\\n );\\n top: calc(var(--tether-pad-y, 0) + var(--tethered-top, 0));\\n\\n :where(.tcn-tethered-origin-indicator) {\\n left: calc(var(--indicator-pad-x, 0) + var(--tethered-origin-delta-x, 0));\\n top: calc(var(--indicator-pad-y, 0) + var(--tethered-origin-delta-y, 0));\\n }\\n\\n &[data-h-anchor=\\\"start\\\"] {\\n --tether-pad-x: var(--tether-pad-pos);\\n }\\n\\n &[data-h-anchor=\\\"end\\\"] {\\n --tether-pad-x: var(--tether-pad-neg);\\n }\\n\\n &[data-h-origin=\\\"start\\\"] {\\n --indicator-pad-x: var(--tether-pad-pos);\\n }\\n\\n &[data-h-origin=\\\"end\\\"] {\\n --indicator-pad-x: var(--tether-pad-neg);\\n }\\n\\n &[data-v-origin=\\\"center\\\"] {\\n --indicator-pad-x: 0px;\\n --tether-pad-x: 0px;\\n &[data-v-anchor=\\\"top\\\"] {\\n --tether-pad-y: var(--tether-pad-pos);\\n }\\n\\n &[data-v-anchor=\\\"bottom\\\"] {\\n --tether-pad-y: var(--tether-pad-neg);\\n }\\n }\\n\\n &[data-anchor-direction=\\\"bottom\\\"] {\\n padding-bottom: var(--shape-triangle-medium);\\n }\\n\\n &[data-anchor-direction=\\\"top\\\"] {\\n padding-top: var(--shape-triangle-medium);\\n }\\n\\n &[data-anchor-direction=\\\"start\\\"] {\\n padding-left: var(--shape-triangle-medium);\\n }\\n\\n &[data-anchor-direction=\\\"end\\\"] {\\n padding-right: var(--shape-triangle-medium);\\n }\\n }\\n\\n .tcn-tooltip {\\n --tether-pad-size: 16px;\\n background: transparent;\\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 .tcn-tooltip-label {\\n box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);\\n color: var(--on-material);\\n background: var(--material);\\n border-radius: var(--shape-radius-medium);\\n padding: var(--padding-medium);\\n }\\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 /* Rail: */\\n .tcn-utility-strip {\\n min-width: var(--bar-md);\\n }\\n\\n .tcn-utility-strip,\\n .tcn-side {\\n padding-block: var(--padding-medium);\\n gap: var(--gap-medium);\\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 nested scaffold/rail when it follows header or utility-bar */\\n :where(.tcn-header) + :where(.tcn-scaffold),\\n :where(.tcn-header) + :where(.tcn-rail),\\n :where(.tcn-utility-bar) + :where(.tcn-scaffold),\\n :where(.tcn-utility-bar) + :where(.tcn-rail) {\\n border-top: calc(var(--scaffold-divide-header) * 1px) solid\\n var(--foreground-color-primary);\\n }\\n\\n /* Border appears on footer when it follows scaffold/rail */\\n :where(.tcn-scaffold) + :where(.tcn-footer),\\n :where(.tcn-rail) + :where(.tcn-footer) {\\n border-top: calc(var(--scaffold-divide-footer) * 1px) solid\\n var(--foreground-color-primary);\\n }\\n }\\n\\n .tcn-frame-veil[data-is-veil=\\\"true\\\"] {\\n background-color: rgba(0, 0, 0, 0.5);\\n }\\n\\n /* PAGE: */\\n .tcn-page {\\n --divide-header: 0;\\n --divide-footer: 0;\\n --material: var(--background-color-tertiary);\\n background-color: var(--material);\\n padding: var(--padding-medium);\\n }\\n\\n /* TODO: remove - shim to replicate Column at Page level */\\n .tcn-page > .tcn-scaffold-stack > .tcn-scaffold > .tcn-scaffold-stack,\\n .tcn-page > .tcn-scaffold-stack > .tcn-rail > .tcn-rail-stack {\\n gap: var(--gap-medium);\\n }\\n\\n /* MODAL: */\\n .tcn-modal {\\n --divide-header: 0;\\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: 1px solid var(--foreground-color-primary);\\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 /* DRAWER: */\\n .tcn-drawer {\\n --divide-header: 0;\\n box-shadow: 0px 4px 34px 0px #00000096;\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\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 box-shadow: 0px 4px 34px 0px #00000096;\\n --divide-header: 0;\\n border-radius: var(--shape-radius-medium);\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n border: 2px solid white;\\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 --tether-pad-size: 16px;\\n --pad-inline: var(--padding-medium);\\n\\n .tcn-pop-confirm-scaffold > .tcn-scaffold-stack {\\n border-radius: var(--shape-radius-medium);\\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);\\n background-color: var(--background-color-primary);\\n }\\n\\n :where(.tcn-tethered-origin-indicator) {\\n --material: var(--ergo-white);\\n }\\n\\n /* Set the indicator to match the header color */\\n &[data-v-origin=\\\"top\\\"] {\\n :where(.tcn-tethered-origin-indicator) {\\n --material: var(--ergo-secondary-dark);\\n }\\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 --material: var(--background-color-primary);\\n background-color: var(--material);\\n }\\n\\n .tcn-bar {\\n gap: var(--gap-medium);\\n\\n /* Add a divider between groups unless there is a spacer after a group */\\n :where(.tcn-group:not(:last-child):not(:has(+ .tcn-spacer)))::after {\\n content: \\\"\\\";\\n display: block;\\n min-width: 2px;\\n height: 18px;\\n background: var(--ergo-grey);\\n border-radius: var(--shape-radius-small);\\n align-self: center;\\n }\\n }\\n\\n /* PANEL */\\n .tcn-panel {\\n --divide-header: 1;\\n --divide-footer: 1;\\n --material: var(--background-color-primary);\\n background-color: var(--material);\\n border-radius: var(--shape-radius-medium);\\n overflow: hidden;\\n\\n :where(.tcn-title) {\\n font-size: 18px;\\n }\\n }\\n\\n /* Aside */\\n .tcn-aside {\\n --divide-header: 1;\\n --divide-footer: 1;\\n\\n --material: var(--background-color-secondary);\\n background-color: var(--material);\\n overflow: hidden;\\n\\n :where(.tcn-header) {\\n min-height: var(--bar-md);\\n }\\n\\n :where(.tcn-footer) {\\n min-height: var(--bar-md);\\n }\\n\\n :where(.tcn-title) {\\n font-size: 16px;\\n }\\n }\\n\\n /* Card */\\n .tcn-card {\\n --divide-header: 0;\\n --divide-footer: 1;\\n --pad-inline: var(--padding-medium);\\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 :where(.tcn-scaffold-stack) > :where(.tcn-scaffold) > :where(.tcn-scaffold-stack),\\n :where(.tcn-scaffold-stack) > :where(.tcn-rail) > :where(.tcn-rail-stack),\\n :where(.tcn-rail-stack) > :where(.tcn-scaffold) > :where(.tcn-scaffold-stack),\\n :where(.tcn-rail-stack) > :where(.tcn-rail) > :where(.tcn-rail-stack) {\\n padding-inline: var(--padding-medium);\\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: var(--pad-inline, var(--padding-medium));\\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 /* TODO: Consider an opt-in model (E) where Section exposes --section-tab but does not\\n apply padding-inline-start automatically. A dedicated component (e.g. SectionContent)\\n would opt in via the variable, and surfaces like Card would be unaffected by default.\\n This would decouple Section from needing to know about every surface type and give\\n clearer boundaries between \\\"content that lives inside a section\\\" vs \\\"a surface placed\\n at section level\\\". High blast-radius refactor — table for a future pass. */\\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: var(--shape-triangle-medium);\\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: var(--caret-size);\\n height: var(--caret-size);\\n min-width: var(--caret-size);\\n min-height: var(--caret-size);\\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-accent-blue);\\n --on-action: var(--ergo-white);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n\\n .tcn-tr .tcn-th:first-child {\\n padding-inline: var(--table-pad-inline);\\n }\\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 /* ===== INPUTS ===== */\\n .tcn-entry,\\n .tcn-control {\\n --act: var(--action);\\n --mat: var(--material);\\n --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);\\n\\n font-size: var(--font-size-input);\\n border: 1px solid var(--ergo-grey);\\n box-sizing: border-box;\\n min-height: var(--action-md);\\n border-radius: var(--shape-radius-medium);\\n padding-inline: 4px;\\n }\\n\\n .tcn-radio-label,\\n .tcn-select-selected-label {\\n font-size: var(--font-size-input);\\n }\\n\\n .tcn-control[data-is-disabled=\\\"false\\\"]:hover {\\n background: var(--act-raised);\\n }\\n\\n .tcn-control:focus-within {\\n outline: 2px solid var(--ergo-primary);\\n outline-offset: 2px;\\n }\\n\\n .tcn-control:focus {\\n border: 1px solid var(--act);\\n }\\n\\n .tcn-control::placeholder {\\n color: var(--ergo-grey);\\n }\\n\\n .tcn-control[data-is-disabled=\\\"true\\\"] {\\n cursor: not-allowed;\\n background: var(--material-disabled);\\n color: var(--on-material-disabled);\\n }\\n\\n .tcn-control[data-is-disabled=\\\"true\\\"]::placeholder {\\n color: var(--on-material-disabled);\\n }\\n\\n .tcn-control {\\n display: flex;\\n justify-content: center;\\n gap: var(--gap-small);\\n }\\n\\n .tcn-control-row {\\n min-height: 22px;\\n height: auto;\\n align-items: center;\\n gap: var(--gap-small);\\n padding-block: 2px;\\n }\\n\\n .tcn-control-row > .tcn-icon {\\n color: var(--ergo-grey);\\n }\\n\\n .tcn-control .tcn-entry {\\n border: none;\\n background: transparent;\\n padding: 0;\\n min-height: unset;\\n border-radius: 0;\\n height: 100%;\\n flex-grow: 1;\\n\\n &:hover,\\n &:active,\\n &:focus-visible,\\n &:focus {\\n outline: none;\\n border: none;\\n background: transparent;\\n }\\n }\\n\\n .tcn-input {\\n height: auto;\\n }\\n\\n .tcn-textarea,\\n .tcn-input {\\n cursor: text;\\n }\\n\\n .tcn-control-set {\\n border-radius: var(--shape-radius-medium);\\n\\n &:focus-within {\\n outline: 2px solid var(--ergo-primary);\\n outline-offset: 2px;\\n }\\n\\n .tcn-control-set-item {\\n z-index: 1;\\n border-radius: 0;\\n height: auto;\\n min-height: var(--action-md);\\n padding-block: 0;\\n &:focus,\\n &:focus-visible {\\n z-index: 3;\\n outline: none;\\n }\\n }\\n\\n .tcn-control-set-item:first-child {\\n border-top-left-radius: var(--shape-radius-medium);\\n border-bottom-left-radius: var(--shape-radius-medium);\\n }\\n\\n .tcn-control-set-item:not(:last-child) {\\n margin-right: -1px;\\n }\\n\\n .tcn-control-set-item:last-child {\\n border-top-right-radius: var(--shape-radius-medium);\\n border-bottom-right-radius: var(--shape-radius-medium);\\n }\\n\\n .tcn-select,\\n .tcn-button,\\n .tcn-button[data-hierarchy] {\\n border: 1px solid var(--ergo-grey);\\n height: auto;\\n min-height: var(--action-md);\\n min-width: var(--action-md);\\n box-sizing: border-box;\\n &:hover,\\n &[data-hover] {\\n transform: none;\\n }\\n }\\n\\n .tcn-button.tcn-select,\\n .tcn-button[data-hierarchy].tcn-select {\\n border-color: var(--ergo-grey);\\n }\\n\\n .tcn-select:focus-visible,\\n .tcn-button:focus-visible,\\n .tcn-button[data-hierarchy]:focus-visible {\\n border-color: var(--ergo-primary);\\n }\\n }\\n\\n .tcn-slider[data-is-disabled=\\\"true\\\"] {\\n &::-webkit-slider-runnable-track {\\n background: var(--ergo-grey-light);\\n }\\n\\n &::-webkit-slider-thumb {\\n background-color: var(--ergo-white);\\n border: 1px solid var(--ergo-grey-light);\\n }\\n }\\n\\n .tcn-checkbox {\\n --checkbox-color: var(--action, var(--ergo-primary));\\n\\n border-color: var(--checkbox-color);\\n\\n &:focus-visible,\\n &:focus {\\n outline: 2px solid var(--checkbox-color);\\n outline-offset: 2px;\\n }\\n\\n &[data-is-disabled=\\\"true\\\"] {\\n cursor: not-allowed;\\n border-color: var(--material-disabled);\\n }\\n\\n &[data-checked=\\\"true\\\"] {\\n background-color: var(--checkbox-color);\\n }\\n\\n &[data-checked=\\\"true\\\"][data-is-disabled=\\\"true\\\"] {\\n background-color: var(--ergo-grey-light);\\n }\\n\\n &[data-checked=\\\"false\\\"][data-is-disabled=\\\"true\\\"] {\\n background: var(--material);\\n border-color: var(--ergo-grey-light);\\n color: var(--ergo-grey-light);\\n }\\n\\n &[data-is-disabled=\\\"false\\\"]:active {\\n background-color: var(--checkbox-color);\\n }\\n }\\n\\n .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"false\\\"],\\n .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"true\\\"] {\\n outline: 2px solid var(--ergo-primary);\\n outline-offset: 2px;\\n }\\n\\n /* Quick fix to use some of the default module styles.*/\\n .tcn-input,\\n .tcn-select,\\n .tcn-slider,\\n .tcn-textarea,\\n .tcn-checkbox,\\n .tcn-switch-wrapper,\\n .tcn-date-picker,\\n .tcn-date-picker-year-selector,\\n .tcn-radio,\\n .tcn-date-picker-input,\\n .tcn-mobile-date-picker,\\n .tcn-mobile-date-picker-year-selector,\\n .tcn-suggestion-list-search-input,\\n .tcn-suggestion-list {\\n --accent-color: var(--ergo-primary);\\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/tokens/theme_tokens.css?raw","../../../../src/themes/themes/ergo/tokens/system_tokens.css?raw","../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"@layer tcn-theme {\\n :root {\\n /* ========== Ergo Palette ========== */\\n --ergo-white: #ffffff;\\n\\n --ergo-primary: #ce6b2b;\\n --ergo-primary-light: #fff7f0;\\n --ergo-primary-dark: #b86128;\\n\\n --ergo-secondary: #669eb4;\\n --ergo-secondary-light: #ecf4fb;\\n --ergo-secondary-dark: #497485;\\n\\n --ergo-tertiary: #dfd7cd;\\n --ergo-tertiary-light: #f9f4ed;\\n --ergo-tertiary-dark: #7e6c5d;\\n\\n --ergo-accent-blue: #395578;\\n --ergo-accent-blue-light: #f3f4f6;\\n --ergo-accent-blue-dark: #627083;\\n\\n --ergo-accent-green: #97bba3;\\n --ergo-accent-green-light: #eef8ef;\\n --ergo-accent-green-dark: #4f785c;\\n\\n --ergo-accent-yellow: #dbc97e;\\n --ergo-accent-yellow-light: #fef9e7;\\n --ergo-accent-yellow-dark: #82722b;\\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 --ergo-status-red-light: #fff4f4;\\n\\n --ergo-status-yellow: #ffd439;\\n --ergo-status-yellow-dark: #dbb735;\\n --ergo-status-yellow-light: #ffeca9;\\n\\n --ergo-status-blue: var(--ergo-secondary);\\n --ergo-status-blue-dark: var(--ergo-secondary-dark);\\n --ergo-status-blue-light: var(--ergo-secondary-light);\\n\\n --ergo-status-green: #3fbc6a;\\n --ergo-status-green-dark: #2d904f;\\n --ergo-status-green-light: #87e8a8;\\n\\n --ergo-material-bg-primary: #ffffff;\\n --ergo-material-bg-secondary: #fafafa;\\n --ergo-material-bg-tertiary: #f1f1f1;\\n --ergo-material-bg-quaternary: #ffffff;\\n\\n --ergo-material-overlay: var(--ergo-secondary-dark);\\n --ergo-material-border: var(--ergo-grey);\\n --ergo-material-divider: var(--ergo-grey);\\n --ergo-material-disabled-outline: var(--ergo-grey-light);\\n --ergo-material-disabled-fill: var(--ergo-grey);\\n\\n /* ========== Ergo Text ========== */\\n --ergo-text-size-input: 12px;\\n --ergo-text-size-default: 12px;\\n --ergo-text-color-primary: var(--ergo-accent-blue);\\n --ergo-text-color-inverse: var(--ergo-white);\\n --ergo-text-color-disabled-outline: var(--ergo-grey);\\n --ergo-text-color-disabled-fill: var(--ergo-white);\\n\\n /* ========== Spacing ========== */\\n --ergo-spacing-xs: 2px;\\n --ergo-spacing-sm: 4px;\\n --ergo-spacing-md: 8px;\\n --ergo-spacing-lg: 16px;\\n --ergo-spacing-xl: 32px;\\n\\n /* ========== Sizing ========== */\\n --ergo-sizing-bar-xs: 16px;\\n --ergo-sizing-bar-sm: 24px;\\n --ergo-sizing-bar-md: 32px;\\n --ergo-sizing-bar-lg: 40px;\\n --ergo-sizing-bar-xl: 48px;\\n\\n --ergo-sizing-action-sm: 20px;\\n --ergo-sizing-action-md: 24px;\\n --ergo-sizing-action-lg: 32px;\\n\\n /* ========== Shape ========== */\\n --ergo-shape-radius-small: 2px;\\n --ergo-shape-radius-medium: 4px;\\n --ergo-shape-radius-large: 8px;\\n --ergo-shape-triangle-medium: 12px;\\n\\n /* Default Material - TODO: move to system once blackcat support 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\"","export default \"@layer tcn-theme {\\n :root {\\n /* ========== Blackcat System Tokens ========== */\\n --scalar: 1;\\n --accent-color: var(--ergo-primary);\\n\\n /* Typography */\\n --font-color: var(--ergo-text-color-primary);\\n --font-family: \\\"Lato\\\", sans-serif;\\n --font-size: var(--ergo-text-size-default);\\n\\n /* Spacing */\\n --gap-small: var(--ergo-spacing-sm);\\n --gap-medium: var(--ergo-spacing-md);\\n --gap-large: var(--ergo-spacing-lg);\\n\\n --padding-small: var(--ergo-spacing-sm);\\n --padding-medium: var(--ergo-spacing-md);\\n --padding-large: var(--ergo-spacing-lg);\\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 */\\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 /* Palette */\\n --primary-color-faint: var(--ergo-grey-light);\\n --primary-color: var(--ergo-primary);\\n --primary-color-strong: var(--ergo-primary-dark);\\n\\n --secondary-color-faint: var(--ergo-secondary-light);\\n --secondary-color: var(--ergo-secondary);\\n --secondary-color-strong: var(--ergo-secondary-dark);\\n\\n --tertiary-color-faint: var(--ergo-tertiary-light);\\n --tertiary-color: var(--ergo-tertiary);\\n --tertiary-color-strong: var(--ergo-tertiary-dark);\\n\\n --quaternary-color-faint: var(--ergo-accent-blue-light);\\n --quaternary-color: var(--ergo-accent-blue);\\n --quaternary-color-strong: var(--ergo-accent-blue-dark);\\n\\n --background-color-primary: var(--ergo-material-bg-primary);\\n --background-color-secondary: var(--ergo-material-bg-secondary);\\n --background-color-tertiary: var(--ergo-material-bg-tertiary);\\n --background-color-quaternary: var(--ergo-material-bg-quaternary);\\n\\n /* Not sure what other text colors are needed */\\n --foreground-color-primary: var(--ergo-text-color-primary);\\n --foreground-color-secondary: var(--ergo-text-color-primary);\\n --foreground-color-tertiary: var(--ergo-text-color-primary);\\n --foreground-color-quaternary: var(--ergo-text-color-primary);\\n }\\n}\\n\"","export default \"@layer tcn-theme {\\n /* ===== CSS VARIABLES ===== */\\n\\n .tcn-theme-root {\\n font-family: var(--font-family);\\n color: var(--font-color);\\n /* TODO: move to system */\\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 --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(--ergo-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 :not(.tcn-select) {\\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\\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-fab {\\n border-radius: 50%;\\n }\\n\\n .tcn-mobile-button {\\n --btn-size-base: 44px;\\n --btn-pad-base: 16px;\\n --btn-size-delta: 8px;\\n --btn-pad-delta: 4px;\\n\\n font-size: calc(16px * var(--scalar, 1));\\n }\\n\\n .tcn-mobile-button[data-size=\\\"sm\\\"] {\\n --btn-size-base: 36px;\\n }\\n\\n .tcn-mobile-button[data-size=\\\"lg\\\"] {\\n --btn-size-base: 52px;\\n }\\n\\n .tcn-button-group .tcn-button-group-button.tcn-mobile-button {\\n --btn-size-base: 44px;\\n --btn-pad-base: 16px;\\n --btn-size-delta: 8px;\\n --btn-pad-delta: 4px;\\n\\n font-size: calc(16px * var(--scalar, 1));\\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-start-start-radius: var(--ergo-shape-radius-medium);\\n border-end-start-radius: var(--ergo-shape-radius-medium);\\n }\\n .tcn-button-group-button:last-child {\\n border-start-end-radius: var(--ergo-shape-radius-medium);\\n border-end-end-radius: var(--ergo-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(--ergo-material-disabled-outline);\\n border: 1px solid var(--ergo-material-disabled-outline);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n background: var(--ergo-material-disabled-outline);\\n color: white;\\n border: 1px solid var(--ergo-material-disabled-outline);\\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(--ergo-shape-radius-medium);\\n border-bottom-left-radius: var(--ergo-shape-radius-medium);\\n }\\n .tcn-select-group-option:last-child {\\n border-top-right-radius: var(--ergo-shape-radius-medium);\\n border-bottom-right-radius: var(--ergo-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(--ergo-material-divider);\\n pointer-events: none;\\n z-index: 1;\\n }\\n }\\n\\n /* Inline */\\n .tcn-tabs-bar[data-variant=\\\"inline\\\"] {\\n font-size: 12px;\\n min-width: min-content;\\n width: auto;\\n flex-grow: 0;\\n border-radius: 6px;\\n border: 1px solid var(--on-material);\\n padding: 2px;\\n\\n .tcn-tabs-list {\\n height: 20px;\\n gap: var(--ergo-spacing-xs);\\n .tcn-tab-item {\\n border-radius: var(--ergo-shape-radius-medium);\\n min-height: 20px;\\n }\\n }\\n }\\n\\n /* ===== MATERIAL ===== */\\n\\n .material {\\n background-color: var(--material);\\n color: var(--on-material);\\n }\\n\\n /* Divider: use material-line; emphasis variants for strong/faint */\\n .tcn-divider-line,\\n .tcn-divider-line[data-emphasis=\\\"normal\\\"] {\\n background: var(--material-line);\\n }\\n .tcn-divider-line[data-emphasis=\\\"strong\\\"] {\\n background: color-mix(in srgb, var(--material-line) 80%, black 20%);\\n }\\n .tcn-divider-line[data-emphasis=\\\"faint\\\"] {\\n background: color-mix(in srgb, var(--material-line) 80%, white 20%);\\n }\\n\\n /* ===== SURFACES ===== */\\n .tcn-draggable[data-is-draggable=\\\"true\\\"] {\\n .tcn-drag-handle {\\n cursor: move;\\n }\\n }\\n\\n .tcn-frame-dialog {\\n border: inherit;\\n }\\n\\n .tcn-tethered {\\n /* Managing offset of the indicator in relation for the tethered element\\n pad defaults to 0, but should be set depending on the surface */\\n\\n --tether-pad-x: 0px;\\n --tether-pad-y: 0px;\\n --indicator-pad-x: 0px;\\n --indicator-pad-y: 0px;\\n --tether-pad-size: 0px;\\n --tether-pad-pos: var(--tether-pad-size);\\n --tether-pad-neg: calc(-1 * var(--tether-pad-size));\\n left: calc(\\n var(--tether-pad-x, 0) -\\n var(--indicator-pad-x, 0) +\\n var(--tethered-left, 0)\\n );\\n top: calc(var(--tether-pad-y, 0) + var(--tethered-top, 0));\\n\\n :where(.tcn-tethered-origin-indicator) {\\n left: calc(var(--indicator-pad-x, 0) + var(--tethered-origin-delta-x, 0));\\n top: calc(var(--indicator-pad-y, 0) + var(--tethered-origin-delta-y, 0));\\n }\\n\\n &[data-h-anchor=\\\"start\\\"] {\\n --tether-pad-x: var(--tether-pad-pos);\\n }\\n\\n &[data-h-anchor=\\\"end\\\"] {\\n --tether-pad-x: var(--tether-pad-neg);\\n }\\n\\n &[data-h-origin=\\\"start\\\"] {\\n --indicator-pad-x: var(--tether-pad-pos);\\n }\\n\\n &[data-h-origin=\\\"end\\\"] {\\n --indicator-pad-x: var(--tether-pad-neg);\\n }\\n\\n &[data-v-origin=\\\"center\\\"] {\\n --indicator-pad-x: 0px;\\n --tether-pad-x: 0px;\\n &[data-v-anchor=\\\"top\\\"] {\\n --tether-pad-y: var(--tether-pad-pos);\\n }\\n\\n &[data-v-anchor=\\\"bottom\\\"] {\\n --tether-pad-y: var(--tether-pad-neg);\\n }\\n }\\n\\n &[data-anchor-direction=\\\"bottom\\\"] {\\n padding-bottom: var(--ergo-shape-triangle-medium);\\n }\\n\\n &[data-anchor-direction=\\\"top\\\"] {\\n padding-top: var(--ergo-shape-triangle-medium);\\n }\\n\\n &[data-anchor-direction=\\\"start\\\"] {\\n padding-left: var(--ergo-shape-triangle-medium);\\n }\\n\\n &[data-anchor-direction=\\\"end\\\"] {\\n padding-right: var(--ergo-shape-triangle-medium);\\n }\\n }\\n\\n .tcn-tooltip {\\n --tether-pad-size: 16px;\\n background: transparent;\\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 .tcn-tooltip-label {\\n box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);\\n color: var(--on-material);\\n background: var(--material);\\n border-radius: var(--ergo-shape-radius-medium);\\n padding: var(--padding-medium);\\n }\\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(--ergo-shape-radius-medium);\\n }\\n }\\n /* Rail: */\\n .tcn-utility-strip {\\n min-width: var(--ergo-sizing-bar-md);\\n }\\n\\n .tcn-utility-strip {\\n padding-block: var(--padding-medium);\\n gap: var(--gap-medium);\\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(--ergo-sizing-bar-md);\\n }\\n\\n .tcn-footer,\\n .tcn-header {\\n min-height: var(--ergo-sizing-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 nested scaffold/rail when it follows header or utility-bar */\\n :where(.tcn-header) + :where(.tcn-scaffold),\\n :where(.tcn-header) + :where(.tcn-rail),\\n :where(.tcn-utility-bar) + :where(.tcn-scaffold),\\n :where(.tcn-utility-bar) + :where(.tcn-rail) {\\n border-top: calc(var(--scaffold-divide-header) * 1px) solid\\n var(--ergo-material-border);\\n }\\n\\n /* Border appears on footer when it follows scaffold/rail */\\n :where(.tcn-scaffold) + :where(.tcn-footer),\\n :where(.tcn-rail) + :where(.tcn-footer) {\\n border-top: calc(var(--scaffold-divide-footer) * 1px) solid\\n var(--ergo-material-border);\\n }\\n }\\n\\n .tcn-frame-veil[data-is-veil=\\\"true\\\"] {\\n background-color: rgba(0, 0, 0, 0.5);\\n }\\n\\n /* PAGE: */\\n .tcn-page {\\n --divide-header: 0;\\n --divide-footer: 0;\\n --material: var(--background-color-tertiary);\\n background-color: var(--material);\\n }\\n\\n /* MODAL: */\\n .tcn-modal {\\n --divide-header: 0;\\n box-shadow: 0px 4px 34px 0px #00000096;\\n border-radius: var(--ergo-shape-radius-medium);\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n border: 1px solid var(--ergo-material-border);\\n\\n :where(.tcn-header) {\\n --material: var(--ergo-material-overlay);\\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 /* DRAWER: */\\n .tcn-drawer {\\n --divide-header: 0;\\n box-shadow: 0px 4px 34px 0px #00000096;\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n\\n :where(.tcn-header) {\\n --material: var(--ergo-material-overlay);\\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 box-shadow: 0px 4px 34px 0px #00000096;\\n --divide-header: 0;\\n border-radius: var(--ergo-shape-radius-medium);\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n border: 2px solid white;\\n\\n :where(.tcn-header) {\\n --material: var(--ergo-material-overlay);\\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 --tether-pad-size: 16px;\\n --pad-inline: var(--padding-medium);\\n\\n .tcn-pop-confirm-scaffold > .tcn-scaffold-stack {\\n border-radius: var(--ergo-shape-radius-medium);\\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);\\n background-color: var(--background-color-primary);\\n }\\n\\n :where(.tcn-tethered-origin-indicator) {\\n --material: var(--ergo-white);\\n }\\n\\n /* Set the indicator to match the header color */\\n &[data-v-origin=\\\"top\\\"] {\\n :where(.tcn-tethered-origin-indicator) {\\n --material: var(--ergo-material-overlay);\\n }\\n }\\n\\n :where(.tcn-header) {\\n min-height: var(--ergo-sizing-bar-md);\\n\\n --material: var(--ergo-material-overlay);\\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 --material: var(--background-color-primary);\\n background-color: var(--material);\\n }\\n\\n .tcn-bar {\\n gap: var(--gap-medium);\\n\\n /* Add a divider between groups unless there is a spacer after a group */\\n :where(.tcn-group:not(:last-child):not(:has(+ .tcn-spacer)))::after {\\n content: \\\"\\\";\\n display: block;\\n min-width: 2px;\\n height: 18px;\\n background: var(--ergo-grey);\\n border-radius: var(--ergo-shape-radius-small);\\n align-self: center;\\n }\\n }\\n\\n /* PANEL */\\n .tcn-panel {\\n --divide-header: 1;\\n --divide-footer: 1;\\n --material: var(--background-color-primary);\\n background-color: var(--material);\\n border-radius: var(--ergo-shape-radius-medium);\\n overflow: hidden;\\n\\n :where(.tcn-title) {\\n font-size: 18px;\\n }\\n }\\n\\n /* Aside */\\n .tcn-aside {\\n --divide-header: 1;\\n --divide-footer: 1;\\n\\n --material: var(--background-color-secondary);\\n background-color: var(--material);\\n overflow: hidden;\\n\\n :where(.tcn-header) {\\n min-height: var(--ergo-sizing-bar-md);\\n }\\n\\n :where(.tcn-footer) {\\n min-height: var(--ergo-sizing-bar-md);\\n }\\n\\n :where(.tcn-title) {\\n font-size: 16px;\\n }\\n }\\n\\n /* Card */\\n .tcn-card {\\n --divide-header: 0;\\n --divide-footer: 1;\\n --pad-inline: var(--padding-medium);\\n\\n background-color: var(--background-color-primary);\\n border-radius: var(--ergo-shape-radius-medium);\\n border: 1px solid var(--ergo-material-border);\\n overflow: hidden;\\n\\n :where(.tcn-header) {\\n min-height: var(--ergo-sizing-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(--ergo-sizing-bar-sm);\\n }\\n\\n :where(.tcn-scaffold-stack) > :where(.tcn-scaffold) > :where(.tcn-scaffold-stack),\\n :where(.tcn-scaffold-stack) > :where(.tcn-rail) > :where(.tcn-rail-stack),\\n :where(.tcn-rail-stack) > :where(.tcn-scaffold) > :where(.tcn-scaffold-stack),\\n :where(.tcn-rail-stack) > :where(.tcn-rail) > :where(.tcn-rail-stack) {\\n padding-inline: var(--padding-medium);\\n }\\n }\\n\\n /* Columns: */\\n .tcn-panel {\\n :where(.tcn-columns) {\\n padding: var(--padding-large);\\n\\n :where(.tcn-column) {\\n border-right: 1px solid var(--ergo-material-border);\\n padding-inline-end: var(--padding-medium);\\n }\\n\\n :where(.tcn-column):not(:first-child) {\\n padding-inline-start: var(--padding-medium);\\n }\\n }\\n }\\n\\n .tcn-page {\\n :where(.tcn-columns) {\\n padding: var(--padding-medium);\\n\\n :where(.tcn-column):not(:last-child) {\\n padding-inline-end: var(--padding-medium);\\n }\\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-heading-height: var(--ergo-sizing-bar-md);\\n --section-action: var(--ergo-secondary);\\n --section-mat: var(--ergo-secondary-light);\\n --section-on-mat: var(--ergo-text-color-primary);\\n }\\n\\n .tcn-heading {\\n position: sticky;\\n background-color: var(--material);\\n padding-inline-start: var(--pad-inline, var(--padding-medium));\\n padding-inline-end: var(--pad-inline, var(--padding-medium));\\n height: var(--section-heading-height);\\n z-index: 5;\\n user-select: none;\\n }\\n\\n .tcn-section > .tcn-heading {\\n top: calc(var(--section-heading-height) * var(--section-tab-depth));\\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-detail {\\n padding-block: var(--padding-medium);\\n gap: var(--padding-medium);\\n }\\n\\n .tcn-section > .tcn-detail {\\n padding-inline-start: var(--section-tab);\\n padding-inline-end: var(--pad-inline, var(--padding-medium));\\n }\\n\\n .tcn-scaffold-stack > .tcn-detail {\\n padding-inline: var(--pad-inline, var(--padding-medium));\\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: var(--ergo-shape-triangle-medium);\\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: var(--caret-size);\\n height: var(--caret-size);\\n min-width: var(--caret-size);\\n min-height: var(--caret-size);\\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-text-color-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(--ergo-sizing-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(--ergo-sizing-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-accent-blue);\\n --on-action: var(--ergo-white);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n\\n .tcn-tr .tcn-th:first-child {\\n padding-inline: var(--table-pad-inline);\\n }\\n }\\n\\n .tcn-tr {\\n height: var(--ergo-sizing-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 /* ===== INPUTS ===== */\\n .tcn-entry,\\n .tcn-control {\\n --act: var(--action);\\n --mat: var(--material);\\n --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);\\n\\n font-size: var(--ergo-text-size-input);\\n border: 1px solid var(--ergo-grey);\\n box-sizing: border-box;\\n min-height: var(--ergo-sizing-action-md);\\n border-radius: var(--ergo-shape-radius-medium);\\n padding-inline: 4px;\\n }\\n\\n .tcn-radio-label,\\n .tcn-select-selected-label {\\n font-size: var(--ergo-text-size-input);\\n }\\n\\n .tcn-control[data-is-disabled=\\\"false\\\"]:hover {\\n background: var(--act-raised);\\n }\\n\\n .tcn-control:focus-within {\\n outline: 2px solid var(--ergo-primary);\\n outline-offset: 2px;\\n }\\n\\n .tcn-control:focus {\\n border: 1px solid var(--act);\\n }\\n\\n .tcn-control::placeholder {\\n color: var(--ergo-grey);\\n }\\n\\n .tcn-control[data-is-disabled=\\\"true\\\"] {\\n cursor: not-allowed;\\n background: var(--ergo-material-disabled-outline);\\n color: var(--ergo-text-color-disabled-outline);\\n }\\n\\n .tcn-control[data-is-disabled=\\\"true\\\"]::placeholder {\\n color: var(--ergo-text-color-disabled-outline);\\n }\\n\\n .tcn-control {\\n display: flex;\\n justify-content: center;\\n gap: var(--gap-small);\\n }\\n\\n .tcn-control-row {\\n min-height: 22px;\\n height: auto;\\n align-items: center;\\n gap: var(--gap-small);\\n padding-block: 2px;\\n }\\n\\n .tcn-control-row > .tcn-icon {\\n color: var(--ergo-grey);\\n }\\n\\n .tcn-control .tcn-entry {\\n border: none;\\n background: transparent;\\n padding: 0;\\n min-height: unset;\\n border-radius: 0;\\n height: 100%;\\n flex-grow: 1;\\n\\n &:hover,\\n &:active,\\n &:focus-visible,\\n &:focus {\\n outline: none;\\n border: none;\\n background: transparent;\\n }\\n }\\n\\n .tcn-input {\\n height: auto;\\n }\\n\\n .tcn-textarea,\\n .tcn-input {\\n cursor: text;\\n }\\n\\n .tcn-control-set {\\n border-radius: var(--ergo-shape-radius-medium);\\n\\n &:focus-within {\\n outline: 2px solid var(--ergo-primary);\\n outline-offset: 2px;\\n }\\n\\n .tcn-control-set-item {\\n z-index: 1;\\n border-radius: 0;\\n height: auto;\\n min-height: var(--ergo-sizing-action-md);\\n padding-block: 0;\\n &:focus,\\n &:focus-visible {\\n z-index: 3;\\n outline: none;\\n }\\n }\\n\\n .tcn-control-set-item:first-child {\\n border-top-left-radius: var(--ergo-shape-radius-medium);\\n border-bottom-left-radius: var(--ergo-shape-radius-medium);\\n }\\n\\n .tcn-control-set-item:not(:last-child) {\\n margin-right: -1px;\\n }\\n\\n .tcn-control-set-item:last-child {\\n border-top-right-radius: var(--ergo-shape-radius-medium);\\n border-bottom-right-radius: var(--ergo-shape-radius-medium);\\n }\\n\\n .tcn-select,\\n .tcn-button,\\n .tcn-button[data-hierarchy] {\\n border: 1px solid var(--ergo-grey);\\n height: auto;\\n min-height: var(--ergo-sizing-action-md);\\n min-width: var(--ergo-sizing-action-md);\\n box-sizing: border-box;\\n &:hover,\\n &[data-hover] {\\n transform: none;\\n }\\n }\\n\\n .tcn-button.tcn-select,\\n .tcn-button[data-hierarchy].tcn-select {\\n border-color: var(--ergo-grey);\\n }\\n\\n .tcn-select:focus-visible,\\n .tcn-button:focus-visible,\\n .tcn-button[data-hierarchy]:focus-visible {\\n border-color: var(--ergo-primary);\\n }\\n }\\n\\n .tcn-slider[data-is-disabled=\\\"true\\\"] {\\n &::-webkit-slider-runnable-track {\\n background: var(--ergo-grey-light);\\n }\\n\\n &::-webkit-slider-thumb {\\n background-color: var(--ergo-white);\\n border: 1px solid var(--ergo-grey-light);\\n }\\n }\\n\\n .tcn-checkbox {\\n --checkbox-color: var(--action, var(--ergo-primary));\\n\\n border-color: var(--checkbox-color);\\n\\n &:focus-visible,\\n &:focus {\\n outline: 2px solid var(--checkbox-color);\\n outline-offset: 2px;\\n }\\n\\n &[data-is-disabled=\\\"true\\\"] {\\n cursor: not-allowed;\\n border-color: var(--ergo-material-disabled-outline);\\n }\\n\\n &[data-checked=\\\"true\\\"] {\\n background-color: var(--checkbox-color);\\n }\\n\\n &[data-checked=\\\"true\\\"][data-is-disabled=\\\"true\\\"] {\\n background-color: var(--ergo-grey-light);\\n }\\n\\n &[data-checked=\\\"false\\\"][data-is-disabled=\\\"true\\\"] {\\n background: var(--material);\\n border-color: var(--ergo-grey-light);\\n color: var(--ergo-grey-light);\\n }\\n\\n &[data-is-disabled=\\\"false\\\"]:active {\\n background-color: var(--checkbox-color);\\n }\\n }\\n\\n .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"false\\\"],\\n .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"true\\\"] {\\n outline: 2px solid var(--ergo-primary);\\n outline-offset: 2px;\\n }\\n\\n /* Quick fix to use some of the default module styles.*/\\n .tcn-input,\\n .tcn-select,\\n .tcn-slider,\\n .tcn-textarea,\\n .tcn-checkbox,\\n .tcn-switch-wrapper,\\n .tcn-date-picker,\\n .tcn-date-picker-year-selector,\\n .tcn-radio,\\n .tcn-date-picker-input,\\n .tcn-mobile-date-picker,\\n .tcn-mobile-date-picker-year-selector,\\n .tcn-suggestion-list-search-input,\\n .tcn-suggestion-list {\\n --accent-color: var(--ergo-primary);\\n }\\n\\n /* Datum/Tokens */\\n .tcn-chip {\\n --action: var(--ergo-primary);\\n --accent-color: var(--ergo-primary);\\n }\\n\\n .tcn-datum[data-emphasis=\\\"normal\\\"] {\\n --datum-font-color: var(--on-material);\\n }\\n\\n .tcn-datum[data-emphasis=\\\"strong\\\"] {\\n --datum-font-weight: 700;\\n }\\n\\n .tcn-datum[data-emphasis=\\\"faint\\\"] {\\n --datum-font-color: color-mix(in srgb, var(--on-material), transparent 12%);\\n }\\n\\n .tcn-datum[data-severity=\\\"dangerous\\\"] {\\n --datum-font-color: var(--ergo-status-red);\\n }\\n\\n .tcn-datum[data-severity=\\\"cautious\\\"] {\\n --datum-font-color: var(--ergo-status-yellow);\\n }\\n\\n .tcn-datum[data-severity=\\\"suggested\\\"] {\\n --datum-font-color: var(--ergo-status-blue);\\n }\\n\\n .tcn-datum[data-severity=\\\"encouraged\\\"] {\\n --datum-font-color: var(--ergo-status-green);\\n }\\n\\n .tcn-key {\\n --accent-color: var(--action);\\n font-size: 14px;\\n color: var(--datum-font-color);\\n font-weight: var(--datum-font-weight, 400);\\n }\\n\\n .tcn-value {\\n font-size: 12px;\\n\\n color: var(--datum-font-color);\\n font-weight: var(--datum-font-weight, 400);\\n }\\n\\n .tcn-term > .tcn-key,\\n .tcn-term > .tcn-value {\\n max-width: 50%;\\n }\\n\\n .tcn-value {\\n :where(.tcn-chip) {\\n --action: var(--ergo-accent-blue);\\n --accent-color: var(--ergo-accent-blue);\\n }\\n }\\n}\\n\"","import { buildStyleSheet } from '../../build_stylesheet';\nimport tokensCss from './tokens/theme_tokens.css?raw';\nimport systemTokensCss from './tokens/system_tokens.css?raw';\nimport css from './ergo_theme.css?raw';\nimport '@fontsource/lato';\n\nexport const ergoStyleSheet = buildStyleSheet([tokensCss, systemTokensCss, css]);\n"],"names":["tokensCss","systemTokensCss","css","ergoStyleSheet","buildStyleSheet"],"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,GCAfC,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,GCAfC,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCMFC,IAAiBC,EAAgB,CAACJ,GAAWC,GAAiBC,CAAG,CAAC;"}
package/dist/themes/themes/ergo/tokens/system_tokens.css ADDED
@@ -0,0 +1 @@
1
+ @layer tcn-theme{:root{--scalar: 1;--accent-color: var(--ergo-primary);--font-color: var(--ergo-text-color-primary);--font-family: "Lato", sans-serif;--font-size: var(--ergo-text-size-default);--gap-small: var(--ergo-spacing-sm);--gap-medium: var(--ergo-spacing-md);--gap-large: var(--ergo-spacing-lg);--padding-small: var(--ergo-spacing-sm);--padding-medium: var(--ergo-spacing-md);--padding-large: var(--ergo-spacing-lg);--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);--primary-color-faint: var(--ergo-grey-light);--primary-color: var(--ergo-primary);--primary-color-strong: var(--ergo-primary-dark);--secondary-color-faint: var(--ergo-secondary-light);--secondary-color: var(--ergo-secondary);--secondary-color-strong: var(--ergo-secondary-dark);--tertiary-color-faint: var(--ergo-tertiary-light);--tertiary-color: var(--ergo-tertiary);--tertiary-color-strong: var(--ergo-tertiary-dark);--quaternary-color-faint: var(--ergo-accent-blue-light);--quaternary-color: var(--ergo-accent-blue);--quaternary-color-strong: var(--ergo-accent-blue-dark);--background-color-primary: var(--ergo-material-bg-primary);--background-color-secondary: var(--ergo-material-bg-secondary);--background-color-tertiary: var(--ergo-material-bg-tertiary);--background-color-quaternary: var(--ergo-material-bg-quaternary);--foreground-color-primary: var(--ergo-text-color-primary);--foreground-color-secondary: var(--ergo-text-color-primary);--foreground-color-tertiary: var(--ergo-text-color-primary);--foreground-color-quaternary: var(--ergo-text-color-primary)}}
package/dist/themes/themes/ergo/tokens/theme_tokens.css ADDED
@@ -0,0 +1 @@
1
+ @layer tcn-theme{:root{--ergo-white: #ffffff;--ergo-primary: #ce6b2b;--ergo-primary-light: #fff7f0;--ergo-primary-dark: #b86128;--ergo-secondary: #669eb4;--ergo-secondary-light: #ecf4fb;--ergo-secondary-dark: #497485;--ergo-tertiary: #dfd7cd;--ergo-tertiary-light: #f9f4ed;--ergo-tertiary-dark: #7e6c5d;--ergo-accent-blue: #395578;--ergo-accent-blue-light: #f3f4f6;--ergo-accent-blue-dark: #627083;--ergo-accent-green: #97bba3;--ergo-accent-green-light: #eef8ef;--ergo-accent-green-dark: #4f785c;--ergo-accent-yellow: #dbc97e;--ergo-accent-yellow-light: #fef9e7;--ergo-accent-yellow-dark: #82722b;--ergo-grey: #aaaaaa;--ergo-grey-light: #d3d3d3;--ergo-grey-dark: #808080;--ergo-status-red: #ff6565;--ergo-status-red-dark: #c24848;--ergo-status-red-light: #fff4f4;--ergo-status-yellow: #ffd439;--ergo-status-yellow-dark: #dbb735;--ergo-status-yellow-light: #ffeca9;--ergo-status-blue: var(--ergo-secondary);--ergo-status-blue-dark: var(--ergo-secondary-dark);--ergo-status-blue-light: var(--ergo-secondary-light);--ergo-status-green: #3fbc6a;--ergo-status-green-dark: #2d904f;--ergo-status-green-light: #87e8a8;--ergo-material-bg-primary: #ffffff;--ergo-material-bg-secondary: #fafafa;--ergo-material-bg-tertiary: #f1f1f1;--ergo-material-bg-quaternary: #ffffff;--ergo-material-overlay: var(--ergo-secondary-dark);--ergo-material-border: var(--ergo-grey);--ergo-material-divider: var(--ergo-grey);--ergo-material-disabled-outline: var(--ergo-grey-light);--ergo-material-disabled-fill: var(--ergo-grey);--ergo-text-size-input: 12px;--ergo-text-size-default: 12px;--ergo-text-color-primary: var(--ergo-accent-blue);--ergo-text-color-inverse: var(--ergo-white);--ergo-text-color-disabled-outline: var(--ergo-grey);--ergo-text-color-disabled-fill: var(--ergo-white);--ergo-spacing-xs: 2px;--ergo-spacing-sm: 4px;--ergo-spacing-md: 8px;--ergo-spacing-lg: 16px;--ergo-spacing-xl: 32px;--ergo-sizing-bar-xs: 16px;--ergo-sizing-bar-sm: 24px;--ergo-sizing-bar-md: 32px;--ergo-sizing-bar-lg: 40px;--ergo-sizing-bar-xl: 48px;--ergo-sizing-action-sm: 20px;--ergo-sizing-action-md: 24px;--ergo-sizing-action-lg: 32px;--ergo-shape-radius-small: 2px;--ergo-shape-radius-medium: 4px;--ergo-shape-radius-large: 8px;--ergo-shape-triangle-medium: 12px;--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}}
package/dist/tokens/index.d.ts CHANGED
@@ -3,4 +3,5 @@ export * from './badge/badge.js';
3
3
  export * from './bubble/bubble.js';
4
4
  export * from './key/key.js';
5
5
  export * from './value/value.js';
6
+ export * from './term/term.js';
6
7
  //# sourceMappingURL=index.d.ts.map
package/dist/tokens/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC"}
package/dist/tokens/index.js CHANGED
@@ -1,13 +1,15 @@
1
1
  import { Chip as e } from "./chip/chip.js";
2
- import { Badge as f } from "./badge/badge.js";
2
+ import { Badge as p } from "./badge/badge.js";
3
3
  import { Bubble as t } from "./bubble/bubble.js";
4
4
  import { Key as a } from "./key/key.js";
5
5
  import { Value as l } from "./value/value.js";
6
+ import { Term as B } from "./term/term.js";
6
7
  export {
7
- f as Badge,
8
+ p as Badge,
8
9
  t as Bubble,
9
10
  e as Chip,
10
11
  a as Key,
12
+ B as Term,
11
13
  l as Value
12
14
  };
13
15
  //# sourceMappingURL=index.js.map
package/dist/tokens/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
package/dist/tokens/key/key.d.ts CHANGED
@@ -1,3 +1,10 @@
1
1
  import { HStackProps } from '../../stacks/h_stack.js';
2
- export declare const Key: ({ children, className, hAlign, ...props }: HStackProps) => import("react/jsx-runtime").JSX.Element;
2
+ import { Emphasis, Severity } from '../../utils/index.js';
3
+ export interface KeyOwnProps {
4
+ emphasis?: Emphasis;
5
+ severity?: Severity;
6
+ }
7
+ export interface KeyProps extends HStackProps, KeyOwnProps {
8
+ }
9
+ export declare const Key: ({ children, className, hAlign, emphasis, severity, ...props }: KeyProps) => import("react/jsx-runtime").JSX.Element;
3
10
  //# sourceMappingURL=key.d.ts.map
package/dist/tokens/key/key.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"key.d.ts","sourceRoot":"","sources":["../../../src/tokens/key/key.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE9D,eAAO,MAAM,GAAG,GAAI,2CAAqD,WAAW,4CAMnF,CAAC"}
1
+ {"version":3,"file":"key.d.ts","sourceRoot":"","sources":["../../../src/tokens/key/key.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE/D,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED,MAAM,WAAW,QAAS,SAAQ,WAAW,EAAE,WAAW;CAAG;AAE7D,eAAO,MAAM,GAAG,GAAI,+DAOjB,QAAQ,4CAYV,CAAC"}
package/dist/tokens/key/key.js CHANGED
@@ -1,8 +1,25 @@
1
1
  import { jsx as s } from "react/jsx-runtime";
2
2
  import c from "clsx";
3
- import { HStack as e } from "../../stacks/h_stack.js";
4
- const i = ({ children: r, className: t, hAlign: o = "start", ...m }) => /* @__PURE__ */ s(e, { className: c(t, "tcn-key"), hAlign: o, ...m, children: r });
3
+ import { HStack as n } from "../../stacks/h_stack.js";
4
+ const d = ({
5
+ children: t,
6
+ className: r,
7
+ hAlign: a = "start",
8
+ emphasis: m = "normal",
9
+ severity: e = "neutral",
10
+ ...o
11
+ }) => /* @__PURE__ */ s(
12
+ n,
13
+ {
14
+ "data-emphasis": m,
15
+ "data-severity": e,
16
+ className: c(r, "tcn-datum", "tcn-key"),
17
+ hAlign: a,
18
+ ...o,
19
+ children: t
20
+ }
21
+ );
5
22
  export {
6
- i as Key
23
+ d as Key
7
24
  };
8
25
  //# sourceMappingURL=key.js.map
package/dist/tokens/key/key.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"key.js","sources":["../../../src/tokens/key/key.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { HStack, HStackProps } from '../../stacks/h_stack.js';\n\nexport const Key = ({ children, className, hAlign = 'start', ...props }: HStackProps) => {\n return (\n <HStack className={clsx(className, 'tcn-key')} hAlign={hAlign} {...props}>\n {children}\n </HStack>\n );\n};\n"],"names":["Key","children","className","hAlign","props","jsx","HStack","clsx"],"mappings":";;;AAGO,MAAMA,IAAM,CAAC,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,IAAS,SAAS,GAAGC,QAE5D,gBAAAC,EAACC,GAAA,EAAO,WAAWC,EAAKL,GAAW,SAAS,GAAG,QAAAC,GAAiB,GAAGC,GAChE,UAAAH,EAAA,CACH;"}
1
+ {"version":3,"file":"key.js","sources":["../../../src/tokens/key/key.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { HStack, HStackProps } from '../../stacks/h_stack.js';\nimport type { Emphasis, Severity } from '../../utils/index.js';\n\nexport interface KeyOwnProps {\n emphasis?: Emphasis;\n severity?: Severity;\n}\n\nexport interface KeyProps extends HStackProps, KeyOwnProps {}\n\nexport const Key = ({\n children,\n className,\n hAlign = 'start',\n emphasis = 'normal',\n severity = 'neutral',\n ...props\n}: KeyProps) => {\n return (\n <HStack\n data-emphasis={emphasis}\n data-severity={severity}\n className={clsx(className, 'tcn-datum', 'tcn-key')}\n hAlign={hAlign}\n {...props}\n >\n {children}\n </HStack>\n );\n};\n"],"names":["Key","children","className","hAlign","emphasis","severity","props","jsx","HStack","clsx"],"mappings":";;;AAWO,MAAMA,IAAM,CAAC;AAAA,EAClB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,iBAAeJ;AAAA,IACf,iBAAeC;AAAA,IACf,WAAWI,EAAKP,GAAW,aAAa,SAAS;AAAA,IACjD,QAAAC;AAAA,IACC,GAAGG;AAAA,IAEH,UAAAL;AAAA,EAAA;AAAA;"}
package/dist/tokens/term/term.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { default as React } from 'react';
2
+ import { HStackProps } from '../../stacks/h_stack.js';
3
+ export declare const Term: React.ForwardRefExoticComponent<HStackProps<HTMLElement> & React.RefAttributes<HTMLDivElement>>;
4
+ //# sourceMappingURL=term.d.ts.map
package/dist/tokens/term/term.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"term.d.ts","sourceRoot":"","sources":["../../../src/tokens/term/term.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAU,MAAM,yBAAyB,CAAC;AAI9D,eAAO,MAAM,IAAI,iGAcf,CAAC"}
package/dist/tokens/term/term.js ADDED
@@ -0,0 +1,20 @@
1
+ import { jsx as m } from "react/jsx-runtime";
2
+ import n from "react";
3
+ import { HStack as s } from "../../stacks/h_stack.js";
4
+ import { clsx as a } from "clsx";
5
+ import '../../term.css';const f = "_term_52494f3", _ = "_tcn-key_46ec5e1", l = "_tcn-value_865b381", i = { term: f, "tcn-key": _, "tcn-value": l }, x = n.forwardRef(function({ children: t, className: e, vAlign: r = "start", as: p = "div", ...c }, o) {
6
+ return /* @__PURE__ */ m(
7
+ s,
8
+ {
9
+ ref: o,
10
+ vAlign: r,
11
+ className: a(e, i.term, "tcn-term"),
12
+ ...c,
13
+ children: t
14
+ }
15
+ );
16
+ });
17
+ export {
18
+ x as Term
19
+ };
20
+ //# sourceMappingURL=term.js.map
package/dist/tokens/term/term.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"term.js","sources":["../../../src/tokens/term/term.tsx"],"sourcesContent":["import React from 'react';\nimport { HStackProps, HStack } from '../../stacks/h_stack.js';\nimport { clsx } from 'clsx';\nimport styles from './term.module.css';\n\nexport const Term = React.forwardRef<HTMLDivElement, HStackProps>(function Term(\n { children, className, vAlign = 'start', as = 'div', ...props },\n ref\n) {\n return (\n <HStack\n ref={ref}\n vAlign={vAlign}\n className={clsx(className, styles.term, 'tcn-term')}\n {...props}\n >\n {children}\n </HStack>\n );\n});\n"],"names":["Term","React","children","className","vAlign","as","props","ref","jsx","HStack","clsx","styles"],"mappings":";;;;4HAKaA,IAAOC,EAAM,WAAwC,SAChE,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,IAAS,SAAS,IAAAC,IAAK,OAAO,GAAGC,EAAA,GACxDC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,QAAAH;AAAA,MACA,WAAWM,EAAKP,GAAWQ,EAAO,MAAM,UAAU;AAAA,MACjD,GAAGL;AAAA,MAEH,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
package/dist/tokens/value/value.d.ts CHANGED
@@ -1,3 +1,10 @@
1
1
  import { HStackProps } from '../../stacks/h_stack.js';
2
- export declare const Value: ({ children, className, hAlign, ...props }: HStackProps) => import("react/jsx-runtime").JSX.Element;
2
+ import { Emphasis, Severity } from '../../utils/index.js';
3
+ export interface ValueOwnProps {
4
+ emphasis?: Emphasis;
5
+ severity?: Severity;
6
+ }
7
+ export interface ValueProps extends HStackProps, ValueOwnProps {
8
+ }
9
+ export declare const Value: ({ children, className, hAlign, emphasis, severity, ...props }: ValueProps) => import("react/jsx-runtime").JSX.Element;
3
10
  //# sourceMappingURL=value.d.ts.map
package/dist/tokens/value/value.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"value.d.ts","sourceRoot":"","sources":["../../../src/tokens/value/value.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE9D,eAAO,MAAM,KAAK,GAAI,2CAAmD,WAAW,4CAMnF,CAAC"}
1
+ {"version":3,"file":"value.d.ts","sourceRoot":"","sources":["../../../src/tokens/value/value.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAG/D,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,aAAa;CAAG;AAEjE,eAAO,MAAM,KAAK,GAAI,+DAOnB,UAAU,4CAYZ,CAAC"}
package/dist/tokens/value/value.js CHANGED
@@ -1,8 +1,26 @@
1
- import { jsx as e } from "react/jsx-runtime";
2
- import a from "clsx";
3
- import { HStack as c } from "../../stacks/h_stack.js";
4
- const p = ({ children: r, className: o, hAlign: t = "end", ...m }) => /* @__PURE__ */ e(c, { className: a(o, "tcn-value"), hAlign: t, ...m, children: r });
1
+ import { jsx as o } from "react/jsx-runtime";
2
+ import l from "clsx";
3
+ import { HStack as n } from "../../stacks/h_stack.js";
4
+ import { s as c } from "../../value.module-DFaCouFD.js";
5
+ const f = ({
6
+ children: t,
7
+ className: a,
8
+ hAlign: r = "end",
9
+ emphasis: e = "normal",
10
+ severity: m = "neutral",
11
+ ...s
12
+ }) => /* @__PURE__ */ o(
13
+ n,
14
+ {
15
+ "data-emphasis": e,
16
+ "data-severity": m,
17
+ className: l(a, c.value, "tcn-datum", "tcn-value"),
18
+ hAlign: r,
19
+ ...s,
20
+ children: t
21
+ }
22
+ );
5
23
  export {
6
- p as Value
24
+ f as Value
7
25
  };
8
26
  //# sourceMappingURL=value.js.map
package/dist/tokens/value/value.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"value.js","sources":["../../../src/tokens/value/value.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { HStack, HStackProps } from '../../stacks/h_stack.js';\n\nexport const Value = ({ children, className, hAlign = 'end', ...props }: HStackProps) => {\n return (\n <HStack className={clsx(className, 'tcn-value')} hAlign={hAlign} {...props}>\n {children}\n </HStack>\n );\n};\n"],"names":["Value","children","className","hAlign","props","jsx","HStack","clsx"],"mappings":";;;AAGO,MAAMA,IAAQ,CAAC,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,IAAS,OAAO,GAAGC,QAE5D,gBAAAC,EAACC,GAAA,EAAO,WAAWC,EAAKL,GAAW,WAAW,GAAG,QAAAC,GAAiB,GAAGC,GAClE,UAAAH,EAAA,CACH;"}
1
+ {"version":3,"file":"value.js","sources":["../../../src/tokens/value/value.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { HStack, HStackProps } from '../../stacks/h_stack.js';\nimport type { Emphasis, Severity } from '../../utils/index.js';\nimport styles from './value.module.css';\n\nexport interface ValueOwnProps {\n emphasis?: Emphasis;\n severity?: Severity;\n}\n\nexport interface ValueProps extends HStackProps, ValueOwnProps {}\n\nexport const Value = ({\n children,\n className,\n hAlign = 'end',\n emphasis = 'normal',\n severity = 'neutral',\n ...props\n}: ValueProps) => {\n return (\n <HStack\n data-emphasis={emphasis}\n data-severity={severity}\n className={clsx(className, styles.value, 'tcn-datum', 'tcn-value')}\n hAlign={hAlign}\n {...props}\n >\n {children}\n </HStack>\n );\n};\n"],"names":["Value","children","className","hAlign","emphasis","severity","props","jsx","HStack","clsx","styles"],"mappings":";;;;AAYO,MAAMA,IAAQ,CAAC;AAAA,EACpB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,iBAAeJ;AAAA,IACf,iBAAeC;AAAA,IACf,WAAWI,EAAKP,GAAWQ,EAAO,OAAO,aAAa,WAAW;AAAA,IACjE,QAAAP;AAAA,IACC,GAAGG;AAAA,IAEH,UAAAL;AAAA,EAAA;AAAA;"}
package/dist/utils/types/variations.d.ts CHANGED
@@ -2,4 +2,5 @@ export type Size = 'sm' | 'md' | 'lg';
2
2
  export type ExpandedSize = Size | 'xs' | 'xl';
3
3
  export type Hierarchy = 'primary' | 'secondary' | 'tertiary';
4
4
  export type Emphasis = 'strong' | 'normal' | 'faint';
5
+ export type Severity = 'dangerous' | 'cautious' | 'neutral' | 'suggested' | 'encouraged';
5
6
  //# sourceMappingURL=variations.d.ts.map
package/dist/utils/types/variations.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"variations.d.ts","sourceRoot":"","sources":["../../../src/utils/types/variations.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAC7D,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC"}
1
+ {"version":3,"file":"variations.d.ts","sourceRoot":"","sources":["../../../src/utils/types/variations.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAC7D,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AACrD,MAAM,MAAM,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,YAAY,CAAC"}
package/dist/value.css ADDED
@@ -0,0 +1 @@
1
+ @layer tcn-system{:where(._value_ddd8605){text-align:end}}
package/dist/value.module-DFaCouFD.js ADDED
@@ -0,0 +1,5 @@
1
+ import './value.css';const s = "_value_ddd8605", e = { value: s };
2
+ export {
3
+ e as s
4
+ };
5
+ //# sourceMappingURL=value.module-DFaCouFD.js.map
package/dist/value.module-DFaCouFD.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"value.module-DFaCouFD.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tcn/ui",
3
- "version": "0.14.0",
3
+ "version": "0.16.0",
4
4
  "type": "module",
5
5
  "description": "",
6
6
  "author": "TCN",
package/src/layouts/__stories__/columns.stories.tsx ADDED
@@ -0,0 +1,46 @@
1
+ import type { Meta, StoryObj } from '@storybook/react-vite';
2
+
3
+ import { LayoutStoryDecorator } from './utils/layout_theme_provider.js';
4
+ import { Column } from '../containers/columns/column.js';
5
+ import { Columns } from '../containers/columns/columns.js';
6
+ import { Detail, Section } from '../section/index.js';
7
+
8
+ const meta: Meta = {
9
+ title: 'Layouts/Columns',
10
+ component: () => <></>,
11
+ tags: ['autodocs'],
12
+ parameters: {
13
+ docs: {
14
+ description: {
15
+ component:
16
+ 'Horizontal container for fixed-width Column components. Theme controls column separation via the `.tcn-columns` context selector.',
17
+ },
18
+ },
19
+ },
20
+ };
21
+
22
+ export default meta;
23
+
24
+ type Story = StoryObj;
25
+
26
+ /**
27
+ * Simple example of two columns side by side.
28
+ */
29
+ export const PanelBody: Story = {
30
+ render: () => (
31
+ <LayoutStoryDecorator>
32
+ <Columns>
33
+ <Column minWidth="300px">
34
+ <Section>
35
+ <Detail>300px column</Detail>
36
+ </Section>
37
+ </Column>
38
+ <Column minWidth="300px">
39
+ <Section>
40
+ <Detail>400px column</Detail>
41
+ </Section>
42
+ </Column>
43
+ </Columns>
44
+ </LayoutStoryDecorator>
45
+ ),
46
+ };
package/src/layouts/__stories__/rail.stories.tsx CHANGED
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
3
3
  import { LayoutStoryDecorator } from './utils/layout_theme_provider.js';
4
4
  import { SBLayoutContent } from './utils/content.js';
5
5
  import { Rail } from '../containers/rail.js';
6
- import { Side } from '../containers/side/side.js';
6
+ import { Column } from '../containers/columns/column.js';
7
7
  import { UtilityStrip } from '../containers/utility_strip/utility_strip.js';
8
8
  import { Title } from '../../typography/index.js';
9
9
  import { Scaffold } from '../containers/scaffold.js';
@@ -38,7 +38,7 @@ export const Baseline: Story = {
38
38
  <SBLayoutContent />
39
39
  <SBLayoutContent />
40
40
  </Rail>
41
- <Side width="200px">Side</Side>
41
+ <Column minWidth="200px">Column</Column>
42
42
  </Rail>
43
43
  </LayoutStoryDecorator>
44
44
  ),
@@ -57,7 +57,7 @@ export const HorizontalContent: Story = {
57
57
  <SBLayoutContent />
58
58
  <SBLayoutContent />
59
59
  </Rail>
60
- <Side width="200px">Side</Side>
60
+ <Column minWidth="200px">Column</Column>
61
61
  </Rail>
62
62
  </LayoutStoryDecorator>
63
63
  ),
@@ -76,7 +76,7 @@ export const VerticalContent: Story = {
76
76
  <SBLayoutContent />
77
77
  <SBLayoutContent />
78
78
  </Scaffold>
79
- <Side width="200px">Side</Side>
79
+ <Column minWidth="200px">Column</Column>
80
80
  </Rail>
81
81
  </LayoutStoryDecorator>
82
82
  ),
package/src/layouts/__stories__/utils.tsx CHANGED
@@ -7,7 +7,7 @@ import { Footer } from '../footer/footer.js';
7
7
  import { UtilityBar } from '../utility_bar/utility_bar.js';
8
8
 
9
9
  import { Rail, type RailProps } from '../containers/rail.js';
10
- import { Side } from '../containers/side/side.js';
10
+ import { Column } from '../containers/columns/column.js';
11
11
  import { Box, Spacer } from '../../stacks/index.js';
12
12
  import { UtilityStrip } from '../containers/utility_strip/utility_strip.js';
13
13
  import { SearchIcon } from '@tcn/icons/search_icon.js';
@@ -98,9 +98,9 @@ export const SBNestedRail: React.FC<PropsWithChildren<SBNestedRailProps>> = ({
98
98
  )}
99
99
  {children}
100
100
  {side && (
101
- <Side className={clsx(styles.side, styles.secondary)} minWidth="200px">
102
- <span>Side/Column/WIP</span>
103
- </Side>
101
+ <Column className={clsx(styles.side, styles.secondary)} minWidth="200px">
102
+ <span>Column</span>
103
+ </Column>
104
104
  )}
105
105
  {scaffold && (
106
106
  <SBNestedScaffold