@tcn/ui 0.15.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.
- package/dist/column.css +1 -1
- package/dist/layouts/containers/columns/column.d.ts +6 -0
- package/dist/layouts/containers/columns/column.d.ts.map +1 -0
- package/dist/layouts/containers/columns/column.js +20 -0
- package/dist/layouts/containers/columns/column.js.map +1 -0
- package/dist/layouts/containers/columns/columns.d.ts +6 -0
- package/dist/layouts/containers/columns/columns.d.ts.map +1 -0
- package/dist/layouts/containers/columns/columns.js +11 -0
- package/dist/layouts/containers/columns/columns.js.map +1 -0
- package/dist/layouts/index.d.ts +2 -2
- package/dist/layouts/index.d.ts.map +1 -1
- package/dist/layouts/index.js +23 -23
- package/dist/surfaces/pop_confirm/pop_confirm.js +2 -2
- package/dist/themes/themes/ergo/ergo_theme.css +1 -1
- package/dist/themes/themes/ergo/ergo_theme.js +27 -9
- package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
- package/package.json +1 -1
- package/src/layouts/__stories__/columns.stories.tsx +46 -0
- package/src/layouts/__stories__/rail.stories.tsx +4 -4
- package/src/layouts/__stories__/utils.tsx +4 -4
- package/src/layouts/containers/columns/column.module.css +14 -0
- package/src/layouts/containers/columns/column.tsx +22 -0
- package/src/layouts/containers/columns/columns.tsx +16 -0
- package/src/layouts/index.ts +2 -2
- package/src/surfaces/page/page.stories.tsx +32 -28
- package/src/surfaces/panel/__stories__/panel.stories.tsx +63 -0
- package/src/themes/themes/ergo/ergo_theme.css +27 -9
- package/dist/layouts/column/column.d.ts +0 -10
- package/dist/layouts/column/column.d.ts.map +0 -1
- package/dist/layouts/column/column.js +0 -52
- package/dist/layouts/column/column.js.map +0 -1
- package/dist/layouts/containers/side/side.d.ts +0 -6
- package/dist/layouts/containers/side/side.d.ts.map +0 -1
- package/dist/layouts/containers/side/side.js +0 -22
- package/dist/layouts/containers/side/side.js.map +0 -1
- package/dist/side.css +0 -1
- package/src/layouts/column/column.module.css +0 -35
- package/src/layouts/column/column.tsx +0 -57
- package/src/layouts/containers/side/side.module.css +0 -7
- package/src/layouts/containers/side/side.tsx +0 -25
package/dist/column.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer tcn-system{:where(.
|
|
1
|
+
@layer tcn-system{:where(._column_f14ce93){height:100%;min-height:100%;width:auto;min-width:0;flex-grow:0}:where(._column_f14ce93[data-width=fill]){flex-grow:1;width:0}}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { VStackProps } from '../../../stacks/v_stack.js';
|
|
3
|
+
export interface ColumnProps extends Omit<VStackProps, 'as'> {
|
|
4
|
+
}
|
|
5
|
+
export declare const Column: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<HTMLElement>>;
|
|
6
|
+
//# sourceMappingURL=column.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"column.d.ts","sourceRoot":"","sources":["../../../../src/layouts/containers/columns/column.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAGtE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;CAAG;AAE/D,eAAO,MAAM,MAAM,iFAcjB,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import r from "react";
|
|
3
|
+
import { clsx as s } from "clsx";
|
|
4
|
+
import { VStack as l } from "../../../stacks/v_stack.js";
|
|
5
|
+
import '../../../column.css';const e = "_column_f14ce93", f = { column: e }, x = r.forwardRef(function({ children: o, className: t, ...c }, m) {
|
|
6
|
+
return /* @__PURE__ */ n(
|
|
7
|
+
l,
|
|
8
|
+
{
|
|
9
|
+
ref: m,
|
|
10
|
+
as: "section",
|
|
11
|
+
className: s("tcn-column", f.column, t),
|
|
12
|
+
...c,
|
|
13
|
+
children: o
|
|
14
|
+
}
|
|
15
|
+
);
|
|
16
|
+
});
|
|
17
|
+
export {
|
|
18
|
+
x as Column
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=column.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"column.js","sources":["../../../../src/layouts/containers/columns/column.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { VStack, type VStackProps } from '../../../stacks/v_stack.js';\nimport styles from './column.module.css';\n\nexport interface ColumnProps extends Omit<VStackProps, 'as'> {}\n\nexport const Column = React.forwardRef<HTMLElement, ColumnProps>(function Column(\n { children, className, ...props }: ColumnProps,\n ref\n) {\n return (\n <VStack\n ref={ref}\n as=\"section\"\n className={clsx('tcn-column', styles['column'], className)}\n {...props}\n >\n {children}\n </VStack>\n );\n});\n"],"names":["Column","React","children","className","props","ref","jsx","VStack","clsx","styles"],"mappings":";;;;gDAOaA,IAASC,EAAM,WAAqC,SAC/D,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAG;AAAA,MACH,WAAWG,EAAK,cAAcC,EAAO,QAAWN,CAAS;AAAA,MACxD,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { RailProps } from '../rail.js';
|
|
3
|
+
export interface ColumnsProps extends Omit<RailProps, 'as'> {
|
|
4
|
+
}
|
|
5
|
+
export declare const Columns: React.ForwardRefExoticComponent<ColumnsProps & React.RefAttributes<HTMLElement>>;
|
|
6
|
+
//# sourceMappingURL=columns.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"columns.d.ts","sourceRoot":"","sources":["../../../../src/layouts/containers/columns/columns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAElD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;CAAG;AAE9D,eAAO,MAAM,OAAO,kFASlB,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as f } from "react/jsx-runtime";
|
|
2
|
+
import n from "react";
|
|
3
|
+
import { clsx as s } from "clsx";
|
|
4
|
+
import { Rail as c } from "../rail.js";
|
|
5
|
+
const p = n.forwardRef(function({ children: o, className: r, ...m }, t) {
|
|
6
|
+
return /* @__PURE__ */ f(c, { ref: t, className: s("tcn-columns", r), ...m, children: o });
|
|
7
|
+
});
|
|
8
|
+
export {
|
|
9
|
+
p as Columns
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=columns.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"columns.js","sources":["../../../../src/layouts/containers/columns/columns.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Rail, type RailProps } from '../rail.js';\n\nexport interface ColumnsProps extends Omit<RailProps, 'as'> {}\n\nexport const Columns = React.forwardRef<HTMLElement, ColumnsProps>(function Columns(\n { children, className, ...props }: ColumnsProps,\n ref\n) {\n return (\n <Rail ref={ref} className={clsx('tcn-columns', className)} {...props}>\n {children}\n </Rail>\n );\n});\n"],"names":["Columns","React","children","className","props","ref","jsx","Rail","clsx"],"mappings":";;;;AAMO,MAAMA,IAAUC,EAAM,WAAsC,SACjE,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC,EAACC,GAAA,EAAK,KAAAF,GAAU,WAAWG,EAAK,eAAeL,CAAS,GAAI,GAAGC,GAC5D,UAAAF,EAAA,CACH;AAEJ,CAAC;"}
|
package/dist/layouts/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { Column, type ColumnProps } from './containers/columns/column.js';
|
|
2
2
|
export * from './divider/divider.js';
|
|
3
3
|
export * from './grid/grid.js';
|
|
4
4
|
export * from './list/item.js';
|
|
@@ -16,6 +16,6 @@ export { Responsive, type ResponsiveProps } from './responsive/responsive.js';
|
|
|
16
16
|
export { Breakpoint, type BreakpointProps } from './responsive/breakpoint.js';
|
|
17
17
|
export { TTable, THead, TBody, TFoot, TR, TH, TD } from './table/table.js';
|
|
18
18
|
export { Rail, type RailProps } from './containers/rail.js';
|
|
19
|
-
export {
|
|
19
|
+
export { Columns, type ColumnsProps } from './containers/columns/columns.js';
|
|
20
20
|
export { UtilityStrip, type UtilityStripProps, } from './containers/utility_strip/utility_strip.js';
|
|
21
21
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC1E,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAExE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAChF,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE9E,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAE3E,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,6CAA6C,CAAC"}
|
package/dist/layouts/index.js
CHANGED
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
import { Column as e } from "./
|
|
1
|
+
import { Column as e } from "./containers/columns/column.js";
|
|
2
2
|
import { Divider as p } from "./divider/divider.js";
|
|
3
|
-
import { Grid as
|
|
3
|
+
import { Grid as f } from "./grid/grid.js";
|
|
4
4
|
import { Item as i } from "./list/item.js";
|
|
5
5
|
import { List as d } from "./list/list.js";
|
|
6
|
-
import { SidebarEnd as
|
|
7
|
-
import { SidebarStart as
|
|
8
|
-
import { Scaffold as
|
|
9
|
-
import { Footer as
|
|
10
|
-
import { Header as
|
|
11
|
-
import { UtilityBar as
|
|
6
|
+
import { SidebarEnd as T } from "./sidebar_end/sidebar_end.js";
|
|
7
|
+
import { SidebarStart as S } from "./sidebar_start/sidebar_start.js";
|
|
8
|
+
import { Scaffold as B } from "./containers/scaffold.js";
|
|
9
|
+
import { Footer as b } from "./footer/footer.js";
|
|
10
|
+
import { Header as y } from "./header/header.js";
|
|
11
|
+
import { UtilityBar as R } from "./utility_bar/utility_bar.js";
|
|
12
12
|
import { Group as v } from "./group/group.js";
|
|
13
|
-
import { Bar as
|
|
14
|
-
import { Section as
|
|
15
|
-
import { Heading as
|
|
13
|
+
import { Bar as F } from "./bar/bar.js";
|
|
14
|
+
import { Section as U } from "./section/section.js";
|
|
15
|
+
import { Heading as k } from "./section/heading.js";
|
|
16
16
|
import { Detail as I } from "./section/detail.js";
|
|
17
17
|
import { Responsive as h } from "./responsive/responsive.js";
|
|
18
18
|
import { Breakpoint as q } from "./responsive/breakpoint.js";
|
|
19
19
|
import { TBody as z, TD as A, TFoot as J, TH as K, THead as M, TR as N, TTable as O } from "./table/table.js";
|
|
20
20
|
import { Rail as Q } from "./containers/rail.js";
|
|
21
|
-
import {
|
|
21
|
+
import { Columns as W } from "./containers/columns/columns.js";
|
|
22
22
|
import { UtilityStrip as Y } from "./containers/utility_strip/utility_strip.js";
|
|
23
23
|
export {
|
|
24
|
-
|
|
24
|
+
F as Bar,
|
|
25
25
|
q as Breakpoint,
|
|
26
26
|
e as Column,
|
|
27
|
+
W as Columns,
|
|
27
28
|
I as Detail,
|
|
28
29
|
p as Divider,
|
|
29
|
-
|
|
30
|
-
|
|
30
|
+
b as Footer,
|
|
31
|
+
f as Grid,
|
|
31
32
|
v as Group,
|
|
32
|
-
|
|
33
|
-
|
|
33
|
+
y as Header,
|
|
34
|
+
k as Heading,
|
|
34
35
|
i as Item,
|
|
35
36
|
d as List,
|
|
36
37
|
Q as Rail,
|
|
37
38
|
h as Responsive,
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
n as SidebarStart,
|
|
39
|
+
B as Scaffold,
|
|
40
|
+
U as Section,
|
|
41
|
+
T as SidebarEnd,
|
|
42
|
+
S as SidebarStart,
|
|
43
43
|
z as TBody,
|
|
44
44
|
A as TD,
|
|
45
45
|
J as TFoot,
|
|
@@ -47,7 +47,7 @@ export {
|
|
|
47
47
|
M as THead,
|
|
48
48
|
N as TR,
|
|
49
49
|
O as TTable,
|
|
50
|
-
|
|
50
|
+
R as UtilityBar,
|
|
51
51
|
Y as UtilityStrip
|
|
52
52
|
};
|
|
53
53
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import { clsx as c } from "clsx";
|
|
3
3
|
import e from "react";
|
|
4
|
-
import "../../layouts/
|
|
4
|
+
import "../../layouts/containers/columns/column.js";
|
|
5
5
|
import "../../divider.module-FptFV0PX.js";
|
|
6
6
|
import "../../layouts/grid/grid.js";
|
|
7
7
|
import "../../layouts/list/item.js";
|
|
@@ -27,7 +27,7 @@ import "../../stacks/v_collapsible_box.js";
|
|
|
27
27
|
import "../../stacks/v_stack.js";
|
|
28
28
|
import "../../stacks/z_stack.js";
|
|
29
29
|
import "../../layouts/containers/rail.js";
|
|
30
|
-
import "../../layouts/containers/
|
|
30
|
+
import "../../layouts/containers/columns/columns.js";
|
|
31
31
|
import "../../layouts/containers/utility_strip/utility_strip.js";
|
|
32
32
|
import { PopperDismissal as a } from "../../overlay/popper/base/dismissal_decorator.js";
|
|
33
33
|
import { ElementPopper as s } from "../../overlay/popper/element_popper.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer tcn-theme{.tcn-theme-root{font-family:var(--font-family);color:var(--font-color);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-interactive{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .1s,background .1s,color .1s;--ink: var(--on-material);--act: var(--action);--mat: var(--material);--act-down: color-mix(in srgb, var(--mat), black 12%);--act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);--act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);--act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);background:var(--mat);color:var(--ink);transition:background .1s,color .1s}.tcn-interactive:focus-visible,.tcn-interactive[data-focus-visible]{background:var(--act-focus);outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-interactive:hover,.tcn-interactive[data-hover]{background:var(--act-raised)}.tcn-interactive:active,.tcn-interactive[data-active]{background:var(--act-down)}.tcn-interactive[data-is-disabled=true]{pointer-events:none}.tcn-base-button{--btn-size-base: 26px;--btn-pad-base: 12px;--btn-pad-delta: 4px;--btn-size-delta: 4px;--btn-font-size-delta: 2px;--btn-step: 1;--btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));--btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));border-radius:var(--ergo-shape-radius-medium);min-height:var(--btn-size);padding:var(--padding-small) var(--btn-pad)}.tcn-base-button[data-size=sm]{--btn-step: -1}.tcn-base-button[data-size=md]{--btn-step: 0}.tcn-base-button[data-size=lg]{--btn-step: 1}.tcn-base-button[data-is-utility=true]{height:auto;width:auto;min-width:var(--btn-size);padding:0;--util-ratio: .75;--btn-size-base: 18px;font-size:calc(var(--font-size) + var(--btn-font-size-delta) * var(--btn-step))}.tcn-base-button[data-is-utility=true] .tcn-icon{min-height:min(2px,calc(var(--btn-size) * var(--util-ratio)));min-width:min(2px,calc(var(--btn-size) * var(--util-ratio)))}.tcn-button{--btn-primary: var(--action);--btn-on-primary: var(--on-action);--btn-variant: var(--on-material);transition:box-shadow .1s,transform .1s}.tcn-button[data-severity=dangerous]{--btn-primary: var(--action-severity-dangerous);--btn-variant: var(--ergo-status-red-dark)}.tcn-button[data-severity=cautious]{--btn-primary: var(--action-severity-cautious);--btn-on-primary: var(--ergo-accent-blue);--btn-variant: var(--ergo-status-yellow-dark)}.tcn-button[data-severity=suggested]{--btn-primary: var(--action-severity-suggested);--btn-variant: var(--ergo-status-blue-dark)}.tcn-button[data-severity=encouraged]{--btn-primary: var(--action-severity-encouraged);--btn-variant: var(--ergo-status-green-dark)}.tcn-button[data-hierarchy=primary]{--act: var(--ergo-white);--ink: var(--tcn-button-text-color, var(--btn-on-primary));--mat: var(--tcn-button-color, var(--btn-primary))}.tcn-button[data-hierarchy=primary][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary]{--act: var(--tcn-button-color, var(--btn-variant));--ink: var(--tcn-button-color, var(--btn-variant))}:is(.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary])[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-button[data-hierarchy=tertiary]:hover{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:1px;text-underline-offset:4px}.tcn-button[data-hierarchy=tertiary]{border:1px solid transparent}.tcn-button[data-hierarchy=secondary]{border:1px solid var(--ink)}.tcn-button[data-hierarchy=primary]{border:1px solid var(--mat)}.tcn-button:hover,.tcn-button[data-hover]{transform:translateY(-1px);box-shadow:0 4px 4px #0000001f}:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):before,:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):after{content:"";position:absolute;left:0;right:0;height:4px}:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):before{top:-2px}:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):after{bottom:-2px}.tcn-button:active,.tcn-button[data-active]{transform:translateY(1px);box-shadow:inset 0 2px 2px #0000001f}.tcn-slim-button{height:auto;width:auto;padding:0}.tcn-slim-button[data-size=sm]{min-height:12px;min-width:12px;padding:0}.tcn-slim-button[data-size=sm] .tcn-icon{min-height:10px;min-width:10px}.tcn-slim-button[data-size=md]{min-height:18px;min-width:18px;padding:0}.tcn-slim-button[data-size=md] .tcn-icon{min-height:14px;min-width:14px}.tcn-slim-button[data-size=lg]{min-height:24px;min-width:24px;padding:0}.tcn-slim-button[data-size=lg] .tcn-icon{min-height:20px;min-width:20px}.tcn-button[data-size].tcn-select{padding-inline-end:26px}.tcn-toggle{--tgl-false: var(--ergo-accent-blue);--tgl-true: var(--ergo-accent-blue);--on-tgl-true: var(--ergo-white);--ink: var(--tcn-button-color, var(--tgl-false));--act: var(--tcn-button-color, var(--tgl-false))}.tcn-toggle[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-toggle[data-is-selected=true]{--mat: var(--tcn-button-color, var(--tgl-true));--ink: var(--tcn-button-text-color, var(--ergo-white));--act: var(--ergo-white)}.tcn-toggle[data-is-selected=true][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-fab{border-radius:50%}.tcn-mobile-button{--btn-size-base: 44px;--btn-pad-base: 16px;--btn-size-delta: 8px;--btn-pad-delta: 4px;font-size:calc(16px * var(--scalar, 1))}.tcn-mobile-button[data-size=sm]{--btn-size-base: 36px}.tcn-mobile-button[data-size=lg]{--btn-size-base: 52px}.tcn-button-group .tcn-button-group-button.tcn-mobile-button{--btn-size-base: 44px;--btn-pad-base: 16px;--btn-size-delta: 8px;--btn-pad-delta: 4px;font-size:calc(16px * var(--scalar, 1))}.tcn-button-group .tcn-button-group-button:hover,.tcn-button-group .tcn-button-group-button:active{transform:none}.tcn-button-group .tcn-button-group-button{border-radius:0}.tcn-button-group .tcn-button-group-button:first-child{border-start-start-radius:var(--ergo-shape-radius-medium);border-end-start-radius:var(--ergo-shape-radius-medium)}.tcn-button-group .tcn-button-group-button:last-child{border-start-end-radius:var(--ergo-shape-radius-medium);border-end-end-radius:var(--ergo-shape-radius-medium)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]{border:0}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:last-child){border-right:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:first-child){border-left:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:last-child){border-right:1px solid var(--act-down)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:first-child){border-left:1px solid var(--act-down)}.tcn-select-group .tcn-select-group-option:hover,.tcn-select-group .tcn-select-group-option:active{transform:none}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]{color:var(--act);border-color:var(--act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:hover{background:var(--act-faint)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:active{background:var(--act-down);color:var(--on-act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary][data-is-disabled=true]{color:var(--ergo-material-disabled-outline);border:1px solid var(--ergo-material-disabled-outline)}.tcn-select-group .tcn-select-group-option[data-hierarchy=primary][data-is-disabled=true]{background:var(--ergo-material-disabled-outline);color:#fff;border:1px solid var(--ergo-material-disabled-outline)}.tcn-select-group .tcn-select-group-option{border-radius:0}.tcn-select-group .tcn-select-group-option:first-child{border-top-left-radius:var(--ergo-shape-radius-medium);border-bottom-left-radius:var(--ergo-shape-radius-medium)}.tcn-select-group .tcn-select-group-option:last-child{border-top-right-radius:var(--ergo-shape-radius-medium);border-bottom-right-radius:var(--ergo-shape-radius-medium)}.tcn-tabs-bar .tcn-tabs-list .tcn-tab-item{min-height:24px;padding:0px var(--padding-medium);text-decoration:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item{box-sizing:border-box;border:none;padding:0px var(--padding-medium);border-radius:0}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=true]{--mat: var(--tcn-button-color, var(--material));--ink: var(--tcn-button-text-color, var(--ergo-primary));--act: var(--ergo-primary)}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item:focus-visible{z-index:2}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:hover:after,.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:focus-visible:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ergo-accent-blue);pointer-events:none;width:100%;z-index:3}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list:after{content:"";position:absolute;bottom:-1px;left:0;min-height:2px;transform:translate(var(--tabs-active-rectangle-position-x, 0));width:var(--tabs-active-rectangle-width, 0);background:var(--ergo-primary);pointer-events:none;border-bottom-left-radius:2px;border-bottom-right-radius:2px;transition:transform .3s ease-in-out,width .3s ease-in-out;will-change:transform,width;z-index:2}.tcn-tabs-bar[data-variant=default]:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--ergo-material-divider);pointer-events:none;z-index:1}.tcn-tabs-bar[data-variant=inline]{font-size:12px;min-width:min-content;width:auto;flex-grow:0;border-radius:6px;border:1px solid var(--on-material);padding:2px}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list{height:20px;gap:var(--ergo-spacing-xs)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list .tcn-tab-item{border-radius:var(--ergo-shape-radius-medium);min-height:20px}.material{background-color:var(--material);color:var(--on-material)}.tcn-divider-line,.tcn-divider-line[data-emphasis=normal]{background:var(--material-line)}.tcn-divider-line[data-emphasis=strong]{background:color-mix(in srgb,var(--material-line) 80%,black 20%)}.tcn-divider-line[data-emphasis=faint]{background:color-mix(in srgb,var(--material-line) 80%,white 20%)}.tcn-draggable[data-is-draggable=true] .tcn-drag-handle{cursor:move}.tcn-frame-dialog{border:inherit}.tcn-tethered{--tether-pad-x: 0px;--tether-pad-y: 0px;--indicator-pad-x: 0px;--indicator-pad-y: 0px;--tether-pad-size: 0px;--tether-pad-pos: var(--tether-pad-size);--tether-pad-neg: calc(-1 * var(--tether-pad-size));left:calc(var(--tether-pad-x, 0) - var(--indicator-pad-x, 0) + var(--tethered-left, 0));top:calc(var(--tether-pad-y, 0) + var(--tethered-top, 0))}.tcn-tethered :where(.tcn-tethered-origin-indicator){left:calc(var(--indicator-pad-x, 0) + var(--tethered-origin-delta-x, 0));top:calc(var(--indicator-pad-y, 0) + var(--tethered-origin-delta-y, 0))}.tcn-tethered[data-h-anchor=start]{--tether-pad-x: var(--tether-pad-pos)}.tcn-tethered[data-h-anchor=end]{--tether-pad-x: var(--tether-pad-neg)}.tcn-tethered[data-h-origin=start]{--indicator-pad-x: var(--tether-pad-pos)}.tcn-tethered[data-h-origin=end]{--indicator-pad-x: var(--tether-pad-neg)}.tcn-tethered[data-v-origin=center]{--indicator-pad-x: 0px;--tether-pad-x: 0px}.tcn-tethered[data-v-origin=center][data-v-anchor=top]{--tether-pad-y: var(--tether-pad-pos)}.tcn-tethered[data-v-origin=center][data-v-anchor=bottom]{--tether-pad-y: var(--tether-pad-neg)}.tcn-tethered[data-anchor-direction=bottom]{padding-bottom:var(--ergo-shape-triangle-medium)}.tcn-tethered[data-anchor-direction=top]{padding-top:var(--ergo-shape-triangle-medium)}.tcn-tethered[data-anchor-direction=start]{padding-left:var(--ergo-shape-triangle-medium)}.tcn-tethered[data-anchor-direction=end]{padding-right:var(--ergo-shape-triangle-medium)}.tcn-tooltip{--tether-pad-size: 16px;background:transparent;--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark)}.tcn-tooltip .tcn-tooltip-label{box-shadow:0 4px 7px #414141a8;color:var(--on-material);background:var(--material);border-radius:var(--ergo-shape-radius-medium);padding:var(--padding-medium)}.tcn-list{gap:var(--gap-medium)}.tcn-list .tcn-item{height:24px;padding:0px var(--padding-medium);border-radius:var(--ergo-shape-radius-medium)}.tcn-utility-strip{min-width:var(--ergo-sizing-bar-md)}.tcn-utility-strip,.tcn-side{padding-block:var(--padding-medium);gap:var(--gap-medium)}.tcn-footer,.tcn-header,.tcn-utility-bar{padding-inline:var(--pad-inline, var(--padding-medium));gap:var(--gap-medium)}.tcn-utility-bar{min-height:var(--ergo-sizing-bar-md)}.tcn-footer,.tcn-header{min-height:var(--ergo-sizing-bar-lg)}.tcn-scaffold{--scaffold-divide-footer: var(--divide-footer, 1);--scaffold-divide-header: var(--divide-header, 1);--pad-inline: var(--padding-large)}.tcn-scaffold :where(.tcn-header)+:where(.tcn-scaffold),.tcn-scaffold :where(.tcn-header)+:where(.tcn-rail),.tcn-scaffold :where(.tcn-utility-bar)+:where(.tcn-scaffold),.tcn-scaffold :where(.tcn-utility-bar)+:where(.tcn-rail){border-top:calc(var(--scaffold-divide-header) * 1px) solid var(--ergo-material-border)}.tcn-scaffold :where(.tcn-scaffold)+:where(.tcn-footer),.tcn-scaffold :where(.tcn-rail)+:where(.tcn-footer){border-top:calc(var(--scaffold-divide-footer) * 1px) solid var(--ergo-material-border)}.tcn-frame-veil[data-is-veil=true]{background-color:#00000080}.tcn-page{--divide-header: 0;--divide-footer: 0;--material: var(--background-color-tertiary);background-color:var(--material);padding:var(--padding-medium)}.tcn-page>.tcn-scaffold-stack>.tcn-scaffold>.tcn-scaffold-stack,.tcn-page>.tcn-scaffold-stack>.tcn-rail>.tcn-rail-stack{gap:var(--gap-medium)}.tcn-modal{--divide-header: 0;box-shadow:0 4px 34px #00000096;border-radius:var(--ergo-shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:1px solid var(--ergo-material-border)}.tcn-modal :where(.tcn-header){--material: var(--ergo-material-overlay);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-modal :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-drawer{--divide-header: 0;box-shadow:0 4px 34px #00000096;background-color:var(--background-color-primary);overflow:hidden}.tcn-drawer :where(.tcn-header){--material: var(--ergo-material-overlay);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-drawer :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-window{box-shadow:0 4px 34px #00000096;--divide-header: 0;border-radius:var(--ergo-shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:2px solid white}.tcn-window :where(.tcn-header){--material: var(--ergo-material-overlay);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-window :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-pop-confirm{--divide-header: 0;--tether-pad-size: 16px;--pad-inline: var(--padding-medium)}.tcn-pop-confirm .tcn-pop-confirm-scaffold>.tcn-scaffold-stack{border-radius:var(--ergo-shape-radius-medium);box-shadow:0 4px 8px #0006;background-color:var(--background-color-primary)}.tcn-pop-confirm :where(.tcn-tethered-origin-indicator){--material: var(--ergo-white)}.tcn-pop-confirm[data-v-origin=top] :where(.tcn-tethered-origin-indicator){--material: var(--ergo-material-overlay)}.tcn-pop-confirm :where(.tcn-header){min-height:var(--ergo-sizing-bar-md);--material: var(--ergo-material-overlay);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-pop-confirm :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-confirm{--material: var(--background-color-primary);background-color:var(--material)}.tcn-bar{gap:var(--gap-medium)}.tcn-bar :where(.tcn-group:not(:last-child):not(:has(+.tcn-spacer))):after{content:"";display:block;min-width:2px;height:18px;background:var(--ergo-grey);border-radius:var(--ergo-shape-radius-small);align-self:center}.tcn-panel{--divide-header: 1;--divide-footer: 1;--material: var(--background-color-primary);background-color:var(--material);border-radius:var(--ergo-shape-radius-medium);overflow:hidden}.tcn-panel :where(.tcn-title){font-size:18px}.tcn-aside{--divide-header: 1;--divide-footer: 1;--material: var(--background-color-secondary);background-color:var(--material);overflow:hidden}.tcn-aside :where(.tcn-header){min-height:var(--ergo-sizing-bar-md)}.tcn-aside :where(.tcn-footer){min-height:var(--ergo-sizing-bar-md)}.tcn-aside :where(.tcn-title){font-size:16px}.tcn-card{--divide-header: 0;--divide-footer: 1;--pad-inline: var(--padding-medium);background-color:var(--background-color-primary);border-radius:var(--ergo-shape-radius-medium);border:1px solid var(--ergo-material-border);overflow:hidden}.tcn-card :where(.tcn-header){min-height:var(--ergo-sizing-bar-md);--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-secondary);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-card :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-card :where(.tcn-utility-bar){min-height:var(--ergo-sizing-bar-sm)}.tcn-card :where(.tcn-scaffold-stack)>:where(.tcn-scaffold)>:where(.tcn-scaffold-stack),.tcn-card :where(.tcn-scaffold-stack)>:where(.tcn-rail)>:where(.tcn-rail-stack),.tcn-card :where(.tcn-rail-stack)>:where(.tcn-scaffold)>:where(.tcn-scaffold-stack),.tcn-card :where(.tcn-rail-stack)>:where(.tcn-rail)>:where(.tcn-rail-stack){padding-inline:var(--padding-medium)}.tcn-section{--max-section-depth: 4;--section-tab-width: 4px;--section-tab-start: var(--pad-inline, var(--padding-medium));--section-tab-depth: 0;--section-tab: calc( var(--section-tab-start) + (var(--section-tab-width) * var(--section-tab-depth)) );--section-heading-height: var(--ergo-sizing-bar-md);--section-action: var(--ergo-secondary);--section-mat: var(--ergo-secondary-light);--section-on-mat: var(--ergo-text-color-primary)}.tcn-heading{position:sticky;background-color:var(--material);padding-inline-start:var(--pad-inline, var(--padding-medium));padding-inline-end:var(--pad-inline, var(--padding-medium));height:var(--section-heading-height);z-index:5;-webkit-user-select:none;user-select:none}.tcn-section>.tcn-heading{top:calc(var(--section-heading-height) * var(--section-tab-depth));z-index:calc(var(--max-section-depth) - var(--section-tab-depth));padding-inline-start:var(--section-tab);--material: var(--section-mat);--on-material: var(--section-on-mat);--action: var(--section-action);background-color:var(--material);color:var(--on-material);gap:var(--gap-small)}.tcn-detail{padding-block:var(--padding-medium);gap:var(--padding-medium)}.tcn-section>.tcn-detail{padding-inline-start:var(--section-tab);padding-inline-end:var(--pad-inline, var(--padding-medium))}.tcn-scaffold-stack>.tcn-detail{padding-inline:var(--pad-inline, var(--padding-medium))}.tcn-section>.tcn-section{--section-tab-depth: 1;--section-mat: var(--ergo-accent-blue-light);--section-action: var(--ergo-accent-blue)}.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 2;--section-mat: var(--ergo-accent-green-light);--section-action: var(--ergo-accent-green-dark)}.tcn-section>.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 3;--section-mat: var(--ergo-tertiary-light);--section-action: var(--ergo-tertiary-dark)}.tcn-caret{--caret-size: var(--ergo-shape-triangle-medium);--caret-triangle-height: calc(var(--caret-size) / 2);--caret-triangle-width: var(--caret-size);--caret-triangle-base: var(--caret-triangle-height) solid transparent;--caret-triangle-peak: var(--caret-triangle-width) solid var(--material);width:var(--caret-size);height:var(--caret-size);min-width:var(--caret-size);min-height:var(--caret-size);flex-grow:0;display:inline-block}.tcn-caret[data-direction=top]{border-bottom:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=bottom]{border-top:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=start]{border-right:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}.tcn-caret[data-direction=end]{border-left:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}.tcn-table{--table-pad-inline: var(--pad-inline, var(--padding-medium));--material: var(--ergo-white);--on-material: var(--ergo-text-color-primary);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material);border-collapse:separate;display:block}:is(.tcn-table[data-is-sticky=true] .tcn-tbody,.tcn-table[data-is-sticky=true] .tcn-thead) th:first-of-type{border-right:1px solid color-mix(in srgb,var(--material) 80%,black)}:is(.tcn-table[data-is-sticky=true] .tcn-tbody,.tcn-table[data-is-sticky=true] .tcn-thead) th:last-of-type{border-left:1px solid color-mix(in srgb,var(--material) 80%,black)}.tcn-td{text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tcn-thead .tcn-tr{height:var(--ergo-sizing-bar-md)}.tcn-thead .tcn-tr .tcn-th{border-bottom:1px solid var(--ergo-grey-light)}.tcn-thead .tcn-tr .tcn-th:not(:last-of-type):not(:nth-last-of-type(2)){border-right:1px solid var(--ergo-grey)}.tcn-thead .tcn-tr .tcn-th:last-of-type{border-left:1px solid var(--ergo-grey)}.tcn-tfoot{font-weight:700}.tcn-tfoot .tcn-tr{height:var(--ergo-sizing-bar-sm)}.tcn-tfoot .tcn-tr .tcn-th,.tcn-tfoot .tcn-tr .tcn-td{border-top:1px solid var(--ergo-grey-light)}.tcn-thead,.tcn-tfoot{font-size:14px;--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}:is(.tcn-thead,.tcn-tfoot) .tcn-tr .tcn-th:first-child{padding-inline:var(--table-pad-inline)}.tcn-tr{height:var(--ergo-sizing-bar-sm);align-content:center}.tcn-td,.tcn-th{padding-inline:var(--padding-medium);vertical-align:middle;text-align:start;background:var(--material)}.tcn-table .tcn-tr>.tcn-th:first-child,.tcn-table .tcn-tr>.tcn-td:first-child{padding-inline-start:var(--table-pad-inline)}.tcn-table .tcn-tr>.tcn-th:last-child,.tcn-table .tcn-tr>.tcn-td:last-child{padding-inline-end:var(--table-pad-inline)}.tcn-tbody{font-size:12px}.tcn-tbody .tcn-tr:nth-of-type(2n){--material: var(--ergo-accent-blue-light)}.tcn-tbody .tcn-tr:nth-of-type(odd){--material: var(--ergo-white)}.tcn-tbody .tcn-tr:hover{--material: color-mix(in srgb, var(--ergo-accent-blue-light), var(--action) 12%)}.tcn-tbody .tcn-tr[data-is-selected=true]{--material: var(--ergo-secondary);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-accent-blue)}.tcn-tbody .tcn-tr{--material: var(--bg-row);--on-material: var(--ergo-accent-blue);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-entry,.tcn-control{--act: var(--action);--mat: var(--material);--act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);font-size:var(--ergo-text-size-input);border:1px solid var(--ergo-grey);box-sizing:border-box;min-height:var(--ergo-sizing-action-md);border-radius:var(--ergo-shape-radius-medium);padding-inline:4px}.tcn-radio-label,.tcn-select-selected-label{font-size:var(--ergo-text-size-input)}.tcn-control[data-is-disabled=false]:hover{background:var(--act-raised)}.tcn-control:focus-within{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-control:focus{border:1px solid var(--act)}.tcn-control::placeholder{color:var(--ergo-grey)}.tcn-control[data-is-disabled=true]{cursor:not-allowed;background:var(--ergo-material-disabled-outline);color:var(--ergo-text-color-disabled-outline)}.tcn-control[data-is-disabled=true]::placeholder{color:var(--ergo-text-color-disabled-outline)}.tcn-control{display:flex;justify-content:center;gap:var(--gap-small)}.tcn-control-row{min-height:22px;height:auto;align-items:center;gap:var(--gap-small);padding-block:2px}.tcn-control-row>.tcn-icon{color:var(--ergo-grey)}.tcn-control .tcn-entry{border:none;background:transparent;padding:0;min-height:unset;border-radius:0;height:100%;flex-grow:1}.tcn-control .tcn-entry:hover,.tcn-control .tcn-entry:active,.tcn-control .tcn-entry:focus-visible,.tcn-control .tcn-entry:focus{outline:none;border:none;background:transparent}.tcn-input{height:auto}.tcn-textarea,.tcn-input{cursor:text}.tcn-control-set{border-radius:var(--ergo-shape-radius-medium)}.tcn-control-set:focus-within{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-control-set .tcn-control-set-item{z-index:1;border-radius:0;height:auto;min-height:var(--ergo-sizing-action-md);padding-block:0}.tcn-control-set .tcn-control-set-item:focus,.tcn-control-set .tcn-control-set-item:focus-visible{z-index:3;outline:none}.tcn-control-set .tcn-control-set-item:first-child{border-top-left-radius:var(--ergo-shape-radius-medium);border-bottom-left-radius:var(--ergo-shape-radius-medium)}.tcn-control-set .tcn-control-set-item:not(:last-child){margin-right:-1px}.tcn-control-set .tcn-control-set-item:last-child{border-top-right-radius:var(--ergo-shape-radius-medium);border-bottom-right-radius:var(--ergo-shape-radius-medium)}.tcn-control-set .tcn-select,.tcn-control-set .tcn-button,.tcn-control-set .tcn-button[data-hierarchy]{border:1px solid var(--ergo-grey);height:auto;min-height:var(--ergo-sizing-action-md);min-width:var(--ergo-sizing-action-md);box-sizing:border-box}:is(.tcn-control-set .tcn-select,.tcn-control-set .tcn-button,.tcn-control-set .tcn-button[data-hierarchy]):hover,:is(.tcn-control-set .tcn-select,.tcn-control-set .tcn-button,.tcn-control-set .tcn-button[data-hierarchy])[data-hover]{transform:none}.tcn-control-set .tcn-button.tcn-select,.tcn-control-set .tcn-button[data-hierarchy].tcn-select{border-color:var(--ergo-grey)}.tcn-control-set .tcn-select:focus-visible,.tcn-control-set .tcn-button:focus-visible,.tcn-control-set .tcn-button[data-hierarchy]:focus-visible{border-color:var(--ergo-primary)}.tcn-slider[data-is-disabled=true]::-webkit-slider-runnable-track{background:var(--ergo-grey-light)}.tcn-slider[data-is-disabled=true]::-webkit-slider-thumb{background-color:var(--ergo-white);border:1px solid var(--ergo-grey-light)}.tcn-checkbox{--checkbox-color: var(--action, var(--ergo-primary));border-color:var(--checkbox-color)}.tcn-checkbox:focus-visible,.tcn-checkbox:focus{outline:2px solid var(--checkbox-color);outline-offset:2px}.tcn-checkbox[data-is-disabled=true]{cursor:not-allowed;border-color:var(--ergo-material-disabled-outline)}.tcn-checkbox[data-checked=true]{background-color:var(--checkbox-color)}.tcn-checkbox[data-checked=true][data-is-disabled=true]{background-color:var(--ergo-grey-light)}.tcn-checkbox[data-checked=false][data-is-disabled=true]{background:var(--material);border-color:var(--ergo-grey-light);color:var(--ergo-grey-light)}.tcn-checkbox[data-is-disabled=false]:active{background-color:var(--checkbox-color)}.tcn-switch-wrapper[data-focused=true][data-is-checked=false],.tcn-switch-wrapper[data-focused=true][data-is-checked=true]{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-input,.tcn-select,.tcn-slider,.tcn-textarea,.tcn-checkbox,.tcn-switch-wrapper,.tcn-date-picker,.tcn-date-picker-year-selector,.tcn-radio,.tcn-date-picker-input,.tcn-mobile-date-picker,.tcn-mobile-date-picker-year-selector,.tcn-suggestion-list-search-input,.tcn-suggestion-list{--accent-color: var(--ergo-primary)}.tcn-chip{--action: var(--ergo-primary);--accent-color: var(--ergo-primary)}.tcn-datum[data-emphasis=normal]{--datum-font-color: var(--on-material)}.tcn-datum[data-emphasis=strong]{--datum-font-weight: 700}.tcn-datum[data-emphasis=faint]{--datum-font-color: color-mix(in srgb, var(--on-material), transparent 12%)}.tcn-datum[data-severity=dangerous]{--datum-font-color: var(--ergo-status-red)}.tcn-datum[data-severity=cautious]{--datum-font-color: var(--ergo-status-yellow)}.tcn-datum[data-severity=suggested]{--datum-font-color: var(--ergo-status-blue)}.tcn-datum[data-severity=encouraged]{--datum-font-color: var(--ergo-status-green)}.tcn-key{--accent-color: var(--action);font-size:14px;color:var(--datum-font-color);font-weight:var(--datum-font-weight, 400)}.tcn-value{font-size:12px;color:var(--datum-font-color);font-weight:var(--datum-font-weight, 400)}.tcn-term>.tcn-key,.tcn-term>.tcn-value{max-width:50%}.tcn-value :where(.tcn-chip){--action: var(--ergo-accent-blue);--accent-color: var(--ergo-accent-blue)}}
|
|
1
|
+
@layer tcn-theme{.tcn-theme-root{font-family:var(--font-family);color:var(--font-color);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-interactive{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .1s,background .1s,color .1s;--ink: var(--on-material);--act: var(--action);--mat: var(--material);--act-down: color-mix(in srgb, var(--mat), black 12%);--act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);--act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);--act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);background:var(--mat);color:var(--ink);transition:background .1s,color .1s}.tcn-interactive:focus-visible,.tcn-interactive[data-focus-visible]{background:var(--act-focus);outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-interactive:hover,.tcn-interactive[data-hover]{background:var(--act-raised)}.tcn-interactive:active,.tcn-interactive[data-active]{background:var(--act-down)}.tcn-interactive[data-is-disabled=true]{pointer-events:none}.tcn-base-button{--btn-size-base: 26px;--btn-pad-base: 12px;--btn-pad-delta: 4px;--btn-size-delta: 4px;--btn-font-size-delta: 2px;--btn-step: 1;--btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));--btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));border-radius:var(--ergo-shape-radius-medium);min-height:var(--btn-size);padding:var(--padding-small) var(--btn-pad)}.tcn-base-button[data-size=sm]{--btn-step: -1}.tcn-base-button[data-size=md]{--btn-step: 0}.tcn-base-button[data-size=lg]{--btn-step: 1}.tcn-base-button[data-is-utility=true]{height:auto;width:auto;min-width:var(--btn-size);padding:0;--util-ratio: .75;--btn-size-base: 18px;font-size:calc(var(--font-size) + var(--btn-font-size-delta) * var(--btn-step))}.tcn-base-button[data-is-utility=true] .tcn-icon{min-height:min(2px,calc(var(--btn-size) * var(--util-ratio)));min-width:min(2px,calc(var(--btn-size) * var(--util-ratio)))}.tcn-button{--btn-primary: var(--action);--btn-on-primary: var(--on-action);--btn-variant: var(--on-material);transition:box-shadow .1s,transform .1s}.tcn-button[data-severity=dangerous]{--btn-primary: var(--action-severity-dangerous);--btn-variant: var(--ergo-status-red-dark)}.tcn-button[data-severity=cautious]{--btn-primary: var(--action-severity-cautious);--btn-on-primary: var(--ergo-accent-blue);--btn-variant: var(--ergo-status-yellow-dark)}.tcn-button[data-severity=suggested]{--btn-primary: var(--action-severity-suggested);--btn-variant: var(--ergo-status-blue-dark)}.tcn-button[data-severity=encouraged]{--btn-primary: var(--action-severity-encouraged);--btn-variant: var(--ergo-status-green-dark)}.tcn-button[data-hierarchy=primary]{--act: var(--ergo-white);--ink: var(--tcn-button-text-color, var(--btn-on-primary));--mat: var(--tcn-button-color, var(--btn-primary))}.tcn-button[data-hierarchy=primary][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary]{--act: var(--tcn-button-color, var(--btn-variant));--ink: var(--tcn-button-color, var(--btn-variant))}:is(.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary])[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-button[data-hierarchy=tertiary]:hover{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:1px;text-underline-offset:4px}.tcn-button[data-hierarchy=tertiary]{border:1px solid transparent}.tcn-button[data-hierarchy=secondary]{border:1px solid var(--ink)}.tcn-button[data-hierarchy=primary]{border:1px solid var(--mat)}.tcn-button:hover,.tcn-button[data-hover]{transform:translateY(-1px);box-shadow:0 4px 4px #0000001f}:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):before,:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):after{content:"";position:absolute;left:0;right:0;height:4px}:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):before{top:-2px}:is(.tcn-button:hover,.tcn-button[data-hover]) :not(.tcn-select):after{bottom:-2px}.tcn-button:active,.tcn-button[data-active]{transform:translateY(1px);box-shadow:inset 0 2px 2px #0000001f}.tcn-slim-button{height:auto;width:auto;padding:0}.tcn-slim-button[data-size=sm]{min-height:12px;min-width:12px;padding:0}.tcn-slim-button[data-size=sm] .tcn-icon{min-height:10px;min-width:10px}.tcn-slim-button[data-size=md]{min-height:18px;min-width:18px;padding:0}.tcn-slim-button[data-size=md] .tcn-icon{min-height:14px;min-width:14px}.tcn-slim-button[data-size=lg]{min-height:24px;min-width:24px;padding:0}.tcn-slim-button[data-size=lg] .tcn-icon{min-height:20px;min-width:20px}.tcn-button[data-size].tcn-select{padding-inline-end:26px}.tcn-toggle{--tgl-false: var(--ergo-accent-blue);--tgl-true: var(--ergo-accent-blue);--on-tgl-true: var(--ergo-white);--ink: var(--tcn-button-color, var(--tgl-false));--act: var(--tcn-button-color, var(--tgl-false))}.tcn-toggle[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-toggle[data-is-selected=true]{--mat: var(--tcn-button-color, var(--tgl-true));--ink: var(--tcn-button-text-color, var(--ergo-white));--act: var(--ergo-white)}.tcn-toggle[data-is-selected=true][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-fab{border-radius:50%}.tcn-mobile-button{--btn-size-base: 44px;--btn-pad-base: 16px;--btn-size-delta: 8px;--btn-pad-delta: 4px;font-size:calc(16px * var(--scalar, 1))}.tcn-mobile-button[data-size=sm]{--btn-size-base: 36px}.tcn-mobile-button[data-size=lg]{--btn-size-base: 52px}.tcn-button-group .tcn-button-group-button.tcn-mobile-button{--btn-size-base: 44px;--btn-pad-base: 16px;--btn-size-delta: 8px;--btn-pad-delta: 4px;font-size:calc(16px * var(--scalar, 1))}.tcn-button-group .tcn-button-group-button:hover,.tcn-button-group .tcn-button-group-button:active{transform:none}.tcn-button-group .tcn-button-group-button{border-radius:0}.tcn-button-group .tcn-button-group-button:first-child{border-start-start-radius:var(--ergo-shape-radius-medium);border-end-start-radius:var(--ergo-shape-radius-medium)}.tcn-button-group .tcn-button-group-button:last-child{border-start-end-radius:var(--ergo-shape-radius-medium);border-end-end-radius:var(--ergo-shape-radius-medium)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]{border:0}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:last-child){border-right:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:first-child){border-left:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:last-child){border-right:1px solid var(--act-down)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:first-child){border-left:1px solid var(--act-down)}.tcn-select-group .tcn-select-group-option:hover,.tcn-select-group .tcn-select-group-option:active{transform:none}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]{color:var(--act);border-color:var(--act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:hover{background:var(--act-faint)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:active{background:var(--act-down);color:var(--on-act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary][data-is-disabled=true]{color:var(--ergo-material-disabled-outline);border:1px solid var(--ergo-material-disabled-outline)}.tcn-select-group .tcn-select-group-option[data-hierarchy=primary][data-is-disabled=true]{background:var(--ergo-material-disabled-outline);color:#fff;border:1px solid var(--ergo-material-disabled-outline)}.tcn-select-group .tcn-select-group-option{border-radius:0}.tcn-select-group .tcn-select-group-option:first-child{border-top-left-radius:var(--ergo-shape-radius-medium);border-bottom-left-radius:var(--ergo-shape-radius-medium)}.tcn-select-group .tcn-select-group-option:last-child{border-top-right-radius:var(--ergo-shape-radius-medium);border-bottom-right-radius:var(--ergo-shape-radius-medium)}.tcn-tabs-bar .tcn-tabs-list .tcn-tab-item{min-height:24px;padding:0px var(--padding-medium);text-decoration:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item{box-sizing:border-box;border:none;padding:0px var(--padding-medium);border-radius:0}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=true]{--mat: var(--tcn-button-color, var(--material));--ink: var(--tcn-button-text-color, var(--ergo-primary));--act: var(--ergo-primary)}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item:focus-visible{z-index:2}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:hover:after,.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:focus-visible:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ergo-accent-blue);pointer-events:none;width:100%;z-index:3}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list:after{content:"";position:absolute;bottom:-1px;left:0;min-height:2px;transform:translate(var(--tabs-active-rectangle-position-x, 0));width:var(--tabs-active-rectangle-width, 0);background:var(--ergo-primary);pointer-events:none;border-bottom-left-radius:2px;border-bottom-right-radius:2px;transition:transform .3s ease-in-out,width .3s ease-in-out;will-change:transform,width;z-index:2}.tcn-tabs-bar[data-variant=default]:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--ergo-material-divider);pointer-events:none;z-index:1}.tcn-tabs-bar[data-variant=inline]{font-size:12px;min-width:min-content;width:auto;flex-grow:0;border-radius:6px;border:1px solid var(--on-material);padding:2px}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list{height:20px;gap:var(--ergo-spacing-xs)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list .tcn-tab-item{border-radius:var(--ergo-shape-radius-medium);min-height:20px}.material{background-color:var(--material);color:var(--on-material)}.tcn-divider-line,.tcn-divider-line[data-emphasis=normal]{background:var(--material-line)}.tcn-divider-line[data-emphasis=strong]{background:color-mix(in srgb,var(--material-line) 80%,black 20%)}.tcn-divider-line[data-emphasis=faint]{background:color-mix(in srgb,var(--material-line) 80%,white 20%)}.tcn-draggable[data-is-draggable=true] .tcn-drag-handle{cursor:move}.tcn-frame-dialog{border:inherit}.tcn-tethered{--tether-pad-x: 0px;--tether-pad-y: 0px;--indicator-pad-x: 0px;--indicator-pad-y: 0px;--tether-pad-size: 0px;--tether-pad-pos: var(--tether-pad-size);--tether-pad-neg: calc(-1 * var(--tether-pad-size));left:calc(var(--tether-pad-x, 0) - var(--indicator-pad-x, 0) + var(--tethered-left, 0));top:calc(var(--tether-pad-y, 0) + var(--tethered-top, 0))}.tcn-tethered :where(.tcn-tethered-origin-indicator){left:calc(var(--indicator-pad-x, 0) + var(--tethered-origin-delta-x, 0));top:calc(var(--indicator-pad-y, 0) + var(--tethered-origin-delta-y, 0))}.tcn-tethered[data-h-anchor=start]{--tether-pad-x: var(--tether-pad-pos)}.tcn-tethered[data-h-anchor=end]{--tether-pad-x: var(--tether-pad-neg)}.tcn-tethered[data-h-origin=start]{--indicator-pad-x: var(--tether-pad-pos)}.tcn-tethered[data-h-origin=end]{--indicator-pad-x: var(--tether-pad-neg)}.tcn-tethered[data-v-origin=center]{--indicator-pad-x: 0px;--tether-pad-x: 0px}.tcn-tethered[data-v-origin=center][data-v-anchor=top]{--tether-pad-y: var(--tether-pad-pos)}.tcn-tethered[data-v-origin=center][data-v-anchor=bottom]{--tether-pad-y: var(--tether-pad-neg)}.tcn-tethered[data-anchor-direction=bottom]{padding-bottom:var(--ergo-shape-triangle-medium)}.tcn-tethered[data-anchor-direction=top]{padding-top:var(--ergo-shape-triangle-medium)}.tcn-tethered[data-anchor-direction=start]{padding-left:var(--ergo-shape-triangle-medium)}.tcn-tethered[data-anchor-direction=end]{padding-right:var(--ergo-shape-triangle-medium)}.tcn-tooltip{--tether-pad-size: 16px;background:transparent;--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark)}.tcn-tooltip .tcn-tooltip-label{box-shadow:0 4px 7px #414141a8;color:var(--on-material);background:var(--material);border-radius:var(--ergo-shape-radius-medium);padding:var(--padding-medium)}.tcn-list{gap:var(--gap-medium)}.tcn-list .tcn-item{height:24px;padding:0px var(--padding-medium);border-radius:var(--ergo-shape-radius-medium)}.tcn-utility-strip{min-width:var(--ergo-sizing-bar-md)}.tcn-utility-strip{padding-block:var(--padding-medium);gap:var(--gap-medium)}.tcn-footer,.tcn-header,.tcn-utility-bar{padding-inline:var(--pad-inline, var(--padding-medium));gap:var(--gap-medium)}.tcn-utility-bar{min-height:var(--ergo-sizing-bar-md)}.tcn-footer,.tcn-header{min-height:var(--ergo-sizing-bar-lg)}.tcn-scaffold{--scaffold-divide-footer: var(--divide-footer, 1);--scaffold-divide-header: var(--divide-header, 1);--pad-inline: var(--padding-large)}.tcn-scaffold :where(.tcn-header)+:where(.tcn-scaffold),.tcn-scaffold :where(.tcn-header)+:where(.tcn-rail),.tcn-scaffold :where(.tcn-utility-bar)+:where(.tcn-scaffold),.tcn-scaffold :where(.tcn-utility-bar)+:where(.tcn-rail){border-top:calc(var(--scaffold-divide-header) * 1px) solid var(--ergo-material-border)}.tcn-scaffold :where(.tcn-scaffold)+:where(.tcn-footer),.tcn-scaffold :where(.tcn-rail)+:where(.tcn-footer){border-top:calc(var(--scaffold-divide-footer) * 1px) solid var(--ergo-material-border)}.tcn-frame-veil[data-is-veil=true]{background-color:#00000080}.tcn-page{--divide-header: 0;--divide-footer: 0;--material: var(--background-color-tertiary);background-color:var(--material)}.tcn-modal{--divide-header: 0;box-shadow:0 4px 34px #00000096;border-radius:var(--ergo-shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:1px solid var(--ergo-material-border)}.tcn-modal :where(.tcn-header){--material: var(--ergo-material-overlay);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-modal :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-drawer{--divide-header: 0;box-shadow:0 4px 34px #00000096;background-color:var(--background-color-primary);overflow:hidden}.tcn-drawer :where(.tcn-header){--material: var(--ergo-material-overlay);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-drawer :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-window{box-shadow:0 4px 34px #00000096;--divide-header: 0;border-radius:var(--ergo-shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:2px solid white}.tcn-window :where(.tcn-header){--material: var(--ergo-material-overlay);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-window :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-pop-confirm{--divide-header: 0;--tether-pad-size: 16px;--pad-inline: var(--padding-medium)}.tcn-pop-confirm .tcn-pop-confirm-scaffold>.tcn-scaffold-stack{border-radius:var(--ergo-shape-radius-medium);box-shadow:0 4px 8px #0006;background-color:var(--background-color-primary)}.tcn-pop-confirm :where(.tcn-tethered-origin-indicator){--material: var(--ergo-white)}.tcn-pop-confirm[data-v-origin=top] :where(.tcn-tethered-origin-indicator){--material: var(--ergo-material-overlay)}.tcn-pop-confirm :where(.tcn-header){min-height:var(--ergo-sizing-bar-md);--material: var(--ergo-material-overlay);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-pop-confirm :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-confirm{--material: var(--background-color-primary);background-color:var(--material)}.tcn-bar{gap:var(--gap-medium)}.tcn-bar :where(.tcn-group:not(:last-child):not(:has(+.tcn-spacer))):after{content:"";display:block;min-width:2px;height:18px;background:var(--ergo-grey);border-radius:var(--ergo-shape-radius-small);align-self:center}.tcn-panel{--divide-header: 1;--divide-footer: 1;--material: var(--background-color-primary);background-color:var(--material);border-radius:var(--ergo-shape-radius-medium);overflow:hidden}.tcn-panel :where(.tcn-title){font-size:18px}.tcn-aside{--divide-header: 1;--divide-footer: 1;--material: var(--background-color-secondary);background-color:var(--material);overflow:hidden}.tcn-aside :where(.tcn-header){min-height:var(--ergo-sizing-bar-md)}.tcn-aside :where(.tcn-footer){min-height:var(--ergo-sizing-bar-md)}.tcn-aside :where(.tcn-title){font-size:16px}.tcn-card{--divide-header: 0;--divide-footer: 1;--pad-inline: var(--padding-medium);background-color:var(--background-color-primary);border-radius:var(--ergo-shape-radius-medium);border:1px solid var(--ergo-material-border);overflow:hidden}.tcn-card :where(.tcn-header){min-height:var(--ergo-sizing-bar-md);--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-secondary);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-card :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-card :where(.tcn-utility-bar){min-height:var(--ergo-sizing-bar-sm)}.tcn-card :where(.tcn-scaffold-stack)>:where(.tcn-scaffold)>:where(.tcn-scaffold-stack),.tcn-card :where(.tcn-scaffold-stack)>:where(.tcn-rail)>:where(.tcn-rail-stack),.tcn-card :where(.tcn-rail-stack)>:where(.tcn-scaffold)>:where(.tcn-scaffold-stack),.tcn-card :where(.tcn-rail-stack)>:where(.tcn-rail)>:where(.tcn-rail-stack){padding-inline:var(--padding-medium)}.tcn-panel :where(.tcn-columns){padding:var(--padding-large)}.tcn-panel :where(.tcn-columns) :where(.tcn-column){border-right:1px solid var(--ergo-material-border);padding-inline-end:var(--padding-medium)}.tcn-panel :where(.tcn-columns) :where(.tcn-column):not(:first-child){padding-inline-start:var(--padding-medium)}.tcn-page :where(.tcn-columns){padding:var(--padding-medium)}.tcn-page :where(.tcn-columns) :where(.tcn-column):not(:last-child){padding-inline-end:var(--padding-medium)}.tcn-section{--max-section-depth: 4;--section-tab-width: 4px;--section-tab-start: var(--pad-inline, var(--padding-medium));--section-tab-depth: 0;--section-tab: calc( var(--section-tab-start) + (var(--section-tab-width) * var(--section-tab-depth)) );--section-heading-height: var(--ergo-sizing-bar-md);--section-action: var(--ergo-secondary);--section-mat: var(--ergo-secondary-light);--section-on-mat: var(--ergo-text-color-primary)}.tcn-heading{position:sticky;background-color:var(--material);padding-inline-start:var(--pad-inline, var(--padding-medium));padding-inline-end:var(--pad-inline, var(--padding-medium));height:var(--section-heading-height);z-index:5;-webkit-user-select:none;user-select:none}.tcn-section>.tcn-heading{top:calc(var(--section-heading-height) * var(--section-tab-depth));z-index:calc(var(--max-section-depth) - var(--section-tab-depth));padding-inline-start:var(--section-tab);--material: var(--section-mat);--on-material: var(--section-on-mat);--action: var(--section-action);background-color:var(--material);color:var(--on-material);gap:var(--gap-small)}.tcn-detail{padding-block:var(--padding-medium);gap:var(--padding-medium)}.tcn-section>.tcn-detail{padding-inline-start:var(--section-tab);padding-inline-end:var(--pad-inline, var(--padding-medium))}.tcn-scaffold-stack>.tcn-detail{padding-inline:var(--pad-inline, var(--padding-medium))}.tcn-section>.tcn-section{--section-tab-depth: 1;--section-mat: var(--ergo-accent-blue-light);--section-action: var(--ergo-accent-blue)}.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 2;--section-mat: var(--ergo-accent-green-light);--section-action: var(--ergo-accent-green-dark)}.tcn-section>.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 3;--section-mat: var(--ergo-tertiary-light);--section-action: var(--ergo-tertiary-dark)}.tcn-caret{--caret-size: var(--ergo-shape-triangle-medium);--caret-triangle-height: calc(var(--caret-size) / 2);--caret-triangle-width: var(--caret-size);--caret-triangle-base: var(--caret-triangle-height) solid transparent;--caret-triangle-peak: var(--caret-triangle-width) solid var(--material);width:var(--caret-size);height:var(--caret-size);min-width:var(--caret-size);min-height:var(--caret-size);flex-grow:0;display:inline-block}.tcn-caret[data-direction=top]{border-bottom:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=bottom]{border-top:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=start]{border-right:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}.tcn-caret[data-direction=end]{border-left:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}.tcn-table{--table-pad-inline: var(--pad-inline, var(--padding-medium));--material: var(--ergo-white);--on-material: var(--ergo-text-color-primary);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material);border-collapse:separate;display:block}:is(.tcn-table[data-is-sticky=true] .tcn-tbody,.tcn-table[data-is-sticky=true] .tcn-thead) th:first-of-type{border-right:1px solid color-mix(in srgb,var(--material) 80%,black)}:is(.tcn-table[data-is-sticky=true] .tcn-tbody,.tcn-table[data-is-sticky=true] .tcn-thead) th:last-of-type{border-left:1px solid color-mix(in srgb,var(--material) 80%,black)}.tcn-td{text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tcn-thead .tcn-tr{height:var(--ergo-sizing-bar-md)}.tcn-thead .tcn-tr .tcn-th{border-bottom:1px solid var(--ergo-grey-light)}.tcn-thead .tcn-tr .tcn-th:not(:last-of-type):not(:nth-last-of-type(2)){border-right:1px solid var(--ergo-grey)}.tcn-thead .tcn-tr .tcn-th:last-of-type{border-left:1px solid var(--ergo-grey)}.tcn-tfoot{font-weight:700}.tcn-tfoot .tcn-tr{height:var(--ergo-sizing-bar-sm)}.tcn-tfoot .tcn-tr .tcn-th,.tcn-tfoot .tcn-tr .tcn-td{border-top:1px solid var(--ergo-grey-light)}.tcn-thead,.tcn-tfoot{font-size:14px;--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}:is(.tcn-thead,.tcn-tfoot) .tcn-tr .tcn-th:first-child{padding-inline:var(--table-pad-inline)}.tcn-tr{height:var(--ergo-sizing-bar-sm);align-content:center}.tcn-td,.tcn-th{padding-inline:var(--padding-medium);vertical-align:middle;text-align:start;background:var(--material)}.tcn-table .tcn-tr>.tcn-th:first-child,.tcn-table .tcn-tr>.tcn-td:first-child{padding-inline-start:var(--table-pad-inline)}.tcn-table .tcn-tr>.tcn-th:last-child,.tcn-table .tcn-tr>.tcn-td:last-child{padding-inline-end:var(--table-pad-inline)}.tcn-tbody{font-size:12px}.tcn-tbody .tcn-tr:nth-of-type(2n){--material: var(--ergo-accent-blue-light)}.tcn-tbody .tcn-tr:nth-of-type(odd){--material: var(--ergo-white)}.tcn-tbody .tcn-tr:hover{--material: color-mix(in srgb, var(--ergo-accent-blue-light), var(--action) 12%)}.tcn-tbody .tcn-tr[data-is-selected=true]{--material: var(--ergo-secondary);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-accent-blue)}.tcn-tbody .tcn-tr{--material: var(--bg-row);--on-material: var(--ergo-accent-blue);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-entry,.tcn-control{--act: var(--action);--mat: var(--material);--act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);font-size:var(--ergo-text-size-input);border:1px solid var(--ergo-grey);box-sizing:border-box;min-height:var(--ergo-sizing-action-md);border-radius:var(--ergo-shape-radius-medium);padding-inline:4px}.tcn-radio-label,.tcn-select-selected-label{font-size:var(--ergo-text-size-input)}.tcn-control[data-is-disabled=false]:hover{background:var(--act-raised)}.tcn-control:focus-within{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-control:focus{border:1px solid var(--act)}.tcn-control::placeholder{color:var(--ergo-grey)}.tcn-control[data-is-disabled=true]{cursor:not-allowed;background:var(--ergo-material-disabled-outline);color:var(--ergo-text-color-disabled-outline)}.tcn-control[data-is-disabled=true]::placeholder{color:var(--ergo-text-color-disabled-outline)}.tcn-control{display:flex;justify-content:center;gap:var(--gap-small)}.tcn-control-row{min-height:22px;height:auto;align-items:center;gap:var(--gap-small);padding-block:2px}.tcn-control-row>.tcn-icon{color:var(--ergo-grey)}.tcn-control .tcn-entry{border:none;background:transparent;padding:0;min-height:unset;border-radius:0;height:100%;flex-grow:1}.tcn-control .tcn-entry:hover,.tcn-control .tcn-entry:active,.tcn-control .tcn-entry:focus-visible,.tcn-control .tcn-entry:focus{outline:none;border:none;background:transparent}.tcn-input{height:auto}.tcn-textarea,.tcn-input{cursor:text}.tcn-control-set{border-radius:var(--ergo-shape-radius-medium)}.tcn-control-set:focus-within{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-control-set .tcn-control-set-item{z-index:1;border-radius:0;height:auto;min-height:var(--ergo-sizing-action-md);padding-block:0}.tcn-control-set .tcn-control-set-item:focus,.tcn-control-set .tcn-control-set-item:focus-visible{z-index:3;outline:none}.tcn-control-set .tcn-control-set-item:first-child{border-top-left-radius:var(--ergo-shape-radius-medium);border-bottom-left-radius:var(--ergo-shape-radius-medium)}.tcn-control-set .tcn-control-set-item:not(:last-child){margin-right:-1px}.tcn-control-set .tcn-control-set-item:last-child{border-top-right-radius:var(--ergo-shape-radius-medium);border-bottom-right-radius:var(--ergo-shape-radius-medium)}.tcn-control-set .tcn-select,.tcn-control-set .tcn-button,.tcn-control-set .tcn-button[data-hierarchy]{border:1px solid var(--ergo-grey);height:auto;min-height:var(--ergo-sizing-action-md);min-width:var(--ergo-sizing-action-md);box-sizing:border-box}:is(.tcn-control-set .tcn-select,.tcn-control-set .tcn-button,.tcn-control-set .tcn-button[data-hierarchy]):hover,:is(.tcn-control-set .tcn-select,.tcn-control-set .tcn-button,.tcn-control-set .tcn-button[data-hierarchy])[data-hover]{transform:none}.tcn-control-set .tcn-button.tcn-select,.tcn-control-set .tcn-button[data-hierarchy].tcn-select{border-color:var(--ergo-grey)}.tcn-control-set .tcn-select:focus-visible,.tcn-control-set .tcn-button:focus-visible,.tcn-control-set .tcn-button[data-hierarchy]:focus-visible{border-color:var(--ergo-primary)}.tcn-slider[data-is-disabled=true]::-webkit-slider-runnable-track{background:var(--ergo-grey-light)}.tcn-slider[data-is-disabled=true]::-webkit-slider-thumb{background-color:var(--ergo-white);border:1px solid var(--ergo-grey-light)}.tcn-checkbox{--checkbox-color: var(--action, var(--ergo-primary));border-color:var(--checkbox-color)}.tcn-checkbox:focus-visible,.tcn-checkbox:focus{outline:2px solid var(--checkbox-color);outline-offset:2px}.tcn-checkbox[data-is-disabled=true]{cursor:not-allowed;border-color:var(--ergo-material-disabled-outline)}.tcn-checkbox[data-checked=true]{background-color:var(--checkbox-color)}.tcn-checkbox[data-checked=true][data-is-disabled=true]{background-color:var(--ergo-grey-light)}.tcn-checkbox[data-checked=false][data-is-disabled=true]{background:var(--material);border-color:var(--ergo-grey-light);color:var(--ergo-grey-light)}.tcn-checkbox[data-is-disabled=false]:active{background-color:var(--checkbox-color)}.tcn-switch-wrapper[data-focused=true][data-is-checked=false],.tcn-switch-wrapper[data-focused=true][data-is-checked=true]{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-input,.tcn-select,.tcn-slider,.tcn-textarea,.tcn-checkbox,.tcn-switch-wrapper,.tcn-date-picker,.tcn-date-picker-year-selector,.tcn-radio,.tcn-date-picker-input,.tcn-mobile-date-picker,.tcn-mobile-date-picker-year-selector,.tcn-suggestion-list-search-input,.tcn-suggestion-list{--accent-color: var(--ergo-primary)}.tcn-chip{--action: var(--ergo-primary);--accent-color: var(--ergo-primary)}.tcn-datum[data-emphasis=normal]{--datum-font-color: var(--on-material)}.tcn-datum[data-emphasis=strong]{--datum-font-weight: 700}.tcn-datum[data-emphasis=faint]{--datum-font-color: color-mix(in srgb, var(--on-material), transparent 12%)}.tcn-datum[data-severity=dangerous]{--datum-font-color: var(--ergo-status-red)}.tcn-datum[data-severity=cautious]{--datum-font-color: var(--ergo-status-yellow)}.tcn-datum[data-severity=suggested]{--datum-font-color: var(--ergo-status-blue)}.tcn-datum[data-severity=encouraged]{--datum-font-color: var(--ergo-status-green)}.tcn-key{--accent-color: var(--action);font-size:14px;color:var(--datum-font-color);font-weight:var(--datum-font-weight, 400)}.tcn-value{font-size:12px;color:var(--datum-font-color);font-weight:var(--datum-font-weight, 400)}.tcn-term>.tcn-key,.tcn-term>.tcn-value{max-width:50%}.tcn-value :where(.tcn-chip){--action: var(--ergo-accent-blue);--accent-color: var(--ergo-accent-blue)}}
|
|
@@ -778,8 +778,7 @@ const r = `@layer tcn-theme {
|
|
|
778
778
|
min-width: var(--ergo-sizing-bar-md);
|
|
779
779
|
}
|
|
780
780
|
|
|
781
|
-
.tcn-utility-strip
|
|
782
|
-
.tcn-side {
|
|
781
|
+
.tcn-utility-strip {
|
|
783
782
|
padding-block: var(--padding-medium);
|
|
784
783
|
gap: var(--gap-medium);
|
|
785
784
|
}
|
|
@@ -833,13 +832,6 @@ const r = `@layer tcn-theme {
|
|
|
833
832
|
--divide-footer: 0;
|
|
834
833
|
--material: var(--background-color-tertiary);
|
|
835
834
|
background-color: var(--material);
|
|
836
|
-
padding: var(--padding-medium);
|
|
837
|
-
}
|
|
838
|
-
|
|
839
|
-
/* TODO: remove - shim to replicate Column at Page level */
|
|
840
|
-
.tcn-page > .tcn-scaffold-stack > .tcn-scaffold > .tcn-scaffold-stack,
|
|
841
|
-
.tcn-page > .tcn-scaffold-stack > .tcn-rail > .tcn-rail-stack {
|
|
842
|
-
gap: var(--gap-medium);
|
|
843
835
|
}
|
|
844
836
|
|
|
845
837
|
/* MODAL: */
|
|
@@ -1041,6 +1033,32 @@ const r = `@layer tcn-theme {
|
|
|
1041
1033
|
}
|
|
1042
1034
|
}
|
|
1043
1035
|
|
|
1036
|
+
/* Columns: */
|
|
1037
|
+
.tcn-panel {
|
|
1038
|
+
:where(.tcn-columns) {
|
|
1039
|
+
padding: var(--padding-large);
|
|
1040
|
+
|
|
1041
|
+
:where(.tcn-column) {
|
|
1042
|
+
border-right: 1px solid var(--ergo-material-border);
|
|
1043
|
+
padding-inline-end: var(--padding-medium);
|
|
1044
|
+
}
|
|
1045
|
+
|
|
1046
|
+
:where(.tcn-column):not(:first-child) {
|
|
1047
|
+
padding-inline-start: var(--padding-medium);
|
|
1048
|
+
}
|
|
1049
|
+
}
|
|
1050
|
+
}
|
|
1051
|
+
|
|
1052
|
+
.tcn-page {
|
|
1053
|
+
:where(.tcn-columns) {
|
|
1054
|
+
padding: var(--padding-medium);
|
|
1055
|
+
|
|
1056
|
+
:where(.tcn-column):not(:last-child) {
|
|
1057
|
+
padding-inline-end: var(--padding-medium);
|
|
1058
|
+
}
|
|
1059
|
+
}
|
|
1060
|
+
}
|
|
1061
|
+
|
|
1044
1062
|
/* SECTION */
|
|
1045
1063
|
.tcn-section {
|
|
1046
1064
|
--max-section-depth: 4;
|