@tcn/ui 0.12.2 → 0.12.3

package/dist/overlay/tethered/tethered.js

@@ -1,82 +1,83 @@
-import { jsx as p, jsxs as P } from "react/jsx-runtime";
-import { clsx as c } from "clsx";
-import { forwardRef as j } from "react";
+import { jsx as s, jsxs as T } from "react/jsx-runtime";
+import { clsx as m } from "clsx";
+import { forwardRef as _ } from "react";
 import "../../stacks/box/box.js";
 import "../../stacks/h_collapsible_box.js";
 import "../../stacks/h_stack.js";
 import "../../stacks/spacer.js";
 import "../../stacks/v_collapsible_box.js";
 import "../../stacks/v_stack.js";
-import { ZStack as D } from "../../stacks/z_stack.js";
+import { ZStack as b } from "../../stacks/z_stack.js";
 import "../../utils/click_away_listener.js";
 import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
-import { useForkRef as E } from "../../utils/hooks/use_fork_ref.js";
+import { useForkRef as k } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
 import "../../utils/dnd/context.js";
 import "../../draggable.module-BgelQsuJ.js";
-import { Caret as N } from "../caret/caret.js";
-import { Portal as S } from "../portal/portal.js";
-import { useCaretRefDimensions as F } from "./hooks/useCaretRefDimensions.js";
-import { useTether as I } from "./hooks/useTether.js";
-import { useTetherOrigin as V } from "./hooks/useTetherOrigin.js";
-import '../../tethered.css';const Z = "_origin-indicator_cbc16ea", q = "_tethered_44058d8", f = { "origin-indicator": Z, tethered: q }, mt = j(
+import { Caret as j } from "../caret/caret.js";
+import { Portal as N } from "../portal/portal.js";
+import { useTether as C } from "./hooks/use_tether.js";
+import { useTetherOrigin as F } from "./hooks/use_tether_origin.js";
+import '../../tethered.css';const I = "_origin-indicator_cbc16ea", P = "_tethered_44058d8", p = { "origin-indicator": I, tethered: P }, tt = _(
   function({
-    anchor: h,
-    verticalAnchor: n = "bottom",
-    verticalOrigin: r = "top",
-    horizontalAnchor: s = "start",
-    horizontalOrigin: o = "start",
-    verticalOffset: x = 0,
-    horizontalOffset: g = 0,
-    precision: i = "low",
-    children: l,
-    style: $,
-    className: y,
-    ...R
-  }, u) {
-    const { position: t, tetherRef: w } = I({
-      anchor: h,
-      verticalAnchor: n,
-      verticalOrigin: r,
-      horizontalAnchor: s,
-      horizontalOrigin: o,
-      verticalOffset: x,
-      horizontalOffset: g
-    }), T = { x: t.left, y: t.top }, { originPosition: m, originOffset: d, containerRef: _, originDirection: e } = V(T, o, r, i), { caretElementRef: b, caretSize: a } = F(
+    anchor: a,
+    verticalAnchor: r = "bottom",
+    verticalOrigin: e = "top",
+    horizontalAnchor: n = "start",
+    horizontalOrigin: i = "start",
+    verticalOffset: c = 0,
+    horizontalOffset: h = 0,
+    precision: d = "low",
+    children: f,
+    style: g,
+    className: x,
+    ...l
+  }, $) {
+    const { rectangle: o, tetherRef: y } = C({
+      anchor: a,
+      verticalAnchor: r,
+      verticalOrigin: e,
+      horizontalAnchor: n,
+      horizontalOrigin: i,
+      verticalOffset: c,
+      horizontalOffset: h
+    }), [t, u] = F(
+      o,
       i,
-      e
-    ), k = E(u, w, _), C = {
-      "--tethered-top": `${t.top}px`,
-      "--tethered-left": `${t.left}px`,
-      "--tethered-origin-y": `${m.y}px`,
-      "--tethered-origin-x": `${m.x}px`,
-      "--tethered-origin-delta-y": `${d.yOffset}px`,
-      "--tethered-origin-delta-x": `${d.xOffset}px`,
-      "--origin-indicator-dimensions-width": `${a.width}px`,
-      "--origin-indicator-dimensions-height": `${a.height}px`
+      e,
+      d
+    ), R = k($, y), w = {
+      "--tethered-top": `${o.position.y}px`,
+      "--tethered-left": `${o.position.x}px`,
+      "--tethered-origin-y": `${t.rectangle.position.y}px`,
+      "--tethered-origin-x": `${t.rectangle.position.x}px`,
+      "--tethered-origin-delta-y": `${t.offset.y}px`,
+      "--tethered-origin-delta-x": `${t.offset.x}px`,
+      "--origin-indicator-dimensions-width": `${t.rectangle.dimensions.width}px`,
+      "--origin-indicator-dimensions-height": `${t.rectangle.dimensions.height}px`
     };
-    return /* @__PURE__ */ p(S, { children: /* @__PURE__ */ P(
-      D,
+    return /* @__PURE__ */ s(N, { children: /* @__PURE__ */ T(
+      b,
       {
-        ref: k,
-        className: c(f.tethered, "tcn-tethered", y),
-        style: { ...C, ...$ },
-        "data-v-anchor": n,
-        "data-h-anchor": s,
-        "data-v-origin": r,
-        "data-h-origin": o,
-        "data-anchor-direction": e,
-        ...R,
+        ref: R,
+        className: m(p.tethered, "tcn-tethered", x),
+        style: { ...w, ...g },
+        "data-v-anchor": r,
+        "data-h-anchor": n,
+        "data-v-origin": e,
+        "data-h-origin": i,
+        "data-anchor-direction": t.direction,
+        ...l,
         children: [
-          l,
-          i === "high" && e !== "none" && /* @__PURE__ */ p(
-            N,
+          f,
+          d === "high" && t.direction !== "none" && /* @__PURE__ */ s(
+            j,
             {
-              ref: b,
-              direction: e,
-              className: c(
-                f["origin-indicator"],
+              ref: u,
+              direction: t.direction,
+              className: m(
+                p["origin-indicator"],
                 "tcn-tethered-origin-indicator"
               )
             }
@@ -87,6 +88,6 @@ import '../../tethered.css';const Z = "_origin-indicator_cbc16ea", q = "_tethere
   }
 );
 export {
-  mt as Tethered
+  tt as Tethered
 };
 //# sourceMappingURL=tethered.js.map

package/dist/overlay/tethered/tethered.js.map

@@ -1 +1 @@
-{"version":3,"file":"tethered.js","sources":["../../../src/overlay/tethered/tethered.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, type PropsWithChildren } from 'react';\nimport { ZStack, type ZStackProps } from '../../stacks/index.js';\nimport { useForkRef, type Rectangle } from '../../utils/index.js';\nimport { Caret } from '../caret/caret.js';\nimport { Portal } from '../portal/portal.js';\nimport { useCaretRefDimensions } from './hooks/useCaretRefDimensions.js';\nimport { useTether } from './hooks/useTether.js';\nimport { useTetherOrigin } from './hooks/useTetherOrigin.js';\nimport type { HorizontalTether, VerticalTether } from './types.js';\n\n// Styles\nimport styles from './tethered.module.css';\n\nexport interface BaseTetheredOwnProps {\n  verticalAnchor?: VerticalTether;\n  verticalOrigin?: VerticalTether;\n  horizontalOrigin?: HorizontalTether;\n  horizontalAnchor?: HorizontalTether;\n  verticalOffset?: number;\n  horizontalOffset?: number;\n}\n\nexport interface TetheredOwnProp extends BaseTetheredOwnProps {\n  anchor: Rectangle | null;\n  precision?: 'high' | 'low';\n}\nexport interface TetheredProps extends TetheredOwnProp, ZStackProps {}\n\nexport const Tethered = forwardRef<HTMLElement, PropsWithChildren<TetheredProps>>(\n  function Tethered(\n    {\n      anchor,\n      verticalAnchor = 'bottom',\n      verticalOrigin = 'top',\n      horizontalAnchor = 'start',\n      horizontalOrigin = 'start',\n      verticalOffset = 0,\n      horizontalOffset = 0,\n      precision = 'low',\n      children,\n      style,\n      className,\n      ...rest\n    },\n    ref\n  ) {\n    const { position, tetherRef } = useTether({\n      anchor,\n      verticalAnchor,\n      verticalOrigin,\n      horizontalAnchor,\n      horizontalOrigin,\n      verticalOffset,\n      horizontalOffset,\n    });\n\n    // Convert position from { top, left } to Position type { x, y }\n    const tetherPosition = { x: position.left, y: position.top };\n\n    const { originPosition, originOffset, containerRef, originDirection } =\n      useTetherOrigin(tetherPosition, horizontalOrigin, verticalOrigin, precision);\n\n    const { caretElementRef: setCaretElement, caretSize } = useCaretRefDimensions(\n      precision,\n      originDirection\n    );\n\n    const forkedRef = useForkRef(ref, tetherRef, containerRef);\n\n    const cssVariables = {\n      '--tethered-top': `${position.top}px`,\n      '--tethered-left': `${position.left}px`,\n      '--tethered-origin-y': `${originPosition.y}px`,\n      '--tethered-origin-x': `${originPosition.x}px`,\n      '--tethered-origin-delta-y': `${originOffset.yOffset}px`,\n      '--tethered-origin-delta-x': `${originOffset.xOffset}px`,\n      '--origin-indicator-dimensions-width': `${caretSize.width}px`,\n      '--origin-indicator-dimensions-height': `${caretSize.height}px`,\n    };\n\n    return (\n      <Portal>\n        <ZStack\n          ref={forkedRef}\n          className={clsx(styles.tethered, 'tcn-tethered', className)}\n          style={{ ...cssVariables, ...style }}\n          data-v-anchor={verticalAnchor}\n          data-h-anchor={horizontalAnchor}\n          data-v-origin={verticalOrigin}\n          data-h-origin={horizontalOrigin}\n          data-anchor-direction={originDirection}\n          {...rest}\n        >\n          {children}\n          {precision === 'high' && originDirection !== 'none' && (\n            <Caret\n              ref={setCaretElement}\n              direction={originDirection}\n              className={clsx(\n                styles['origin-indicator'],\n                'tcn-tethered-origin-indicator'\n              )}\n            />\n          )}\n        </ZStack>\n      </Portal>\n    );\n  }\n);\n"],"names":["Tethered","forwardRef","anchor","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","verticalOffset","horizontalOffset","precision","children","style","className","rest","ref","position","tetherRef","useTether","tetherPosition","originPosition","originOffset","containerRef","originDirection","useTetherOrigin","setCaretElement","caretSize","useCaretRefDimensions","forkedRef","useForkRef","cssVariables","Portal","jsxs","ZStack","clsx","styles","jsx","Caret"],"mappings":";;;;;;;;;;;;;;;;;;;;;;4GA6BaA,KAAWC;AAAA,EACtB,SACE;AAAA,IACE,QAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,gBAAAC,IAAiB;AAAA,IACjB,kBAAAC,IAAmB;AAAA,IACnB,kBAAAC,IAAmB;AAAA,IACnB,gBAAAC,IAAiB;AAAA,IACjB,kBAAAC,IAAmB;AAAA,IACnB,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAM,EAAE,UAAAC,GAAU,WAAAC,EAAA,IAAcC,EAAU;AAAA,MACxC,QAAAf;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,IAAA,CACD,GAGKU,IAAiB,EAAE,GAAGH,EAAS,MAAM,GAAGA,EAAS,IAAA,GAEjD,EAAE,gBAAAI,GAAgB,cAAAC,GAAc,cAAAC,GAAc,iBAAAC,EAAA,IAClDC,EAAgBL,GAAgBZ,GAAkBF,GAAgBK,CAAS,GAEvE,EAAE,iBAAiBe,GAAiB,WAAAC,EAAA,IAAcC;AAAA,MACtDjB;AAAA,MACAa;AAAA,IAAA,GAGIK,IAAYC,EAAWd,GAAKE,GAAWK,CAAY,GAEnDQ,IAAe;AAAA,MACnB,kBAAkB,GAAGd,EAAS,GAAG;AAAA,MACjC,mBAAmB,GAAGA,EAAS,IAAI;AAAA,MACnC,uBAAuB,GAAGI,EAAe,CAAC;AAAA,MAC1C,uBAAuB,GAAGA,EAAe,CAAC;AAAA,MAC1C,6BAA6B,GAAGC,EAAa,OAAO;AAAA,MACpD,6BAA6B,GAAGA,EAAa,OAAO;AAAA,MACpD,uCAAuC,GAAGK,EAAU,KAAK;AAAA,MACzD,wCAAwC,GAAGA,EAAU,MAAM;AAAA,IAAA;AAG7D,6BACGK,GAAA,EACC,UAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKL;AAAA,QACL,WAAWM,EAAKC,EAAO,UAAU,gBAAgBtB,CAAS;AAAA,QAC1D,OAAO,EAAE,GAAGiB,GAAc,GAAGlB,EAAA;AAAA,QAC7B,iBAAeR;AAAA,QACf,iBAAeE;AAAA,QACf,iBAAeD;AAAA,QACf,iBAAeE;AAAA,QACf,yBAAuBgB;AAAA,QACtB,GAAGT;AAAA,QAEH,UAAA;AAAA,UAAAH;AAAA,UACAD,MAAc,UAAUa,MAAoB,UAC3C,gBAAAa;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,KAAKZ;AAAA,cACL,WAAWF;AAAA,cACX,WAAWW;AAAA,gBACTC,EAAO,kBAAkB;AAAA,gBACzB;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"tethered.js","sources":["../../../src/overlay/tethered/tethered.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, type PropsWithChildren } from 'react';\nimport { ZStack, type ZStackProps } from '../../stacks/index.js';\nimport { useForkRef, type Rectangle } from '../../utils/index.js';\nimport { Caret } from '../caret/caret.js';\nimport { Portal } from '../portal/portal.js';\nimport { useTether } from './hooks/use_tether.js';\nimport { useTetherOrigin } from './hooks/use_tether_origin.js';\nimport type { HorizontalTether, VerticalTether } from './types.js';\n\n// Styles\nimport styles from './tethered.module.css';\n\nexport interface BaseTetheredOwnProps {\n  verticalAnchor?: VerticalTether;\n  verticalOrigin?: VerticalTether;\n  horizontalOrigin?: HorizontalTether;\n  horizontalAnchor?: HorizontalTether;\n  verticalOffset?: number;\n  horizontalOffset?: number;\n}\n\nexport interface TetheredOwnProp extends BaseTetheredOwnProps {\n  anchor: Rectangle | null;\n  precision?: 'high' | 'low';\n}\n\nexport interface TetheredProps extends TetheredOwnProp, ZStackProps {}\n\nexport const Tethered = forwardRef<HTMLElement, PropsWithChildren<TetheredProps>>(\n  function Tethered(\n    {\n      anchor,\n      verticalAnchor = 'bottom',\n      verticalOrigin = 'top',\n      horizontalAnchor = 'start',\n      horizontalOrigin = 'start',\n      verticalOffset = 0,\n      horizontalOffset = 0,\n      precision = 'low',\n      children,\n      style,\n      className,\n      ...rest\n    },\n    ref\n  ) {\n    const { rectangle, tetherRef } = useTether({\n      anchor,\n      verticalAnchor,\n      verticalOrigin,\n      horizontalAnchor,\n      horizontalOrigin,\n      verticalOffset,\n      horizontalOffset,\n    });\n\n    const [origin, originRef] = useTetherOrigin(\n      rectangle,\n      horizontalOrigin,\n      verticalOrigin,\n      precision\n    );\n\n    const forkedRef = useForkRef(ref, tetherRef);\n\n    const cssVariables = {\n      '--tethered-top': `${rectangle.position.y}px`,\n      '--tethered-left': `${rectangle.position.x}px`,\n      '--tethered-origin-y': `${origin.rectangle.position.y}px`,\n      '--tethered-origin-x': `${origin.rectangle.position.x}px`,\n      '--tethered-origin-delta-y': `${origin.offset.y}px`,\n      '--tethered-origin-delta-x': `${origin.offset.x}px`,\n      '--origin-indicator-dimensions-width': `${origin.rectangle.dimensions.width}px`,\n      '--origin-indicator-dimensions-height': `${origin.rectangle.dimensions.height}px`,\n    };\n\n    return (\n      <Portal>\n        <ZStack\n          ref={forkedRef}\n          className={clsx(styles.tethered, 'tcn-tethered', className)}\n          style={{ ...cssVariables, ...style }}\n          data-v-anchor={verticalAnchor}\n          data-h-anchor={horizontalAnchor}\n          data-v-origin={verticalOrigin}\n          data-h-origin={horizontalOrigin}\n          data-anchor-direction={origin.direction}\n          {...rest}\n        >\n          {children}\n          {precision === 'high' && origin.direction !== 'none' && (\n            <Caret\n              ref={originRef}\n              direction={origin.direction}\n              className={clsx(\n                styles['origin-indicator'],\n                'tcn-tethered-origin-indicator'\n              )}\n            />\n          )}\n        </ZStack>\n      </Portal>\n    );\n  }\n);\n"],"names":["Tethered","forwardRef","anchor","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","verticalOffset","horizontalOffset","precision","children","style","className","rest","ref","rectangle","tetherRef","useTether","origin","originRef","useTetherOrigin","forkedRef","useForkRef","cssVariables","Portal","jsxs","ZStack","clsx","styles","jsx","Caret"],"mappings":";;;;;;;;;;;;;;;;;;;;;4GA6BaA,KAAWC;AAAA,EACtB,SACE;AAAA,IACE,QAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,gBAAAC,IAAiB;AAAA,IACjB,kBAAAC,IAAmB;AAAA,IACnB,kBAAAC,IAAmB;AAAA,IACnB,gBAAAC,IAAiB;AAAA,IACjB,kBAAAC,IAAmB;AAAA,IACnB,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAM,EAAE,WAAAC,GAAW,WAAAC,EAAA,IAAcC,EAAU;AAAA,MACzC,QAAAf;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,IAAA,CACD,GAEK,CAACU,GAAQC,CAAS,IAAIC;AAAA,MAC1BL;AAAA,MACAT;AAAA,MACAF;AAAA,MACAK;AAAA,IAAA,GAGIY,IAAYC,EAAWR,GAAKE,CAAS,GAErCO,IAAe;AAAA,MACnB,kBAAkB,GAAGR,EAAU,SAAS,CAAC;AAAA,MACzC,mBAAmB,GAAGA,EAAU,SAAS,CAAC;AAAA,MAC1C,uBAAuB,GAAGG,EAAO,UAAU,SAAS,CAAC;AAAA,MACrD,uBAAuB,GAAGA,EAAO,UAAU,SAAS,CAAC;AAAA,MACrD,6BAA6B,GAAGA,EAAO,OAAO,CAAC;AAAA,MAC/C,6BAA6B,GAAGA,EAAO,OAAO,CAAC;AAAA,MAC/C,uCAAuC,GAAGA,EAAO,UAAU,WAAW,KAAK;AAAA,MAC3E,wCAAwC,GAAGA,EAAO,UAAU,WAAW,MAAM;AAAA,IAAA;AAG/E,6BACGM,GAAA,EACC,UAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKL;AAAA,QACL,WAAWM,EAAKC,EAAO,UAAU,gBAAgBhB,CAAS;AAAA,QAC1D,OAAO,EAAE,GAAGW,GAAc,GAAGZ,EAAA;AAAA,QAC7B,iBAAeR;AAAA,QACf,iBAAeE;AAAA,QACf,iBAAeD;AAAA,QACf,iBAAeE;AAAA,QACf,yBAAuBY,EAAO;AAAA,QAC7B,GAAGL;AAAA,QAEH,UAAA;AAAA,UAAAH;AAAA,UACAD,MAAc,UAAUS,EAAO,cAAc,UAC5C,gBAAAW;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,KAAKX;AAAA,cACL,WAAWD,EAAO;AAAA,cAClB,WAAWS;AAAA,gBACTC,EAAO,kBAAkB;AAAA,gBACzB;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;"}

package/dist/surfaces/pop_confirm/pop_confirm.js

@@ -29,23 +29,23 @@ import "../../stacks/z_stack.js";
 import "../../layouts/rail/rail.js";
 import "../../layouts/rail/side/side.js";
 import "../../layouts/rail/utility_strip/utility_strip.js";
-import { PopperDismissal as l } from "../../overlay/popper/base/dismissal_decorator.js";
-import { ElementPopper as s } from "../../overlay/popper/element_popper.js";
+import { PopperDismissal as s } from "../../overlay/popper/base/dismissal_decorator.js";
+import { ElementPopper as a } from "../../overlay/popper/element_popper.js";
 const O = n.forwardRef(
   function({
     children: r,
     className: m,
-    precision: t = "low",
-    dismissals: i = [l.CLICK_AWAY],
+    precision: i = "high",
+    dismissals: t = [s.CLICK_AWAY],
     ...p
   }, f) {
     return /* @__PURE__ */ o(
-      s,
+      a,
       {
         ref: f,
-        precision: t,
+        precision: i,
         className: e(m, "tcn-pop-confirm"),
-        dismissals: i,
+        dismissals: t,
         ...p,
         children: /* @__PURE__ */ o(c, { width: "100%", height: "100%", children: r })
       }

package/dist/surfaces/pop_confirm/pop_confirm.js.map

@@ -1 +1 @@
-{"version":3,"file":"pop_confirm.js","sources":["../../../src/surfaces/pop_confirm/pop_confirm.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Scaffold } from '../../layouts/index.js';\nimport { PopperDismissal } from '../../overlay/popper/base/dismissal_decorator.js';\nimport {\n  ElementPopper,\n  type ElementPopperProps,\n} from '../../overlay/popper/element_popper.js';\n\nexport type PopConfirmProps = ElementPopperProps;\n\nexport const PopConfirm = React.forwardRef<HTMLDivElement, PopConfirmProps>(\n  function PopConfirm(\n    {\n      children,\n      className,\n      precision = 'low',\n      dismissals = [PopperDismissal.CLICK_AWAY],\n      ...props\n    },\n    ref\n  ) {\n    return (\n      <ElementPopper\n        ref={ref}\n        precision={precision}\n        className={clsx(className, 'tcn-pop-confirm')}\n        dismissals={dismissals}\n        {...props}\n      >\n        <Scaffold width={'100%'} height={'100%'}>\n          {children}\n        </Scaffold>\n      </ElementPopper>\n    );\n  }\n);\n"],"names":["PopConfirm","React","children","className","precision","dismissals","PopperDismissal","props","ref","jsx","ElementPopper","clsx","Scaffold"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,SACE;AAAA,IACE,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,YAAAC,IAAa,CAACC,EAAgB,UAAU;AAAA,IACxC,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAAJ;AAAA,QACA,WAAWO,EAAKR,GAAW,iBAAiB;AAAA,QAC5C,YAAAE;AAAA,QACC,GAAGE;AAAA,QAEJ,4BAACK,GAAA,EAAS,OAAO,QAAQ,QAAQ,QAC9B,UAAAV,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"pop_confirm.js","sources":["../../../src/surfaces/pop_confirm/pop_confirm.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Scaffold } from '../../layouts/index.js';\nimport { PopperDismissal } from '../../overlay/popper/base/dismissal_decorator.js';\nimport {\n  ElementPopper,\n  type ElementPopperProps,\n} from '../../overlay/popper/element_popper.js';\n\nexport type PopConfirmProps = ElementPopperProps;\n\nexport const PopConfirm = React.forwardRef<HTMLDivElement, PopConfirmProps>(\n  function PopConfirm(\n    {\n      children,\n      className,\n      precision = 'high',\n      dismissals = [PopperDismissal.CLICK_AWAY],\n      ...props\n    },\n    ref\n  ) {\n    return (\n      <ElementPopper\n        ref={ref}\n        precision={precision}\n        className={clsx(className, 'tcn-pop-confirm')}\n        dismissals={dismissals}\n        {...props}\n      >\n        <Scaffold width={'100%'} height={'100%'}>\n          {children}\n        </Scaffold>\n      </ElementPopper>\n    );\n  }\n);\n"],"names":["PopConfirm","React","children","className","precision","dismissals","PopperDismissal","props","ref","jsx","ElementPopper","clsx","Scaffold"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,SACE;AAAA,IACE,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,YAAAC,IAAa,CAACC,EAAgB,UAAU;AAAA,IACxC,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAAJ;AAAA,QACA,WAAWO,EAAKR,GAAW,iBAAiB;AAAA,QAC5C,YAAAE;AAAA,QACC,GAAGE;AAAA,QAEJ,4BAACK,GAAA,EAAS,OAAO,QAAQ,QAAQ,QAC9B,UAAAV,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/surfaces/tooltip/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/surfaces/tooltip/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,wCAAwC,CAAC;AAGhD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,kBAAkB,EAAE,eAAe,CAAC;IAC7E,qDAAqD;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,OAAO,qFA4ClB,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/surfaces/tooltip/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,wCAAwC,CAAC;AAGhD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,kBAAkB,EAAE,eAAe,CAAC;IAC7E,qDAAqD;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,OAAO,qFAgDlB,CAAC"}

package/dist/surfaces/tooltip/tooltip.js

@@ -1,41 +1,40 @@
-import { jsx as e, jsxs as u, Fragment as d } from "react/jsx-runtime";
-import { clsx as x } from "clsx";
-import R, { useRef as _, isValidElement as h, cloneElement as w } from "react";
+import { jsx as r, jsxs as h, Fragment as u } from "react/jsx-runtime";
+import { clsx as d } from "clsx";
+import x, { useRef as R, isValidElement as _, cloneElement as g } from "react";
 import { PreviewPopper as E } from "../../overlay/popper/preview_popper.js";
-import { HStack as b } from "../../stacks/h_stack.js";
-import '../../tooltip.css';const j = "_tooltip_b8c58d5", P = { tooltip: j }, H = R.forwardRef(function({
-  children: o,
-  className: r,
-  verticalAnchor: n = "top",
-  verticalOrigin: c = "bottom",
-  horizontalAnchor: l = "center",
-  horizontalOrigin: s = "center",
-  precision: m = "low",
-  // TODO: Fix caret styles and set to high
-  label: p,
-  ...i
+import { HStack as j } from "../../stacks/h_stack.js";
+import '../../tooltip.css';const w = "_tooltip_b8c58d5", y = { tooltip: w }, F = x.forwardRef(function({
+  children: t,
+  className: n,
+  verticalAnchor: c = "top",
+  verticalOrigin: s = "bottom",
+  horizontalAnchor: i = "center",
+  horizontalOrigin: p = "center",
+  precision: l = "high",
+  label: o,
+  ...m
 }, a) {
-  const t = _(null), f = h(o) ? w(o, { ref: t }) : /* @__PURE__ */ e(b, { as: "span", ref: t, children: o });
-  return /* @__PURE__ */ u(d, { children: [
+  const e = R(null), f = _(t) ? g(t, { ref: e }) : /* @__PURE__ */ r(j, { as: "span", ref: e, children: t });
+  return /* @__PURE__ */ h(u, { children: [
     f,
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ r(
       E,
       {
         ref: a,
-        anchorElement: t,
-        verticalAnchor: n,
-        verticalOrigin: c,
-        horizontalAnchor: l,
-        horizontalOrigin: s,
-        precision: m,
-        className: x(r, P.tooltip, "tcn-surface", "tcn-tooltip"),
-        ...i,
-        children: p
+        anchorElement: e,
+        verticalAnchor: c,
+        verticalOrigin: s,
+        horizontalAnchor: i,
+        horizontalOrigin: p,
+        precision: l,
+        className: d(n, y.tooltip, "tcn-surface", "tcn-tooltip"),
+        ...m,
+        children: typeof o == "string" ? /* @__PURE__ */ r("span", { className: "tcn-tooltip-label", children: o }) : o
       }
     )
   ] });
 });
 export {
-  H as Tooltip
+  F as Tooltip
 };
 //# sourceMappingURL=tooltip.js.map

package/dist/surfaces/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../src/surfaces/tooltip/tooltip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { isValidElement, cloneElement, useRef } from 'react';\nimport styles from './tooltip.module.css';\nimport {\n  PreviewPopper,\n  type PreviewPopperProps,\n} from '../../overlay/popper/preview_popper.js';\nimport { HStack } from '../../stacks/h_stack.js';\n\nexport interface TooltipProps extends Omit<PreviewPopperProps, 'anchorElement'> {\n  /** The element that triggers the tooltip on hover */\n  children: React.ReactNode;\n  /** Content to display in the tooltip */\n  label: React.ReactNode;\n}\n\nexport const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n  {\n    children,\n    className,\n    verticalAnchor = 'top',\n    verticalOrigin = 'bottom',\n    horizontalAnchor = 'center',\n    horizontalOrigin = 'center',\n    precision = 'low', // TODO: Fix caret styles and set to high\n    label,\n    ...props\n  },\n  ref\n) {\n  const anchorRef = useRef<HTMLElement>(null);\n\n  // If children is a valid element, clone it and attach the ref\n  // Otherwise, wrap it in a span\n  const anchor = isValidElement(children) ? (\n    cloneElement(children, { ref: anchorRef } as React.Attributes)\n  ) : (\n    <HStack as=\"span\" ref={anchorRef}>\n      {children}\n    </HStack>\n  );\n\n  return (\n    <>\n      {anchor}\n      <PreviewPopper\n        ref={ref}\n        anchorElement={anchorRef}\n        verticalAnchor={verticalAnchor}\n        verticalOrigin={verticalOrigin}\n        horizontalAnchor={horizontalAnchor}\n        horizontalOrigin={horizontalOrigin}\n        precision={precision}\n        className={clsx(className, styles.tooltip, 'tcn-surface', 'tcn-tooltip')}\n        {...props}\n      >\n        {label}\n      </PreviewPopper>\n    </>\n  );\n});\n"],"names":["Tooltip","React","children","className","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","precision","label","props","ref","anchorRef","useRef","anchor","isValidElement","cloneElement","jsx","HStack","jsxs","Fragment","PreviewPopper","clsx","styles"],"mappings":";;;;;kDAgBaA,IAAUC,EAAM,WAAyC,SACpE;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,WAAAC,IAAY;AAAA;AAAA,EACZ,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAoB,IAAI,GAIpCC,IAASC,EAAeb,CAAQ,IACpCc,EAAad,GAAU,EAAE,KAAKU,EAAA,CAA+B,IAE7D,gBAAAK,EAACC,GAAA,EAAO,IAAG,QAAO,KAAKN,GACpB,UAAAV,GACH;AAGF,SACE,gBAAAiB,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAG;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,KAAAV;AAAA,QACA,eAAeC;AAAA,QACf,gBAAAR;AAAA,QACA,gBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,WAAAC;AAAA,QACA,WAAWc,EAAKnB,GAAWoB,EAAO,SAAS,eAAe,aAAa;AAAA,QACtE,GAAGb;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}
+{"version":3,"file":"tooltip.js","sources":["../../../src/surfaces/tooltip/tooltip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { isValidElement, cloneElement, useRef } from 'react';\nimport styles from './tooltip.module.css';\nimport {\n  PreviewPopper,\n  type PreviewPopperProps,\n} from '../../overlay/popper/preview_popper.js';\nimport { HStack } from '../../stacks/h_stack.js';\n\nexport interface TooltipProps extends Omit<PreviewPopperProps, 'anchorElement'> {\n  /** The element that triggers the tooltip on hover */\n  children: React.ReactNode;\n  /** Content to display in the tooltip */\n  label: React.ReactNode;\n}\n\nexport const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n  {\n    children,\n    className,\n    verticalAnchor = 'top',\n    verticalOrigin = 'bottom',\n    horizontalAnchor = 'center',\n    horizontalOrigin = 'center',\n    precision = 'high',\n    label,\n    ...props\n  },\n  ref\n) {\n  const anchorRef = useRef<HTMLElement>(null);\n\n  // If children is a valid element, clone it and attach the ref\n  // Otherwise, wrap it in a span\n  const anchor = isValidElement(children) ? (\n    cloneElement(children, { ref: anchorRef } as React.Attributes)\n  ) : (\n    <HStack as=\"span\" ref={anchorRef}>\n      {children}\n    </HStack>\n  );\n\n  return (\n    <>\n      {anchor}\n      <PreviewPopper\n        ref={ref}\n        anchorElement={anchorRef}\n        verticalAnchor={verticalAnchor}\n        verticalOrigin={verticalOrigin}\n        horizontalAnchor={horizontalAnchor}\n        horizontalOrigin={horizontalOrigin}\n        precision={precision}\n        className={clsx(className, styles.tooltip, 'tcn-surface', 'tcn-tooltip')}\n        {...props}\n      >\n        {typeof label === 'string' ? (\n          <span className=\"tcn-tooltip-label\">{label}</span>\n        ) : (\n          label\n        )}\n      </PreviewPopper>\n    </>\n  );\n});\n"],"names":["Tooltip","React","children","className","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","precision","label","props","ref","anchorRef","useRef","anchor","isValidElement","cloneElement","jsx","HStack","jsxs","Fragment","PreviewPopper","clsx","styles"],"mappings":";;;;;kDAgBaA,IAAUC,EAAM,WAAyC,SACpE;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAoB,IAAI,GAIpCC,IAASC,EAAeb,CAAQ,IACpCc,EAAad,GAAU,EAAE,KAAKU,EAAA,CAA+B,IAE7D,gBAAAK,EAACC,GAAA,EAAO,IAAG,QAAO,KAAKN,GACpB,UAAAV,GACH;AAGF,SACE,gBAAAiB,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAG;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,KAAAV;AAAA,QACA,eAAeC;AAAA,QACf,gBAAAR;AAAA,QACA,gBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,WAAAC;AAAA,QACA,WAAWc,EAAKnB,GAAWoB,EAAO,SAAS,eAAe,aAAa;AAAA,QACtE,GAAGb;AAAA,QAEH,UAAA,OAAOD,KAAU,WAChB,gBAAAQ,EAAC,UAAK,WAAU,qBAAqB,aAAM,IAE3CR;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ,CAAC;"}

package/dist/themes/themes/ergo/ergo_theme.css

@@ -1 +1 @@
-@layer tcn-theme{:root{--ergo-primary: #ce6b2b;--ergo-secondary: #669eb4;--ergo-secondary-light: #ecf4fb;--ergo-secondary-dark: #497485;--ergo-tertiary: #dfd7cd;--ergo-tertiary-light: #f9f4ed;--ergo-tertiary-dark: #7e6c5d;--ergo-white: #ffffff;--ergo-accent-blue: #395578;--ergo-accent-blue-light: #f3f4f6;--ergo-accent-green: #97bba3;--ergo-accent-green-light: #eef8ef;--ergo-accent-green-dark: #4f785c;--ergo-accent-yellow: #dbc97e;--ergo-accent-yellow-light: #fef9e7;--ergo-grey: #aaaaaa;--ergo-grey-light: #d3d3d3;--ergo-grey-dark: #808080;--ergo-status-red: #ff6565;--ergo-status-red-dark: #c24848;--ergo-status-yellow: #ffd439;--ergo-status-yellow-dark: #dbb735;--ergo-status-blue: var(--ergo-secondary);--ergo-status-blue-dark: var(--ergo-secondary-dark);--ergo-status-green: #3fbc6a;--ergo-status-green-dark: #2d904f;--ergo-ink-primary: var(--ergo-accent-blue);--ergo-ink-inverse: var(--ergo-white);--scalar: 1;--accent-color: var(--ergo-primary);--font-color: var(--ergo-ink-primary);--font-family: "Lato", sans-serif;--font-size: 12px;--gap-small: 4px;--gap-medium: 8px;--gap-large: 16px;--padding-small: 4px;--padding-medium: 8px;--padding-large: 16px;--bar-xs: 16px;--bar-sm: 24px;--bar-md: 32px;--bar-lg: 40px;--bar-xl: 48px;--action-sm: 20px;--action-md: 24px;--action-lg: 32px;--status-color-disabled: var(--ergo-grey-light);--status-color-info: var(--ergo-status-blue);--status-color-warning: var(--ergo-status-yellow);--status-color-positive: var(--ergo-status-green);--status-color-error: var(--ergo-status-red);--async-color-initial: var(--ergo-grey);--async-color-pending: var(--ergo-status-blue);--async-color-success: var(--ergo-status-green);--async-color-failed: var(--ergo-status-red);--action-severity-dangerous: var(--ergo-status-red);--action-severity-cautious: var(--ergo-status-yellow);--action-severity-neutral: var(--ergo-primary);--action-severity-suggested: var(--ergo-status-blue);--action-severity-encouraged: var(--ergo-status-green);--shape-radius-small: 2px;--shape-radius-medium: 4px;--shape-radius-large: 8px;--primary-color-faint: #c0c0c0;--primary-color: #008cff;--primary-color-strong: #008cff;--secondary-color-faint: #c0c0c0;--secondary-color: #008cff;--secondary-color-strong: #008cff;--tertiary-color-faint: #c0c0c0;--tertiary-color: #008cff;--tertiary-color-strong: #008cff;--quaternary-color-faint: #c0c0c0;--quaternary-color: #008cff;--quaternary-color-strong: #008cff;--background-color-primary: #ffffff;--background-color-secondary: #ffffff;--background-color-tertiary: #ffffff;--background-color-quaternary: #ffffff;--foreground-color-primary: #aaa;--foreground-color-secondary: #222222;--foreground-color-tertiary: #222222;--foreground-color-quaternary: #222222;--material-disabled: var(--ergo-grey-light);--on-material-disabled: var(--ergo-ink-inverse);--ink-disabled: var(--ergo-grey-light);--material-line: var(--ergo-grey);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-theme-root{font-family:var(--font-family);color:var(--font-color);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-interactive{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .1s,background .1s,color .1s;--ink: var(--on-material);--act: var(--action);--mat: var(--material);--act-down: color-mix(in srgb, var(--mat), black 12%);--act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);--act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);--act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);background:var(--mat);color:var(--ink);transition:background .1s,color .1s}.tcn-interactive:focus-visible,.tcn-interactive[data-focus-visible]{background:var(--act-focus);outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-interactive:hover,.tcn-interactive[data-hover]{background:var(--act-raised)}.tcn-interactive:active,.tcn-interactive[data-active]{background:var(--act-down)}.tcn-interactive[data-is-disabled=true]{pointer-events:none}.tcn-base-button{--btn-size-base: 26px;--btn-pad-base: 12px;--btn-pad-delta: 4px;--btn-size-delta: 4px;--btn-font-size-delta: 2px;--btn-step: 1;--btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));--btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));border-radius:var(--shape-radius-medium);min-height:var(--btn-size);padding:var(--padding-small) var(--btn-pad)}.tcn-base-button[data-size=sm]{--btn-step: -1}.tcn-base-button[data-size=md]{--btn-step: 0}.tcn-base-button[data-size=lg]{--btn-step: 1}.tcn-base-button[data-is-utility=true]{height:auto;width:auto;min-width:var(--btn-size);padding:0;--util-ratio: .75;--btn-size-base: 18px;font-size:calc(var(--font-size) + var(--btn-font-size-delta) * var(--btn-step))}.tcn-base-button[data-is-utility=true] .tcn-icon{min-height:min(2px,calc(var(--btn-size) * var(--util-ratio)));min-width:min(2px,calc(var(--btn-size) * var(--util-ratio)))}.tcn-button{--btn-primary: var(--action);--btn-on-primary: var(--on-action);--btn-variant: var(--on-material);transition:box-shadow .1s,transform .1s}.tcn-button[data-severity=dangerous]{--btn-primary: var(--action-severity-dangerous);--btn-variant: var(--ergo-status-red-dark)}.tcn-button[data-severity=cautious]{--btn-primary: var(--action-severity-cautious);--btn-on-primary: var(--ergo-accent-blue);--btn-variant: var(--ergo-status-yellow-dark)}.tcn-button[data-severity=suggested]{--btn-primary: var(--action-severity-suggested);--btn-variant: var(--ergo-status-blue-dark)}.tcn-button[data-severity=encouraged]{--btn-primary: var(--action-severity-encouraged);--btn-variant: var(--ergo-status-green-dark)}.tcn-button[data-hierarchy=primary]{--act: var(--ergo-white);--ink: var(--tcn-button-text-color, var(--btn-on-primary));--mat: var(--tcn-button-color, var(--btn-primary))}.tcn-button[data-hierarchy=primary][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary]{--act: var(--tcn-button-color, var(--btn-variant));--ink: var(--tcn-button-color, var(--btn-variant))}:is(.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary])[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-button[data-hierarchy=tertiary]:hover{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:1px;text-underline-offset:4px}.tcn-button[data-hierarchy=tertiary]{border:1px solid transparent}.tcn-button[data-hierarchy=secondary]{border:1px solid var(--ink)}.tcn-button[data-hierarchy=primary]{border:1px solid var(--mat)}.tcn-button:hover,.tcn-button[data-hover]{transform:translateY(-1px);box-shadow:0 4px 4px #0000001f}:is(.tcn-button:hover,.tcn-button[data-hover]) :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-button-group .tcn-button-group-button:hover,.tcn-button-group .tcn-button-group-button:active{transform:none}.tcn-button-group .tcn-button-group-button{border-radius:0}.tcn-button-group .tcn-button-group-button:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]{border:0}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:last-child){border-right:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:first-child){border-left:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:last-child){border-right:1px solid var(--act-down)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:first-child){border-left:1px solid var(--act-down)}.tcn-select-group .tcn-select-group-option:hover,.tcn-select-group .tcn-select-group-option:active{transform:none}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]{color:var(--act);border-color:var(--act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:hover{background:var(--act-faint)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:active{background:var(--act-down);color:var(--on-act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary][data-is-disabled=true]{color:var(--material-disabled);border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option[data-hierarchy=primary][data-is-disabled=true]{background:var(--material-disabled);color:#fff;border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option{border-radius:0}.tcn-select-group .tcn-select-group-option:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-select-group .tcn-select-group-option:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-tabs-bar .tcn-tabs-list .tcn-tab-item{min-height:24px;padding:0px var(--padding-medium);text-decoration:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item{box-sizing:border-box;border:none;padding:0px var(--padding-medium);border-radius:0}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=true]{--mat: var(--tcn-button-color, var(--material));--ink: var(--tcn-button-text-color, var(--ergo-primary));--act: var(--ergo-primary)}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item:focus-visible{z-index:2}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:hover:after,.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:focus-visible:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ergo-accent-blue);pointer-events:none;width:100%;z-index:3}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list:after{content:"";position:absolute;bottom:-1px;left:0;min-height:2px;transform:translate(var(--tabs-active-rectangle-position-x, 0));width:var(--tabs-active-rectangle-width, 0);background:var(--ergo-primary);pointer-events:none;border-bottom-left-radius:2px;border-bottom-right-radius:2px;transition:transform .3s ease-in-out,width .3s ease-in-out;will-change:transform,width;z-index:2}.tcn-tabs-bar[data-variant=default]:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--material-line);pointer-events:none;z-index:1}.tcn-tabs-bar[data-variant=inline]{min-width:min-content;width:auto;flex-grow:0;border-radius:var(--shape-radius-medium);border:1px solid var(--on-material)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list{gap:var(--gap-small);padding:var(--padding-small)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list .tcn-tab-item{border-radius:var(--shape-radius-medium)}.material{background-color:var(--material);color:var(--on-material)}.tcn-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-tooltip{background:#395578d9;box-shadow:0 4px 7px #414141a8;color:#fff;border-radius:var(--shape-radius-medium);padding:var(--padding-medium)}.tcn-list{gap:var(--gap-medium)}.tcn-list .tcn-item{height:24px;padding:0px var(--padding-medium);border-radius:var(--shape-radius-medium)}.tcn-utility-strip{min-width:var(--bar-md)}.tcn-utility-strip,.tcn-side{padding-block:var(--padding-medium);gap:var(--gap-medium)}.tcn-rail :where(.tcn-body){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(--bar-md)}.tcn-footer,.tcn-header{min-height:var(--bar-lg)}.tcn-scaffold{--scaffold-divide-footer: var(--divide-footer, 1);--scaffold-divide-header: var(--divide-header, 1);--pad-inline: var(--padding-large)}.tcn-scaffold :where(.tcn-header)+:where(.tcn-body),.tcn-scaffold :where(.tcn-utility-bar)+:where(.tcn-body){border-top:calc(var(--scaffold-divide-header) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-body)+:where(.tcn-footer){border-top:calc(var(--scaffold-divide-footer) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-body){gap:var(--gap-medium)}.tcn-frame-veil[data-is-veil=true]{background-color:#00000080}.tcn-modal{--divide-header: 0;box-shadow:0 4px 34px #00000096}.tcn-modal :where(.tcn-scaffold){border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:1px solid var(--foreground-color-primary)}.tcn-modal :where(.tcn-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-modal :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-window{box-shadow:0 4px 34px #00000096;--divide-header: 0}.tcn-window :where(.tcn-scaffold){border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:2px solid white}.tcn-window :where(.tcn-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-window :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-pop-confirm{--divide-header: 0}.tcn-pop-confirm :where(.tcn-scaffold){--pad-inline: var(--padding-medium);box-shadow:0 4px 8px #0006;border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden}.tcn-pop-confirm :where(.tcn-header){min-height:var(--bar-md);--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-pop-confirm :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-confirm{background-color:var(--background-color-primary)}.tcn-panel{background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);overflow:hidden}.tcn-card{--divide-header: 0;background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);border:1px solid var(--foreground-color-primary);overflow:hidden}.tcn-card :where(.tcn-header){min-height:var(--bar-md);--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-secondary);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-card :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-card :where(.tcn-utility-bar){min-height:var(--bar-sm)}.tcn-section{--max-section-depth: 4;--section-tab-width: 4px;--section-tab-start: var(--pad-inline, var(--padding-medium));--section-tab-depth: 0;--section-tab: calc( var(--section-tab-start) + (var(--section-tab-width) * var(--section-tab-depth)) );--section-action: var(--ergo-secondary);--section-mat: var(--ergo-secondary-light);--section-on-mat: var(--ergo-ink-primary)}.tcn-heading{background-color:#f1f1f1;padding-inline-start:8px;height:30px;z-index:5}.tcn-section>.tcn-heading{z-index:calc(var(--max-section-depth) - var(--section-tab-depth));padding-inline-start:var(--section-tab);--material: var(--section-mat);--on-material: var(--section-on-mat);--action: var(--section-action);background-color:var(--material);color:var(--on-material);gap:var(--gap-small)}.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:var(--section-tab)}.tcn-section>.tcn-section{--section-tab-depth: 1;--section-mat: var(--ergo-accent-blue-light);--section-action: var(--ergo-accent-blue)}.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 2;--section-mat: var(--ergo-accent-green-light);--section-action: var(--ergo-accent-green-dark)}.tcn-section>.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 3;--section-mat: var(--ergo-tertiary-light);--section-action: var(--ergo-tertiary-dark)}.tcn-caret{--caret-size: 12px;--caret-triangle-height: calc(var(--caret-size) / 2);--caret-triangle-width: var(--caret-size);--caret-triangle-base: var(--caret-triangle-height) solid transparent;--caret-triangle-peak: var(--caret-triangle-width) solid var(--material);width:0;height:0;flex-grow:0;display:inline-block}.tcn-caret[data-direction=top]{border-bottom:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=bottom]{border-top:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=start]{border-right:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}.tcn-caret[data-direction=end]{border-left:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}.tcn-table{--table-pad-inline: var(--pad-inline, var(--padding-medium));--material: var(--ergo-white);--on-material: var(--ergo-ink-primary);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material);border-collapse:separate;display:block}:is(.tcn-table[data-is-sticky=true] .tcn-tbody,.tcn-table[data-is-sticky=true] .tcn-thead) th:first-of-type{border-right:1px solid color-mix(in srgb,var(--material) 80%,black)}:is(.tcn-table[data-is-sticky=true] .tcn-tbody,.tcn-table[data-is-sticky=true] .tcn-thead) th:last-of-type{border-left:1px solid color-mix(in srgb,var(--material) 80%,black)}.tcn-td{text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tcn-thead .tcn-tr{height:var(--bar-md)}.tcn-thead .tcn-tr .tcn-th{border-bottom:1px solid var(--ergo-grey-light)}.tcn-thead .tcn-tr .tcn-th:not(:last-of-type):not(:nth-last-of-type(2)){border-right:1px solid var(--ergo-grey)}.tcn-thead .tcn-tr .tcn-th:last-of-type{border-left:1px solid var(--ergo-grey)}.tcn-tfoot{font-weight:700}.tcn-tfoot .tcn-tr{height:var(--bar-sm)}.tcn-tfoot .tcn-tr .tcn-th,.tcn-tfoot .tcn-tr .tcn-td{border-top:1px solid var(--ergo-grey-light)}.tcn-thead,.tcn-tfoot{font-size:14px;--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-secondary);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-tr{height:var(--bar-sm);align-content:center}.tcn-td,.tcn-th{padding-inline:var(--padding-medium);vertical-align:middle;text-align:start;background:var(--material)}.tcn-table .tcn-tr>.tcn-th:first-child,.tcn-table .tcn-tr>.tcn-td:first-child{padding-inline-start:var(--table-pad-inline)}.tcn-table .tcn-tr>.tcn-th:last-child,.tcn-table .tcn-tr>.tcn-td:last-child{padding-inline-end:var(--table-pad-inline)}.tcn-tbody{font-size:12px}.tcn-tbody .tcn-tr:nth-of-type(2n){--material: var(--ergo-accent-blue-light)}.tcn-tbody .tcn-tr:nth-of-type(odd){--material: var(--ergo-white)}.tcn-tbody .tcn-tr:hover{--material: color-mix(in srgb, var(--ergo-accent-blue-light), var(--action) 12%)}.tcn-tbody .tcn-tr[data-is-selected=true]{--material: var(--ergo-secondary);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-accent-blue)}.tcn-tbody .tcn-tr{--material: var(--bg-row);--on-material: var(--ergo-accent-blue);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-control{--act: var(--action);--mat: var(--material);--act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);font-size:12px;border:1px solid var(--ergo-grey);box-sizing:border-box;min-height:var(--action-md);border-radius:var(--shape-radius-medium);padding-inline:4px}.tcn-control[data-is-disabled=false]:hover{background:var(--act-raised)}.tcn-control:focus-visible{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(--material-disabled);color:var(--on-material-disabled)}.tcn-control[data-is-disabled=true]::placeholder{color:var(--on-material-disabled)}.tcn-input{height:auto}.tcn-textarea,.tcn-input{cursor:text}.tcn-input-group{border-radius:var(--shape-radius-medium)}.tcn-input-group:focus-within{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-input-group .tcn-input-group-slot{z-index:1;border-radius:0;height:auto;min-height:var(--action-md);padding-block:0}.tcn-input-group .tcn-input-group-slot:focus,.tcn-input-group .tcn-input-group-slot:focus-visible{z-index:3;outline:none}.tcn-input-group .tcn-input-group-slot:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-input-group .tcn-input-group-slot:not(:last-child){margin-right:-1px}.tcn-input-group .tcn-input-group-slot:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-input-group .tcn-select,.tcn-input-group .tcn-button,.tcn-input-group .tcn-button[data-hierarchy]{border:1px solid var(--ergo-grey);height:auto;min-height:var(--action-md);min-width:var(--action-md);box-sizing:border-box}:is(.tcn-input-group .tcn-select,.tcn-input-group .tcn-button,.tcn-input-group .tcn-button[data-hierarchy]):hover,:is(.tcn-input-group .tcn-select,.tcn-input-group .tcn-button,.tcn-input-group .tcn-button[data-hierarchy])[data-hover]{transform:none}.tcn-input-group .tcn-select:focus-visible,.tcn-input-group .tcn-button:focus-visible,.tcn-input-group .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{border-color:var(--ergo-primary)}.tcn-checkbox:focus-visible,.tcn-checkbox:focus{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-checkbox[data-is-disabled=true]{cursor:not-allowed;border-color:var(--material-disabled)}.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-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-checkbox,.tcn-switch-wrapper,.tcn-date-picker,.tcn-date-picker-year-selector,.tcn-radio{--accent-color: var(--ergo-primary)}}
+@layer tcn-theme{:root{--ergo-primary: #ce6b2b;--ergo-secondary: #669eb4;--ergo-secondary-light: #ecf4fb;--ergo-secondary-dark: #497485;--ergo-tertiary: #dfd7cd;--ergo-tertiary-light: #f9f4ed;--ergo-tertiary-dark: #7e6c5d;--ergo-white: #ffffff;--ergo-accent-blue: #395578;--ergo-accent-blue-light: #f3f4f6;--ergo-accent-green: #97bba3;--ergo-accent-green-light: #eef8ef;--ergo-accent-green-dark: #4f785c;--ergo-accent-yellow: #dbc97e;--ergo-accent-yellow-light: #fef9e7;--ergo-grey: #aaaaaa;--ergo-grey-light: #d3d3d3;--ergo-grey-dark: #808080;--ergo-status-red: #ff6565;--ergo-status-red-dark: #c24848;--ergo-status-yellow: #ffd439;--ergo-status-yellow-dark: #dbb735;--ergo-status-blue: var(--ergo-secondary);--ergo-status-blue-dark: var(--ergo-secondary-dark);--ergo-status-green: #3fbc6a;--ergo-status-green-dark: #2d904f;--ergo-ink-primary: var(--ergo-accent-blue);--ergo-ink-inverse: var(--ergo-white);--scalar: 1;--accent-color: var(--ergo-primary);--font-color: var(--ergo-ink-primary);--font-family: "Lato", sans-serif;--font-size: 12px;--gap-small: 4px;--gap-medium: 8px;--gap-large: 16px;--padding-small: 4px;--padding-medium: 8px;--padding-large: 16px;--bar-xs: 16px;--bar-sm: 24px;--bar-md: 32px;--bar-lg: 40px;--bar-xl: 48px;--action-sm: 20px;--action-md: 24px;--action-lg: 32px;--status-color-disabled: var(--ergo-grey-light);--status-color-info: var(--ergo-status-blue);--status-color-warning: var(--ergo-status-yellow);--status-color-positive: var(--ergo-status-green);--status-color-error: var(--ergo-status-red);--async-color-initial: var(--ergo-grey);--async-color-pending: var(--ergo-status-blue);--async-color-success: var(--ergo-status-green);--async-color-failed: var(--ergo-status-red);--action-severity-dangerous: var(--ergo-status-red);--action-severity-cautious: var(--ergo-status-yellow);--action-severity-neutral: var(--ergo-primary);--action-severity-suggested: var(--ergo-status-blue);--action-severity-encouraged: var(--ergo-status-green);--shape-radius-small: 2px;--shape-radius-medium: 4px;--shape-radius-large: 8px;--shape-triangle-medium: 12px;--primary-color-faint: #c0c0c0;--primary-color: #008cff;--primary-color-strong: #008cff;--secondary-color-faint: #c0c0c0;--secondary-color: #008cff;--secondary-color-strong: #008cff;--tertiary-color-faint: #c0c0c0;--tertiary-color: #008cff;--tertiary-color-strong: #008cff;--quaternary-color-faint: #c0c0c0;--quaternary-color: #008cff;--quaternary-color-strong: #008cff;--background-color-primary: #ffffff;--background-color-secondary: #ffffff;--background-color-tertiary: #ffffff;--background-color-quaternary: #ffffff;--foreground-color-primary: #aaa;--foreground-color-secondary: #222222;--foreground-color-tertiary: #222222;--foreground-color-quaternary: #222222;--material-disabled: var(--ergo-grey-light);--on-material-disabled: var(--ergo-ink-inverse);--ink-disabled: var(--ergo-grey-light);--material-line: var(--ergo-grey);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-theme-root{font-family:var(--font-family);color:var(--font-color);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-interactive{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .1s,background .1s,color .1s;--ink: var(--on-material);--act: var(--action);--mat: var(--material);--act-down: color-mix(in srgb, var(--mat), black 12%);--act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);--act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);--act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);background:var(--mat);color:var(--ink);transition:background .1s,color .1s}.tcn-interactive:focus-visible,.tcn-interactive[data-focus-visible]{background:var(--act-focus);outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-interactive:hover,.tcn-interactive[data-hover]{background:var(--act-raised)}.tcn-interactive:active,.tcn-interactive[data-active]{background:var(--act-down)}.tcn-interactive[data-is-disabled=true]{pointer-events:none}.tcn-base-button{--btn-size-base: 26px;--btn-pad-base: 12px;--btn-pad-delta: 4px;--btn-size-delta: 4px;--btn-font-size-delta: 2px;--btn-step: 1;--btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));--btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));border-radius:var(--shape-radius-medium);min-height:var(--btn-size);padding:var(--padding-small) var(--btn-pad)}.tcn-base-button[data-size=sm]{--btn-step: -1}.tcn-base-button[data-size=md]{--btn-step: 0}.tcn-base-button[data-size=lg]{--btn-step: 1}.tcn-base-button[data-is-utility=true]{height:auto;width:auto;min-width:var(--btn-size);padding:0;--util-ratio: .75;--btn-size-base: 18px;font-size:calc(var(--font-size) + var(--btn-font-size-delta) * var(--btn-step))}.tcn-base-button[data-is-utility=true] .tcn-icon{min-height:min(2px,calc(var(--btn-size) * var(--util-ratio)));min-width:min(2px,calc(var(--btn-size) * var(--util-ratio)))}.tcn-button{--btn-primary: var(--action);--btn-on-primary: var(--on-action);--btn-variant: var(--on-material);transition:box-shadow .1s,transform .1s}.tcn-button[data-severity=dangerous]{--btn-primary: var(--action-severity-dangerous);--btn-variant: var(--ergo-status-red-dark)}.tcn-button[data-severity=cautious]{--btn-primary: var(--action-severity-cautious);--btn-on-primary: var(--ergo-accent-blue);--btn-variant: var(--ergo-status-yellow-dark)}.tcn-button[data-severity=suggested]{--btn-primary: var(--action-severity-suggested);--btn-variant: var(--ergo-status-blue-dark)}.tcn-button[data-severity=encouraged]{--btn-primary: var(--action-severity-encouraged);--btn-variant: var(--ergo-status-green-dark)}.tcn-button[data-hierarchy=primary]{--act: var(--ergo-white);--ink: var(--tcn-button-text-color, var(--btn-on-primary));--mat: var(--tcn-button-color, var(--btn-primary))}.tcn-button[data-hierarchy=primary][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary]{--act: var(--tcn-button-color, var(--btn-variant));--ink: var(--tcn-button-color, var(--btn-variant))}:is(.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary])[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-button[data-hierarchy=tertiary]:hover{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:1px;text-underline-offset:4px}.tcn-button[data-hierarchy=tertiary]{border:1px solid transparent}.tcn-button[data-hierarchy=secondary]{border:1px solid var(--ink)}.tcn-button[data-hierarchy=primary]{border:1px solid var(--mat)}.tcn-button:hover,.tcn-button[data-hover]{transform:translateY(-1px);box-shadow:0 4px 4px #0000001f}:is(.tcn-button:hover,.tcn-button[data-hover]) :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-button-group .tcn-button-group-button:hover,.tcn-button-group .tcn-button-group-button:active{transform:none}.tcn-button-group .tcn-button-group-button{border-radius:0}.tcn-button-group .tcn-button-group-button:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]{border:0}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:last-child){border-right:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:first-child){border-left:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:last-child){border-right:1px solid var(--act-down)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:first-child){border-left:1px solid var(--act-down)}.tcn-select-group .tcn-select-group-option:hover,.tcn-select-group .tcn-select-group-option:active{transform:none}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]{color:var(--act);border-color:var(--act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:hover{background:var(--act-faint)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:active{background:var(--act-down);color:var(--on-act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary][data-is-disabled=true]{color:var(--material-disabled);border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option[data-hierarchy=primary][data-is-disabled=true]{background:var(--material-disabled);color:#fff;border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option{border-radius:0}.tcn-select-group .tcn-select-group-option:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-select-group .tcn-select-group-option:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-tabs-bar .tcn-tabs-list .tcn-tab-item{min-height:24px;padding:0px var(--padding-medium);text-decoration:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item{box-sizing:border-box;border:none;padding:0px var(--padding-medium);border-radius:0}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=true]{--mat: var(--tcn-button-color, var(--material));--ink: var(--tcn-button-text-color, var(--ergo-primary));--act: var(--ergo-primary)}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item:focus-visible{z-index:2}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:hover:after,.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:focus-visible:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ergo-accent-blue);pointer-events:none;width:100%;z-index:3}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list:after{content:"";position:absolute;bottom:-1px;left:0;min-height:2px;transform:translate(var(--tabs-active-rectangle-position-x, 0));width:var(--tabs-active-rectangle-width, 0);background:var(--ergo-primary);pointer-events:none;border-bottom-left-radius:2px;border-bottom-right-radius:2px;transition:transform .3s ease-in-out,width .3s ease-in-out;will-change:transform,width;z-index:2}.tcn-tabs-bar[data-variant=default]:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--material-line);pointer-events:none;z-index:1}.tcn-tabs-bar[data-variant=inline]{min-width:min-content;width:auto;flex-grow:0;border-radius:var(--shape-radius-medium);border:1px solid var(--on-material)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list{gap:var(--gap-small);padding:var(--padding-small)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list .tcn-tab-item{border-radius:var(--shape-radius-medium)}.material{background-color:var(--material);color:var(--on-material)}.tcn-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(--shape-triangle-medium)}.tcn-tethered[data-anchor-direction=top]{padding-top:var(--shape-triangle-medium)}.tcn-tethered[data-anchor-direction=start]{padding-left:var(--shape-triangle-medium)}.tcn-tethered[data-anchor-direction=end]{padding-right:var(--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(--shape-radius-medium);padding:var(--padding-medium)}.tcn-list{gap:var(--gap-medium)}.tcn-list .tcn-item{height:24px;padding:0px var(--padding-medium);border-radius:var(--shape-radius-medium)}.tcn-utility-strip{min-width:var(--bar-md)}.tcn-utility-strip,.tcn-side{padding-block:var(--padding-medium);gap:var(--gap-medium)}.tcn-rail :where(.tcn-body){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(--bar-md)}.tcn-footer,.tcn-header{min-height:var(--bar-lg)}.tcn-scaffold{--scaffold-divide-footer: var(--divide-footer, 1);--scaffold-divide-header: var(--divide-header, 1);--pad-inline: var(--padding-large)}.tcn-scaffold :where(.tcn-header)+:where(.tcn-body),.tcn-scaffold :where(.tcn-utility-bar)+:where(.tcn-body){border-top:calc(var(--scaffold-divide-header) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-body)+:where(.tcn-footer){border-top:calc(var(--scaffold-divide-footer) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-body){gap:var(--gap-medium)}.tcn-frame-veil[data-is-veil=true]{background-color:#00000080}.tcn-modal{--divide-header: 0;box-shadow:0 4px 34px #00000096}.tcn-modal :where(.tcn-scaffold){border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:1px solid var(--foreground-color-primary)}.tcn-modal :where(.tcn-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-modal :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-window{box-shadow:0 4px 34px #00000096;--divide-header: 0}.tcn-window :where(.tcn-scaffold){border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:2px solid white}.tcn-window :where(.tcn-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-window :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-pop-confirm{--divide-header: 0;--tether-pad-size: 16px}.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-secondary-dark)}.tcn-pop-confirm :where(.tcn-scaffold){--pad-inline: var(--padding-medium);box-shadow:0 4px 8px #0006;border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden}.tcn-pop-confirm :where(.tcn-header){min-height:var(--bar-md);--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-pop-confirm :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-confirm{background-color:var(--background-color-primary)}.tcn-panel{background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);overflow:hidden}.tcn-card{--divide-header: 0;background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);border:1px solid var(--foreground-color-primary);overflow:hidden}.tcn-card :where(.tcn-header){min-height:var(--bar-md);--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-secondary);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-card :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-card :where(.tcn-utility-bar){min-height:var(--bar-sm)}.tcn-section{--max-section-depth: 4;--section-tab-width: 4px;--section-tab-start: var(--pad-inline, var(--padding-medium));--section-tab-depth: 0;--section-tab: calc( var(--section-tab-start) + (var(--section-tab-width) * var(--section-tab-depth)) );--section-action: var(--ergo-secondary);--section-mat: var(--ergo-secondary-light);--section-on-mat: var(--ergo-ink-primary)}.tcn-heading{background-color:#f1f1f1;padding-inline-start:8px;height:30px;z-index:5}.tcn-section>.tcn-heading{z-index:calc(var(--max-section-depth) - var(--section-tab-depth));padding-inline-start:var(--section-tab);--material: var(--section-mat);--on-material: var(--section-on-mat);--action: var(--section-action);background-color:var(--material);color:var(--on-material);gap:var(--gap-small)}.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:var(--section-tab)}.tcn-section>.tcn-section{--section-tab-depth: 1;--section-mat: var(--ergo-accent-blue-light);--section-action: var(--ergo-accent-blue)}.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 2;--section-mat: var(--ergo-accent-green-light);--section-action: var(--ergo-accent-green-dark)}.tcn-section>.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 3;--section-mat: var(--ergo-tertiary-light);--section-action: var(--ergo-tertiary-dark)}.tcn-caret{--caret-size: var(--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-ink-primary);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material);border-collapse:separate;display:block}:is(.tcn-table[data-is-sticky=true] .tcn-tbody,.tcn-table[data-is-sticky=true] .tcn-thead) th:first-of-type{border-right:1px solid color-mix(in srgb,var(--material) 80%,black)}:is(.tcn-table[data-is-sticky=true] .tcn-tbody,.tcn-table[data-is-sticky=true] .tcn-thead) th:last-of-type{border-left:1px solid color-mix(in srgb,var(--material) 80%,black)}.tcn-td{text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tcn-thead .tcn-tr{height:var(--bar-md)}.tcn-thead .tcn-tr .tcn-th{border-bottom:1px solid var(--ergo-grey-light)}.tcn-thead .tcn-tr .tcn-th:not(:last-of-type):not(:nth-last-of-type(2)){border-right:1px solid var(--ergo-grey)}.tcn-thead .tcn-tr .tcn-th:last-of-type{border-left:1px solid var(--ergo-grey)}.tcn-tfoot{font-weight:700}.tcn-tfoot .tcn-tr{height:var(--bar-sm)}.tcn-tfoot .tcn-tr .tcn-th,.tcn-tfoot .tcn-tr .tcn-td{border-top:1px solid var(--ergo-grey-light)}.tcn-thead,.tcn-tfoot{font-size:14px;--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-secondary);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-tr{height:var(--bar-sm);align-content:center}.tcn-td,.tcn-th{padding-inline:var(--padding-medium);vertical-align:middle;text-align:start;background:var(--material)}.tcn-table .tcn-tr>.tcn-th:first-child,.tcn-table .tcn-tr>.tcn-td:first-child{padding-inline-start:var(--table-pad-inline)}.tcn-table .tcn-tr>.tcn-th:last-child,.tcn-table .tcn-tr>.tcn-td:last-child{padding-inline-end:var(--table-pad-inline)}.tcn-tbody{font-size:12px}.tcn-tbody .tcn-tr:nth-of-type(2n){--material: var(--ergo-accent-blue-light)}.tcn-tbody .tcn-tr:nth-of-type(odd){--material: var(--ergo-white)}.tcn-tbody .tcn-tr:hover{--material: color-mix(in srgb, var(--ergo-accent-blue-light), var(--action) 12%)}.tcn-tbody .tcn-tr[data-is-selected=true]{--material: var(--ergo-secondary);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-accent-blue)}.tcn-tbody .tcn-tr{--material: var(--bg-row);--on-material: var(--ergo-accent-blue);--action: var(--ergo-accent-blue);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-control{--act: var(--action);--mat: var(--material);--act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);font-size:12px;border:1px solid var(--ergo-grey);box-sizing:border-box;min-height:var(--action-md);border-radius:var(--shape-radius-medium);padding-inline:4px}.tcn-control[data-is-disabled=false]:hover{background:var(--act-raised)}.tcn-control:focus-visible{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(--material-disabled);color:var(--on-material-disabled)}.tcn-control[data-is-disabled=true]::placeholder{color:var(--on-material-disabled)}.tcn-input{height:auto}.tcn-textarea,.tcn-input{cursor:text}.tcn-input-group{border-radius:var(--shape-radius-medium)}.tcn-input-group:focus-within{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-input-group .tcn-input-group-slot{z-index:1;border-radius:0;height:auto;min-height:var(--action-md);padding-block:0}.tcn-input-group .tcn-input-group-slot:focus,.tcn-input-group .tcn-input-group-slot:focus-visible{z-index:3;outline:none}.tcn-input-group .tcn-input-group-slot:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-input-group .tcn-input-group-slot:not(:last-child){margin-right:-1px}.tcn-input-group .tcn-input-group-slot:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-input-group .tcn-select,.tcn-input-group .tcn-button,.tcn-input-group .tcn-button[data-hierarchy]{border:1px solid var(--ergo-grey);height:auto;min-height:var(--action-md);min-width:var(--action-md);box-sizing:border-box}:is(.tcn-input-group .tcn-select,.tcn-input-group .tcn-button,.tcn-input-group .tcn-button[data-hierarchy]):hover,:is(.tcn-input-group .tcn-select,.tcn-input-group .tcn-button,.tcn-input-group .tcn-button[data-hierarchy])[data-hover]{transform:none}.tcn-input-group .tcn-select:focus-visible,.tcn-input-group .tcn-button:focus-visible,.tcn-input-group .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{border-color:var(--ergo-primary)}.tcn-checkbox:focus-visible,.tcn-checkbox:focus{outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-checkbox[data-is-disabled=true]{cursor:not-allowed;border-color:var(--material-disabled)}.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-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-checkbox,.tcn-switch-wrapper,.tcn-date-picker,.tcn-date-picker-year-selector,.tcn-radio{--accent-color: var(--ergo-primary)}}

package/dist/themes/themes/ergo/ergo_theme.js

@@ -90,6 +90,7 @@ const n = `@layer tcn-theme {
     --shape-radius-small: 2px;
     --shape-radius-medium: 4px;
     --shape-radius-large: 8px;
+    --shape-triangle-medium: 12px;
 
     /* Palette */
     --primary-color-faint: #c0c0c0;
@@ -608,12 +609,88 @@ const n = `@layer tcn-theme {
     border: inherit;
   }
 
+  .tcn-tethered {
+    /* Managing offset of the indicator in relation for the tethered element
+    pad defaults to 0, but should be set depending on the surface */
+
+    --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));
+
+    :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));
+    }
+
+    &[data-h-anchor="start"] {
+      --tether-pad-x: var(--tether-pad-pos);
+    }
+
+    &[data-h-anchor="end"] {
+      --tether-pad-x: var(--tether-pad-neg);
+    }
+
+    &[data-h-origin="start"] {
+      --indicator-pad-x: var(--tether-pad-pos);
+    }
+
+    &[data-h-origin="end"] {
+      --indicator-pad-x: var(--tether-pad-neg);
+    }
+
+    &[data-v-origin="center"] {
+      --indicator-pad-x: 0px;
+      --tether-pad-x: 0px;
+      &[data-v-anchor="top"] {
+        --tether-pad-y: var(--tether-pad-pos);
+      }
+
+      &[data-v-anchor="bottom"] {
+        --tether-pad-y: var(--tether-pad-neg);
+      }
+    }
+
+    &[data-anchor-direction="bottom"] {
+      padding-bottom: var(--shape-triangle-medium);
+    }
+
+    &[data-anchor-direction="top"] {
+      padding-top: var(--shape-triangle-medium);
+    }
+
+    &[data-anchor-direction="start"] {
+      padding-left: var(--shape-triangle-medium);
+    }
+
+    &[data-anchor-direction="end"] {
+      padding-right: var(--shape-triangle-medium);
+    }
+  }
+
   .tcn-tooltip {
-    background: rgba(57, 85, 120, 0.85);
-    box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);
-    color: rgba(255, 255, 255, 1);
-    border-radius: var(--shape-radius-medium);
-    padding: var(--padding-medium);
+    --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-label {
+      box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);
+      color: var(--on-material);
+      background: var(--material);
+      border-radius: var(--shape-radius-medium);
+      padding: var(--padding-medium);
+    }
   }
 
   .tcn-list {
@@ -739,6 +816,17 @@ const n = `@layer tcn-theme {
 
   .tcn-pop-confirm {
     --divide-header: 0;
+    --tether-pad-size: 16px;
+    :where(.tcn-tethered-origin-indicator) {
+      --material: var(--ergo-white);
+    }
+
+    /* Set the indicator to match the header color */
+    &[data-v-origin="top"] {
+      :where(.tcn-tethered-origin-indicator) {
+        --material: var(--ergo-secondary-dark);
+      }
+    }
 
     :where(.tcn-scaffold) {
       --pad-inline: var(--padding-medium);
@@ -861,14 +949,16 @@ const n = `@layer tcn-theme {
   }
 
   .tcn-caret {
-    --caret-size: 12px;
+    --caret-size: var(--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: 0;
-    height: 0;
+    width: var(--caret-size);
+    height: var(--caret-size);
+    min-width: var(--caret-size);
+    min-height: var(--caret-size);
     flex-grow: 0;
     display: inline-block;