@tcn/ui 0.6.0 → 0.8.0

package/dist/stacks/h_collapsible_box.js

@@ -1,21 +1,23 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as f } from "react/jsx-runtime";
 import t, { useLayoutEffect as p } from "react";
 import "../utils/click_away_listener.js";
 import "../utils/focus_redirect.js";
 import "../utils/scroll_away_listener.js";
 import { useForkRef as d } from "../utils/hooks/use_fork_ref.js";
 import "../utils/hooks/use_resize_observer.js";
+import "../utils/dnd/context.js";
 import { clsx as u } from "clsx";
+import "../draggable.module-BgelQsuJ.js";
 import { Box as R } from "./box/box.js";
 import { s as x } from "../collapsible_box.module-BiS98xXA.js";
 import { useIsCollapsed as z } from "./utils/use_is_collapsed.js";
-const j = t.forwardRef(function({ open: l = !1, defaultWidth: i = "400px", ...e }, a) {
-  const s = t.useRef(null), n = d(a, s), [c, r] = t.useState(!1);
+const H = t.forwardRef(function({ open: l = !1, defaultWidth: i = "400px", ...e }, a) {
+  const o = t.useRef(null), n = d(a, o), [c, r] = t.useState(!1);
   p(() => {
-    s.current?.style.setProperty("--collapsible-size", i);
+    o.current?.style.setProperty("--collapsible-size", i);
   }, [i]);
-  const f = z(l, s) && !l ? null : e.children;
-  return /* @__PURE__ */ m(
+  const m = z(l, o) && !l ? null : e.children;
+  return /* @__PURE__ */ f(
     R,
     {
       ref: n,
@@ -23,22 +25,22 @@ const j = t.forwardRef(function({ open: l = !1, defaultWidth: i = "400px", ...e
       "data-is-collapsed": !l,
       "data-collapse-orientation": "horizontal",
       "data-is-resizing": c,
-      onWidthResize: (o) => {
-        r(!0), e.onWidthResize?.(o);
+      onWidthResize: (s) => {
+        r(!0), e.onWidthResize?.(s);
       },
-      onWidthResizeEnd: (o) => {
-        r(!1), e.onWidthResizeEnd?.(o), s.current?.style.setProperty("--collapsible-size", `${o}px`);
+      onWidthResizeEnd: (s) => {
+        r(!1), e.onWidthResizeEnd?.(s), o.current?.style.setProperty("--collapsible-size", `${s}px`);
       },
       className: u(
         e.className,
         x["collapsible-box"],
         "tcn-h-collapsible-box"
       ),
-      children: f
+      children: m
     }
   );
 });
 export {
-  j as HCollapsibleBox
+  H as HCollapsibleBox
 };
 //# sourceMappingURL=h_collapsible_box.js.map

package/dist/stacks/h_collapsible_box.js.map

@@ -1 +1 @@
-{"version":3,"file":"h_collapsible_box.js","sources":["../../src/stacks/h_collapsible_box.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport { useForkRef } from '../utils/index.js';\nimport { clsx } from 'clsx';\nimport { Box, BoxProps } from './box/box.js';\nimport styles from './collapsible_box.module.css';\nimport { useIsCollapsed } from './utils/use_is_collapsed.js';\n\nexport interface HCollapsibleBoxProps extends BoxProps {\n  open?: boolean;\n  defaultWidth?: string;\n}\n\nexport const HCollapsibleBox = React.forwardRef(function CollapsibleBox(\n  { open = false, defaultWidth = '400px', ...props }: HCollapsibleBoxProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const collapsibleRef = React.useRef<HTMLDivElement | null>(null);\n  const forkRef = useForkRef(ref, collapsibleRef);\n  const [resizing, setIsResizing] = React.useState(false);\n\n  useLayoutEffect(() => {\n    collapsibleRef.current?.style.setProperty('--collapsible-size', defaultWidth);\n  }, [defaultWidth]);\n\n  const isCollapsed = useIsCollapsed(open, collapsibleRef);\n  const children = isCollapsed && !open ? null : props.children;\n\n  return (\n    <Box\n      ref={forkRef}\n      {...props}\n      data-is-collapsed={!open}\n      data-collapse-orientation=\"horizontal\"\n      data-is-resizing={resizing}\n      onWidthResize={width => {\n        setIsResizing(true);\n        props.onWidthResize?.(width);\n      }}\n      onWidthResizeEnd={width => {\n        setIsResizing(false);\n        props.onWidthResizeEnd?.(width);\n        collapsibleRef.current?.style.setProperty('--collapsible-size', `${width}px`);\n      }}\n      className={clsx(\n        props.className,\n        styles['collapsible-box'],\n        'tcn-h-collapsible-box'\n      )}\n      children={children}\n    />\n  );\n});\n"],"names":["HCollapsibleBox","React","open","defaultWidth","props","ref","collapsibleRef","forkRef","useForkRef","resizing","setIsResizing","useLayoutEffect","children","useIsCollapsed","jsx","Box","width","clsx","styles"],"mappings":";;;;;;;;;;;AAYO,MAAMA,IAAkBC,EAAM,WAAW,SAC9C,EAAE,MAAAC,IAAO,IAAO,cAAAC,IAAe,SAAS,GAAGC,EAAA,GAC3CC,GACA;AACA,QAAMC,IAAiBL,EAAM,OAA8B,IAAI,GACzDM,IAAUC,EAAWH,GAAKC,CAAc,GACxC,CAACG,GAAUC,CAAa,IAAIT,EAAM,SAAS,EAAK;AAEtD,EAAAU,EAAgB,MAAM;AACpB,IAAAL,EAAe,SAAS,MAAM,YAAY,sBAAsBH,CAAY;AAAA,EAC9E,GAAG,CAACA,CAAY,CAAC;AAGjB,QAAMS,IADcC,EAAeX,GAAMI,CAAc,KACvB,CAACJ,IAAO,OAAOE,EAAM;AAErD,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKR;AAAA,MACJ,GAAGH;AAAA,MACJ,qBAAmB,CAACF;AAAA,MACpB,6BAA0B;AAAA,MAC1B,oBAAkBO;AAAA,MAClB,eAAe,CAAAO,MAAS;AACtB,QAAAN,EAAc,EAAI,GAClBN,EAAM,gBAAgBY,CAAK;AAAA,MAC7B;AAAA,MACA,kBAAkB,CAAAA,MAAS;AACzB,QAAAN,EAAc,EAAK,GACnBN,EAAM,mBAAmBY,CAAK,GAC9BV,EAAe,SAAS,MAAM,YAAY,sBAAsB,GAAGU,CAAK,IAAI;AAAA,MAC9E;AAAA,MACA,WAAWC;AAAA,QACTb,EAAM;AAAA,QACNc,EAAO,iBAAiB;AAAA,QACxB;AAAA,MAAA;AAAA,MAEF,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"h_collapsible_box.js","sources":["../../src/stacks/h_collapsible_box.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport { useForkRef } from '../utils/index.js';\nimport { clsx } from 'clsx';\nimport { Box, BoxProps } from './box/box.js';\nimport styles from './collapsible_box.module.css';\nimport { useIsCollapsed } from './utils/use_is_collapsed.js';\n\nexport interface HCollapsibleBoxProps extends BoxProps {\n  open?: boolean;\n  defaultWidth?: string;\n}\n\nexport const HCollapsibleBox = React.forwardRef(function CollapsibleBox(\n  { open = false, defaultWidth = '400px', ...props }: HCollapsibleBoxProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const collapsibleRef = React.useRef<HTMLDivElement | null>(null);\n  const forkRef = useForkRef(ref, collapsibleRef);\n  const [resizing, setIsResizing] = React.useState(false);\n\n  useLayoutEffect(() => {\n    collapsibleRef.current?.style.setProperty('--collapsible-size', defaultWidth);\n  }, [defaultWidth]);\n\n  const isCollapsed = useIsCollapsed(open, collapsibleRef);\n  const children = isCollapsed && !open ? null : props.children;\n\n  return (\n    <Box\n      ref={forkRef}\n      {...props}\n      data-is-collapsed={!open}\n      data-collapse-orientation=\"horizontal\"\n      data-is-resizing={resizing}\n      onWidthResize={width => {\n        setIsResizing(true);\n        props.onWidthResize?.(width);\n      }}\n      onWidthResizeEnd={width => {\n        setIsResizing(false);\n        props.onWidthResizeEnd?.(width);\n        collapsibleRef.current?.style.setProperty('--collapsible-size', `${width}px`);\n      }}\n      className={clsx(\n        props.className,\n        styles['collapsible-box'],\n        'tcn-h-collapsible-box'\n      )}\n      children={children}\n    />\n  );\n});\n"],"names":["HCollapsibleBox","React","open","defaultWidth","props","ref","collapsibleRef","forkRef","useForkRef","resizing","setIsResizing","useLayoutEffect","children","useIsCollapsed","jsx","Box","width","clsx","styles"],"mappings":";;;;;;;;;;;;;AAYO,MAAMA,IAAkBC,EAAM,WAAW,SAC9C,EAAE,MAAAC,IAAO,IAAO,cAAAC,IAAe,SAAS,GAAGC,EAAA,GAC3CC,GACA;AACA,QAAMC,IAAiBL,EAAM,OAA8B,IAAI,GACzDM,IAAUC,EAAWH,GAAKC,CAAc,GACxC,CAACG,GAAUC,CAAa,IAAIT,EAAM,SAAS,EAAK;AAEtD,EAAAU,EAAgB,MAAM;AACpB,IAAAL,EAAe,SAAS,MAAM,YAAY,sBAAsBH,CAAY;AAAA,EAC9E,GAAG,CAACA,CAAY,CAAC;AAGjB,QAAMS,IADcC,EAAeX,GAAMI,CAAc,KACvB,CAACJ,IAAO,OAAOE,EAAM;AAErD,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKR;AAAA,MACJ,GAAGH;AAAA,MACJ,qBAAmB,CAACF;AAAA,MACpB,6BAA0B;AAAA,MAC1B,oBAAkBO;AAAA,MAClB,eAAe,CAAAO,MAAS;AACtB,QAAAN,EAAc,EAAI,GAClBN,EAAM,gBAAgBY,CAAK;AAAA,MAC7B;AAAA,MACA,kBAAkB,CAAAA,MAAS;AACzB,QAAAN,EAAc,EAAK,GACnBN,EAAM,mBAAmBY,CAAK,GAC9BV,EAAe,SAAS,MAAM,YAAY,sBAAsB,GAAGU,CAAK,IAAI;AAAA,MAC9E;AAAA,MACA,WAAWC;AAAA,QACTb,EAAM;AAAA,QACNc,EAAO,iBAAiB;AAAA,QACxB;AAAA,MAAA;AAAA,MAEF,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/stacks/v_collapsible_box.js

@@ -1,21 +1,23 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as f } from "react/jsx-runtime";
 import t, { useLayoutEffect as p } from "react";
 import "../utils/click_away_listener.js";
 import "../utils/focus_redirect.js";
 import "../utils/scroll_away_listener.js";
 import { useForkRef as u } from "../utils/hooks/use_fork_ref.js";
 import "../utils/hooks/use_resize_observer.js";
+import "../utils/dnd/context.js";
 import { clsx as d } from "clsx";
+import "../draggable.module-BgelQsuJ.js";
 import { Box as R } from "./box/box.js";
 import { s as x } from "../collapsible_box.module-BiS98xXA.js";
 import { useIsCollapsed as b } from "./utils/use_is_collapsed.js";
-const _ = t.forwardRef(function({ open: l = !1, defaultHeight: i = "400px", ...e }, a) {
+const w = t.forwardRef(function({ open: l = !1, defaultHeight: i = "400px", ...e }, a) {
   const s = t.useRef(null), c = u(a, s), [n, r] = t.useState(!1);
   p(() => {
     s.current?.style.setProperty("--collapsible-size", i);
   }, [i]);
-  const f = b(l, s) && !l ? null : e.children;
-  return /* @__PURE__ */ m(
+  const m = b(l, s) && !l ? null : e.children;
+  return /* @__PURE__ */ f(
     R,
     {
       ref: c,
@@ -34,11 +36,11 @@ const _ = t.forwardRef(function({ open: l = !1, defaultHeight: i = "400px", ...e
         x["collapsible-box"],
         "tcn-v-collapsible-box"
       ),
-      children: f
+      children: m
     }
   );
 });
 export {
-  _ as VCollapsibleBox
+  w as VCollapsibleBox
 };
 //# sourceMappingURL=v_collapsible_box.js.map

package/dist/stacks/v_collapsible_box.js.map

@@ -1 +1 @@
-{"version":3,"file":"v_collapsible_box.js","sources":["../../src/stacks/v_collapsible_box.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport { useForkRef } from '../utils/index.js';\nimport { clsx } from 'clsx';\nimport { Box, BoxProps } from './box/box.js';\nimport styles from './collapsible_box.module.css';\nimport { useIsCollapsed } from './utils/use_is_collapsed.js';\n\nexport interface VCollapsibleBoxProps extends BoxProps {\n  open?: boolean;\n  defaultHeight?: string;\n}\n\nexport const VCollapsibleBox = React.forwardRef(function CollapsibleBox(\n  { open = false, defaultHeight = '400px', ...props }: VCollapsibleBoxProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const collapsibleRef = React.useRef<HTMLDivElement | null>(null);\n  const forkRef = useForkRef(ref, collapsibleRef);\n  const [resizing, setIsResizing] = React.useState(false);\n\n  useLayoutEffect(() => {\n    collapsibleRef.current?.style.setProperty('--collapsible-size', defaultHeight);\n  }, [defaultHeight]);\n\n  const isCollapsed = useIsCollapsed(open, collapsibleRef);\n  const children = isCollapsed && !open ? null : props.children;\n\n  return (\n    <Box\n      ref={forkRef}\n      {...props}\n      data-is-collapsed={!open}\n      data-collapse-orientation=\"vertical\"\n      data-is-resizing={resizing}\n      onHeightResize={height => {\n        setIsResizing(true);\n        props.onHeightResize?.(height);\n      }}\n      onHeightResizeEnd={height => {\n        setIsResizing(false);\n        collapsibleRef.current?.style.setProperty('--collapsible-size', `${height}px`);\n        props.onHeightResizeEnd?.(height);\n      }}\n      className={clsx(\n        props.className,\n        styles['collapsible-box'],\n        'tcn-v-collapsible-box'\n      )}\n      children={children}\n    />\n  );\n});\n"],"names":["VCollapsibleBox","React","open","defaultHeight","props","ref","collapsibleRef","forkRef","useForkRef","resizing","setIsResizing","useLayoutEffect","children","useIsCollapsed","jsx","Box","height","clsx","styles"],"mappings":";;;;;;;;;;;AAYO,MAAMA,IAAkBC,EAAM,WAAW,SAC9C,EAAE,MAAAC,IAAO,IAAO,eAAAC,IAAgB,SAAS,GAAGC,EAAA,GAC5CC,GACA;AACA,QAAMC,IAAiBL,EAAM,OAA8B,IAAI,GACzDM,IAAUC,EAAWH,GAAKC,CAAc,GACxC,CAACG,GAAUC,CAAa,IAAIT,EAAM,SAAS,EAAK;AAEtD,EAAAU,EAAgB,MAAM;AACpB,IAAAL,EAAe,SAAS,MAAM,YAAY,sBAAsBH,CAAa;AAAA,EAC/E,GAAG,CAACA,CAAa,CAAC;AAGlB,QAAMS,IADcC,EAAeX,GAAMI,CAAc,KACvB,CAACJ,IAAO,OAAOE,EAAM;AAErD,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKR;AAAA,MACJ,GAAGH;AAAA,MACJ,qBAAmB,CAACF;AAAA,MACpB,6BAA0B;AAAA,MAC1B,oBAAkBO;AAAA,MAClB,gBAAgB,CAAAO,MAAU;AACxB,QAAAN,EAAc,EAAI,GAClBN,EAAM,iBAAiBY,CAAM;AAAA,MAC/B;AAAA,MACA,mBAAmB,CAAAA,MAAU;AAC3B,QAAAN,EAAc,EAAK,GACnBJ,EAAe,SAAS,MAAM,YAAY,sBAAsB,GAAGU,CAAM,IAAI,GAC7EZ,EAAM,oBAAoBY,CAAM;AAAA,MAClC;AAAA,MACA,WAAWC;AAAA,QACTb,EAAM;AAAA,QACNc,EAAO,iBAAiB;AAAA,QACxB;AAAA,MAAA;AAAA,MAEF,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"v_collapsible_box.js","sources":["../../src/stacks/v_collapsible_box.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport { useForkRef } from '../utils/index.js';\nimport { clsx } from 'clsx';\nimport { Box, BoxProps } from './box/box.js';\nimport styles from './collapsible_box.module.css';\nimport { useIsCollapsed } from './utils/use_is_collapsed.js';\n\nexport interface VCollapsibleBoxProps extends BoxProps {\n  open?: boolean;\n  defaultHeight?: string;\n}\n\nexport const VCollapsibleBox = React.forwardRef(function CollapsibleBox(\n  { open = false, defaultHeight = '400px', ...props }: VCollapsibleBoxProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const collapsibleRef = React.useRef<HTMLDivElement | null>(null);\n  const forkRef = useForkRef(ref, collapsibleRef);\n  const [resizing, setIsResizing] = React.useState(false);\n\n  useLayoutEffect(() => {\n    collapsibleRef.current?.style.setProperty('--collapsible-size', defaultHeight);\n  }, [defaultHeight]);\n\n  const isCollapsed = useIsCollapsed(open, collapsibleRef);\n  const children = isCollapsed && !open ? null : props.children;\n\n  return (\n    <Box\n      ref={forkRef}\n      {...props}\n      data-is-collapsed={!open}\n      data-collapse-orientation=\"vertical\"\n      data-is-resizing={resizing}\n      onHeightResize={height => {\n        setIsResizing(true);\n        props.onHeightResize?.(height);\n      }}\n      onHeightResizeEnd={height => {\n        setIsResizing(false);\n        collapsibleRef.current?.style.setProperty('--collapsible-size', `${height}px`);\n        props.onHeightResizeEnd?.(height);\n      }}\n      className={clsx(\n        props.className,\n        styles['collapsible-box'],\n        'tcn-v-collapsible-box'\n      )}\n      children={children}\n    />\n  );\n});\n"],"names":["VCollapsibleBox","React","open","defaultHeight","props","ref","collapsibleRef","forkRef","useForkRef","resizing","setIsResizing","useLayoutEffect","children","useIsCollapsed","jsx","Box","height","clsx","styles"],"mappings":";;;;;;;;;;;;;AAYO,MAAMA,IAAkBC,EAAM,WAAW,SAC9C,EAAE,MAAAC,IAAO,IAAO,eAAAC,IAAgB,SAAS,GAAGC,EAAA,GAC5CC,GACA;AACA,QAAMC,IAAiBL,EAAM,OAA8B,IAAI,GACzDM,IAAUC,EAAWH,GAAKC,CAAc,GACxC,CAACG,GAAUC,CAAa,IAAIT,EAAM,SAAS,EAAK;AAEtD,EAAAU,EAAgB,MAAM;AACpB,IAAAL,EAAe,SAAS,MAAM,YAAY,sBAAsBH,CAAa;AAAA,EAC/E,GAAG,CAACA,CAAa,CAAC;AAGlB,QAAMS,IADcC,EAAeX,GAAMI,CAAc,KACvB,CAACJ,IAAO,OAAOE,EAAM;AAErD,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKR;AAAA,MACJ,GAAGH;AAAA,MACJ,qBAAmB,CAACF;AAAA,MACpB,6BAA0B;AAAA,MAC1B,oBAAkBO;AAAA,MAClB,gBAAgB,CAAAO,MAAU;AACxB,QAAAN,EAAc,EAAI,GAClBN,EAAM,iBAAiBY,CAAM;AAAA,MAC/B;AAAA,MACA,mBAAmB,CAAAA,MAAU;AAC3B,QAAAN,EAAc,EAAK,GACnBJ,EAAe,SAAS,MAAM,YAAY,sBAAsB,GAAGU,CAAM,IAAI,GAC7EZ,EAAM,oBAAoBY,CAAM;AAAA,MAClC;AAAA,MACA,WAAWC;AAAA,QACTb,EAAM;AAAA,QACNc,EAAO,iBAAiB;AAAA,QACxB;AAAA,MAAA;AAAA,MAEF,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

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

@@ -1 +1 @@
-{"version":3,"file":"pop_confirm.d.ts","sourceRoot":"","sources":["../../../src/surfaces/pop_confirm/pop_confirm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,wCAAwC,CAAC;AAIhD,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAEjD,eAAO,MAAM,UAAU,iLAkBtB,CAAC"}
+{"version":3,"file":"pop_confirm.d.ts","sourceRoot":"","sources":["../../../src/surfaces/pop_confirm/pop_confirm.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,wCAAwC,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAEjD,eAAO,MAAM,UAAU,iLAmBtB,CAAC"}

package/dist/surfaces/pop_confirm/pop_confirm.js

@@ -1,7 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
-import f from "react";
-import { clsx as e } from "clsx";
-import { ElementPopper as n } from "../../overlay/popper/element_popper.js";
+import { clsx as f } from "clsx";
+import e from "react";
 import "../../layouts/column/column.js";
 import "../../divider.module-FptFV0PX.js";
 import "../../layouts/grid/grid.js";
@@ -9,7 +8,7 @@ import "../../layouts/list/item.js";
 import "../../layouts/list/list.js";
 import "../../layouts/sidebar_end/sidebar_end.js";
 import "../../layouts/sidebar_start/sidebar_start.js";
-import { Scaffold as c } from "../../layouts/scaffold/scaffold.js";
+import { Scaffold as n } from "../../layouts/scaffold/scaffold.js";
 import "../../layouts/body/h_body.js";
 import "../../layouts/body/v_body.js";
 import "../../layouts/footer/footer.js";
@@ -19,17 +18,19 @@ import "../../layouts/row/row.js";
 import "../../layouts/section/section.js";
 import "../../stacks/h_stack.js";
 import "../../section.module-0wyGkhDg.js";
-import { PopperDismissal as s } from "../../overlay/popper/base/dismissal_decorator.js";
-const b = f.forwardRef(
-  function({ children: r, className: m, dismissals: t = [s.CLICK_AWAY], ...i }, p) {
+import { PopperDismissal as c } from "../../overlay/popper/base/dismissal_decorator.js";
+import { ElementPopper as s } from "../../overlay/popper/element_popper.js";
+const b = e.forwardRef(
+  function({ children: r, className: i, dismissals: m = [c.CLICK_AWAY], ...p }, t) {
     return /* @__PURE__ */ o(
-      n,
+      s,
       {
-        ref: p,
-        className: e(m, "tcn-pop-confirm"),
-        dismissals: t,
-        ...i,
-        children: /* @__PURE__ */ o(c, { width: "100%", height: "100%", children: r })
+        ref: t,
+        precision: "high",
+        className: f(i, "tcn-pop-confirm"),
+        dismissals: m,
+        ...p,
+        children: /* @__PURE__ */ o(n, { 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 React from 'react';\nimport { clsx } from 'clsx';\nimport {\n  ElementPopper,\n  type ElementPopperProps,\n} from '../../overlay/popper/element_popper.js';\nimport { Scaffold } from '../../layouts/index.js';\nimport { PopperDismissal } from '../../overlay/popper/base/dismissal_decorator.js';\n\nexport type PopConfirmProps = ElementPopperProps;\n\nexport const PopConfirm = React.forwardRef<HTMLDivElement, PopConfirmProps>(\n  function PopConfirm(\n    { children, className, dismissals = [PopperDismissal.CLICK_AWAY], ...props },\n    ref\n  ) {\n    return (\n      <ElementPopper\n        ref={ref}\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","dismissals","PopperDismissal","props","ref","jsx","ElementPopper","clsx","Scaffold"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,SACE,EAAE,UAAAC,GAAU,WAAAC,GAAW,YAAAC,IAAa,CAACC,EAAgB,UAAU,GAAG,GAAGC,EAAA,GACrEC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAWG,EAAKP,GAAW,iBAAiB;AAAA,QAC5C,YAAAC;AAAA,QACC,GAAGE;AAAA,QAEJ,4BAACK,GAAA,EAAS,OAAO,QAAQ,QAAQ,QAC9B,UAAAT,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    { children, className, dismissals = [PopperDismissal.CLICK_AWAY], ...props },\n    ref\n  ) {\n    return (\n      <ElementPopper\n        ref={ref}\n        precision=\"high\"\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","dismissals","PopperDismissal","props","ref","jsx","ElementPopper","clsx","Scaffold"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,SACE,EAAE,UAAAC,GAAU,WAAAC,GAAW,YAAAC,IAAa,CAACC,EAAgB,UAAU,GAAG,GAAGC,EAAA,GACrEC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAU;AAAA,QACV,WAAWG,EAAKP,GAAW,iBAAiB;AAAA,QAC5C,YAAAC;AAAA,QACC,GAAGE;AAAA,QAEJ,4BAACK,GAAA,EAAS,OAAO,QAAQ,QAAQ,QAC9B,UAAAT,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,qFA0ClB,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,qFA2ClB,CAAC"}

package/dist/surfaces/tooltip/tooltip.js

@@ -1,33 +1,34 @@
 import { jsx as e, jsxs as f, Fragment as u } from "react/jsx-runtime";
-import { clsx as d } from "clsx";
-import x, { useRef as R, isValidElement as _, cloneElement as h } from "react";
+import { clsx as h } from "clsx";
+import d, { useRef as x, isValidElement as R, cloneElement as _ } 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", w = { tooltip: j }, F = x.forwardRef(function({
+import '../../tooltip.css';const g = "_tooltip_b8c58d5", j = { tooltip: g }, F = d.forwardRef(function({
   children: o,
   className: r,
   verticalAnchor: n = "top",
   verticalOrigin: c = "bottom",
   horizontalAnchor: s = "center",
-  horizontalOrigin: l = "center",
-  label: m,
+  horizontalOrigin: i = "center",
+  label: l,
   ...p
-}, i) {
-  const t = R(null), a = _(o) ? h(o, { ref: t }) : /* @__PURE__ */ e(b, { as: "span", ref: t, children: o });
+}, m) {
+  const t = x(null), a = R(o) ? _(o, { ref: t }) : /* @__PURE__ */ e(b, { as: "span", ref: t, children: o });
   return /* @__PURE__ */ f(u, { children: [
     a,
     /* @__PURE__ */ e(
       E,
       {
-        ref: i,
+        ref: m,
         anchorElement: t,
         verticalAnchor: n,
         verticalOrigin: c,
         horizontalAnchor: s,
-        horizontalOrigin: l,
-        className: d(r, w.tooltip, "tcn-surface", "tcn-tooltip"),
+        horizontalOrigin: i,
+        precision: "high",
+        className: h(r, j.tooltip, "tcn-surface", "tcn-tooltip"),
         ...p,
-        children: m
+        children: l
       }
     )
   ] });

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    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        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","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,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAoB,IAAI,GAIpCC,IAASC,EAAeZ,CAAQ,IACpCa,EAAab,GAAU,EAAE,KAAKS,EAAA,CAA+B,IAE7D,gBAAAK,EAACC,GAAA,EAAO,IAAG,QAAO,KAAKN,GACpB,UAAAT,GACH;AAGF,SACE,gBAAAgB,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAG;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,KAAAV;AAAA,QACA,eAAeC;AAAA,QACf,gBAAAP;AAAA,QACA,gBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,WAAWc,EAAKlB,GAAWmB,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    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=\"high\"\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","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,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAoB,IAAI,GAIpCC,IAASC,EAAeZ,CAAQ,IACpCa,EAAab,GAAU,EAAE,KAAKS,EAAA,CAA+B,IAE7D,gBAAAK,EAACC,GAAA,EAAO,IAAG,QAAO,KAAKN,GACpB,UAAAT,GACH;AAGF,SACE,gBAAAgB,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAG;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,KAAAV;AAAA,QACA,eAAeC;AAAA,QACf,gBAAAP;AAAA,QACA,gBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,WAAU;AAAA,QACV,WAAWc,EAAKlB,GAAWmB,EAAO,SAAS,eAAe,aAAa;AAAA,QACtE,GAAGb;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}

package/dist/tethered.css

@@ -1 +1 @@
-@layer tcn-system{:where(._tethered_44058d8){display:inline-block;position:absolute;width:auto;height:auto;left:var(--tethered-left, 0);top:var(--tethered-top, 0)}}
+@layer tcn-system{:where(._origin-indicator_cbc16ea){z-index:2}:where(._tethered_44058d8){display:inline-block;position:absolute;width:auto;height:auto;left:var(--tethered-left, 0);top:var(--tethered-top, 0)}:where(._tethered_44058d8) ._origin-indicator_cbc16ea{position:absolute;display:inline-block;left:var(--tethered-origin-delta-x, 0);top:var(--tethered-origin-delta-y, 0);--caret-tx: 0%;--caret-ty: 0%;transform:translate(var(--caret-tx)) translateY(var(--caret-ty))}:where(._tethered_44058d8)[data-anchor-direction=top] ._origin-indicator_cbc16ea{--caret-tx: -50%;--caret-ty: -100%}:where(._tethered_44058d8)[data-anchor-direction=bottom] ._origin-indicator_cbc16ea{--caret-tx: -50%;--caret-ty: -100%}:where(._tethered_44058d8)[data-anchor-direction=start] ._origin-indicator_cbc16ea{--caret-tx: -100%;--caret-ty: -50%}:where(._tethered_44058d8)[data-anchor-direction=end] ._origin-indicator_cbc16ea{--caret-tx: -100%;--caret-ty: -50%}:where(._tethered_44058d8)[data-anchor-direction=bottom]{padding-bottom:var(--origin-indicator-dimensions-height)}:where(._tethered_44058d8)[data-anchor-direction=top]{padding-top:var(--origin-indicator-dimensions-height)}:where(._tethered_44058d8)[data-anchor-direction=start]{padding-left:var(--origin-indicator-dimensions-width)}:where(._tethered_44058d8)[data-anchor-direction=end]{padding-right:var(--origin-indicator-dimensions-width)}}

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

@@ -1 +1 @@
-@layer tcn-reset{*{position:relative;box-sizing:border-box}}@layer tcn-theme{:root{--ergo-primary: #ce6b2b;--ergo-secondary: #669eb4;--ergo-secondary-light: #ecf4fb;--ergo-secondary-dark: #497485;--ergo-tertiary: #dfd7cd;--ergo-white: #ffffff;--ergo-accent-blue: #395578;--ergo-accent-yellow: #dbc97e;--ergo-accent-green: #97bba3;--ergo-grey: #aaaaaa;--ergo-grey-light: #d3d3d3;--ergo-grey-dark: #808080;--ergo-status-red: #ff6565;--ergo-status-red-dark: #c24848;--ergo-status-yellow: #ffd439;--ergo-status-yellow-dark: #dbb735;--ergo-status-blue: var(--ergo-secondary);--ergo-status-blue-dark: var(--ergo-secondary-dark);--ergo-status-green: #3fbc6a;--ergo-status-green-dark: #2d904f;--ergo-ink-primary: var(--ergo-accent-blue);--ergo-ink-inverse: var(--ergo-white);--scalar: 1;--accent-color: var(--ergo-primary);--font-color: var(--ergo-ink-primary);--font-family: "Lato", sans-serif;--font-size: 12px;--gap-small: 4px;--gap-medium: 8px;--gap-large: 16px;--padding-small: 4px;--padding-medium: 8px;--padding-large: 16px;--status-color-disabled: var(--ergo-grey-light);--status-color-info: var(--ergo-status-blue);--status-color-warning: var(--ergo-status-yellow);--status-color-positive: var(--ergo-status-green);--status-color-error: var(--ergo-status-red);--async-color-initial: var(--ergo-grey-main);--async-color-pending: var(--ergo-status-blue);--async-color-success: var(--ergo-status-green);--async-color-failed: var(--ergo-status-red);--action-severity-dangerous: var(--ergo-status-red);--action-severity-cautious: var(--ergo-status-yellow);--action-severity-neutral: var(--ergo-primary);--action-severity-suggested: var(--ergo-status-blue);--action-severity-encouraged: var(--ergo-status-green);--shape-radius-small: 2px;--shape-radius-medium: 4px;--shape-radius-large: 8px;--primary-color-faint: #c0c0c0;--primary-color: #008cff;--primary-color-strong: #008cff;--secondary-color-faint: #c0c0c0;--secondary-color: #008cff;--secondary-color-strong: #008cff;--tertiary-color-faint: #c0c0c0;--tertiary-color: #008cff;--tertiary-color-strong: #008cff;--quaternary-color-faint: #c0c0c0;--quaternary-color: #008cff;--quaternary-color-strong: #008cff;--background-color-primary: #ffffff;--background-color-secondary: #ffffff;--background-color-tertiary: #ffffff;--background-color-quaternary: #ffffff;--foreground-color-primary: #aaa;--foreground-color-secondary: #222222;--foreground-color-tertiary: #222222;--foreground-color-quaternary: #222222;--material-disabled: var(--ergo-grey-light);--on-material-disabled: var(--ergo-ink-inverse);--ink-disabled: var(--ergo-grey-light);--material-line: var(--ergo-grey);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-theme-root{font-family:var(--font-family);color:var(--font-color);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-interactive{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .1s,background .1s,color .1s;--ink: var(--on-material);--act: var(--action);--mat: var(--material);--act-down: color-mix(in srgb, var(--mat), black 12%);--act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);--act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);--act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);background:var(--mat);color:var(--ink);transition:background .1s,color .1s}.tcn-interactive:focus-visible,.tcn-interactive[data-focus-visible]{background:var(--act-focus);outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-interactive:hover,.tcn-interactive[data-hover]{background:var(--act-raised)}.tcn-interactive:active,.tcn-interactive[data-active]{background:var(--act-down)}.tcn-interactive[data-is-disabled=true]{pointer-events:none}.tcn-base-button{--btn-size-base: 26px;--btn-pad-base: 12px;--btn-pad-delta: 4px;--btn-size-delta: 4px;--btn-step: 1;--btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));--btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));border-radius:var(--shape-radius-medium);min-height:var(--btn-size);padding:var(--padding-small) var(--btn-pad)}.tcn-base-button[data-size=sm]{--btn-step: -1}.tcn-base-button[data-size=md]{--btn-step: 0}.tcn-base-button[data-size=lg]{--btn-step: 1}.tcn-base-button[data-is-utility=true]{height:auto;width:auto;min-width:var(--btn-size);padding:0;--util-ratio: .75;--btn-size-base: 18px}.tcn-base-button[data-is-utility=true] .tcn-icon{min-height:min(2px,calc(var(--btn-size) * var(--util-ratio)));min-width:min(2px,calc(var(--btn-size) * var(--util-ratio)))}.tcn-button{--btn-primary: var(--action);--btn-on-primary: var(--on-action);--btn-variant: var(--on-material);transition:box-shadow .1s,transform .1s}.tcn-button[data-severity=dangerous]{--btn-primary: var(--action-severity-dangerous);--btn-variant: var(--ergo-status-red-dark)}.tcn-button[data-severity=cautious]{--btn-primary: var(--action-severity-cautious);--btn-on-primary: var(--ergo-accent-blue);--btn-variant: var(--ergo-status-yellow-dark)}.tcn-button[data-severity=suggested]{--btn-primary: var(--action-severity-suggested);--btn-variant: var(--ergo-status-blue-dark)}.tcn-button[data-severity=encouraged]{--btn-primary: var(--action-severity-encouraged);--btn-variant: var(--ergo-status-green-dark)}.tcn-button[data-hierarchy=primary]{--act: var(--ergo-white);--ink: var(--tcn-button-text-color, var(--btn-on-primary));--mat: var(--tcn-button-color, var(--btn-primary))}.tcn-button[data-hierarchy=primary][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary]{--act: var(--tcn-button-color, var(--btn-variant));--ink: var(--tcn-button-color, var(--btn-variant))}:is(.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary])[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-button[data-hierarchy=tertiary]:hover{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:1px;text-underline-offset:4px}.tcn-button[data-hierarchy=tertiary]{border:1px solid transparent}.tcn-button[data-hierarchy=secondary]{border:1px solid var(--ink)}.tcn-button[data-hierarchy=primary]{border:1px solid var(--mat)}.tcn-button:hover,.tcn-button[data-hover]{transform:translateY(-1px);box-shadow:0 4px 4px #0000001f}.tcn-button:active,.tcn-button[data-active]{transform:translateY(1px);box-shadow:inset 0 2px 2px #0000001f}.tcn-slim-button{height:auto;width:auto;padding:0}.tcn-slim-button[data-size=sm]{min-height:12px;min-width:12px;padding:0}.tcn-slim-button[data-size=sm] .tcn-icon{min-height:10px;min-width:10px}.tcn-slim-button[data-size=md]{min-height:18px;min-width:18px;padding:0}.tcn-slim-button[data-size=md] .tcn-icon{min-height:14px;min-width:14px}.tcn-slim-button[data-size=lg]{min-height:24px;min-width:24px;padding:0}.tcn-slim-button[data-size=lg] .tcn-icon{min-height:20px;min-width:20px}.tcn-button[data-size].tcn-select{padding-inline-end:26px}.tcn-toggle{--tgl-false: var(--ergo-accent-blue);--tgl-true: var(--ergo-accent-blue);--on-tgl-true: var(--ergo-white);--ink: var(--tcn-button-color, var(--tgl-false));--act: var(--tcn-button-color, var(--tgl-false))}.tcn-toggle[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-toggle[data-is-selected=true]{--mat: var(--tcn-button-color, var(--tgl-true));--ink: var(--tcn-button-text-color, var(--ergo-white));--act: var(--ergo-white)}.tcn-toggle[data-is-selected=true][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-button-group .tcn-button-group-button:hover,.tcn-button-group .tcn-button-group-button:active{transform:none}.tcn-button-group .tcn-button-group-button{border-radius:0}.tcn-button-group .tcn-button-group-button:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]{border:0}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:last-child){border-right:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:first-child){border-left:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:last-child){border-right:1px solid var(--act-down)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:first-child){border-left:1px solid var(--act-down)}.tcn-select-group .tcn-select-group-option:hover,.tcn-select-group .tcn-select-group-option:active{transform:none}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]{color:var(--act);border-color:var(--act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:hover{background:var(--act-faint)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:active{background:var(--act-down);color:var(--on-act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary][data-is-disabled=true]{color:var(--material-disabled);border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option[data-hierarchy=primary][data-is-disabled=true]{background:var(--material-disabled);color:#fff;border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option{border-radius:0}.tcn-select-group .tcn-select-group-option:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-select-group .tcn-select-group-option:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-tabs-bar .tcn-tabs-list .tcn-tab-item{min-height:24px;padding:0px var(--padding-medium);text-decoration:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item{box-sizing:border-box;border:none;padding:0px var(--padding-medium);border-radius:0}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=true]{--mat: var(--tcn-button-color, var(--material));--ink: var(--tcn-button-text-color, var(--ergo-primary));--act: var(--ergo-primary)}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:hover:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ergo-accent-blue);pointer-events:none;width:100%;z-index:3}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list:after{content:"";position:absolute;bottom:-1px;left:0;min-height:2px;transform:translate(var(--tabs-active-rectangle-position-x, 0));width:var(--tabs-active-rectangle-width, 0);background:var(--ergo-primary);pointer-events:none;border-bottom-left-radius:2px;border-bottom-right-radius:2px;transition:transform .3s ease-in-out,width .3s ease-in-out;will-change:transform,width;z-index:2}.tcn-tabs-bar[data-variant=default]:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--material-line);pointer-events:none;z-index:1}.tcn-tabs-bar[data-variant=inline]{min-width:min-content;width:auto;flex-grow:0;border-radius:var(--shape-radius-medium);border:1px solid var(--on-material)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list{gap:var(--gap-small);padding:var(--padding-small)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list .tcn-tab-item{border-radius:var(--shape-radius-medium)}.material{background-color:var(--material);color:var(--on-material)}.tcn-draggable[data-is-draggable=true] .tcn-drag-handle{cursor:move}.tcn-frame[data-is-veil=true]{background-color:#00000080}.tcn-tooltip{background:#395578d9;box-shadow:0 4px 7px #414141a8;color:#fff;border-radius:var(--shape-radius-medium);padding:var(--padding-medium)}.tcn-list{gap:var(--gap-medium)}.tcn-list .tcn-item{height:24px;padding:0px var(--padding-medium);border-radius:var(--shape-radius-medium)}.tcn-scaffold{--scaffold-v-inset: var(--v-inset, var(--padding-large));--scaffold-header-size: var(--header-size, 40px);--scaffold-footer-size: var(--footer-size, 40px);--scaffold-utility-bar-size: var(--utility-bar-size, 32px);--scaffold-divide-footer: var(--divide-footer, 1);--scaffold-divide-header: var(--divide-header, 1)}.tcn-scaffold :where(.tcn-header){min-height:var(--scaffold-header-size);padding:0 var(--scaffold-v-inset);gap:var(--gap-medium)}.tcn-scaffold :where(.tcn-header)+:where(.tcn-body),.tcn-scaffold :where(.tcn-utility-bar)+:where(.tcn-body){border-top:calc(var(--scaffold-divide-header) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-body)+:where(.tcn-footer){border-top:calc(var(--scaffold-divide-footer) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-utility-bar){min-height:var(--scaffold-utility-bar-size);padding:0 var(--scaffold-v-inset);gap:var(--gap-medium)}.tcn-scaffold :where(.tcn-body){padding:0 var(--scaffold-v-inset);gap:var(--gap-medium)}.tcn-scaffold :where(.tcn-footer){gap:var(--gap-medium);min-height:var(--scaffold-footer-size);padding:0 var(--scaffold-v-inset)}.tcn-frame-veil[data-is-veil=true]{background-color:#00000080}.tcn-modal{--divide-header: 0}.tcn-modal :where(.tcn-scaffold){border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:1px solid var(--foreground-color-primary)}.tcn-modal :where(.tcn-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-modal :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-window{--divide-header: 0}.tcn-window :where(.tcn-scaffold){box-shadow:0 4px 34px #00000096;border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:2px solid white}.tcn-window :where(.tcn-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-window :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-pop-confirm{--divide-header: 0;--v-inset: var(--padding-medium)}.tcn-pop-confirm :where(.tcn-scaffold){box-shadow:0 4px 8px #0006;border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden}.tcn-pop-confirm :where(.tcn-header){min-height:32px;--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-pop-confirm :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-confirm{background-color:var(--background-color-primary)}.tcn-panel{background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);overflow:hidden}.tcn-card{--header-size: 32px;--footer-size: 32px;--utility-bar-size: 24px;--divide-header: 0;background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);border:1px solid var(--foreground-color-primary);overflow:hidden}.tcn-card :where(.tcn-header){min-height:32px;--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-secondary);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-card :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-heading{background-color:#f1f1f1;padding-inline-start:8px;height:30px;z-index:5}.tcn-section>.tcn-heading{background-color:#f2f4f6;padding-inline-start:8px;color:#333;z-index:4}.tcn-section>.tcn-section>.tcn-heading{background-color:#fff7f0;padding-inline-start:12px;color:#395578;z-index:3}.tcn-section>.tcn-section>.tcn-section>.tcn-heading{background-color:#eef8ef;padding-inline-start:16px;color:#395578;z-index:2}.tcn-section>.tcn-section>.tcn-section>.tcn-section .tcn-heading{background-color:#ecf4fb;padding-inline-start:20px;color:#395578;z-index:1}.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:8px}.tcn-section>.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:12px}.tcn-section>.tcn-section>.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:16px}.tcn-section>.tcn-section>.tcn-section>.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:20px}.tcn-base-carrot{--carrot-size: 12px;--carrot-triangle-height: calc(var(--carrot-size) / 2);--carrot-triangle-width: var(--carrot-size);--carrot-triangle-base: var(--carrot-triangle-height) solid transparent;--carrot-triangle-peak: var(--carrot-triangle-width) solid var(--material);width:0;height:0;flex-grow:0;display:inline-block}.tcn-base-carrot[data-direction=top]{border-bottom:var(--carrot-triangle-peak);border-left:var(--carrot-triangle-base);border-right:var(--carrot-triangle-base)}.tcn-base-carrot[data-direction=bottom]{border-top:var(--carrot-triangle-peak);border-left:var(--carrot-triangle-base);border-right:var(--carrot-triangle-base)}.tcn-base-carrot[data-direction=start]{border-right:var(--carrot-triangle-peak);border-top:var(--carrot-triangle-base);border-bottom:var(--carrot-triangle-base)}.tcn-base-carrot[data-direction=end]{border-left:var(--carrot-triangle-peak);border-top:var(--carrot-triangle-base);border-bottom:var(--carrot-triangle-base)}}
+@layer tcn-reset{*{position:relative;box-sizing:border-box}}@layer tcn-theme{:root{--ergo-primary: #ce6b2b;--ergo-secondary: #669eb4;--ergo-secondary-light: #ecf4fb;--ergo-secondary-dark: #497485;--ergo-tertiary: #dfd7cd;--ergo-tertiary-light: #f9f4ed;--ergo-tertiary-dark: #7e6c5d;--ergo-white: #ffffff;--ergo-accent-blue: #395578;--ergo-accent-blue-light: #f3f4f6;--ergo-accent-green: #97bba3;--ergo-accent-green-light: #eef8ef;--ergo-accent-green-dark: #4f785c;--ergo-accent-yellow: #dbc97e;--ergo-accent-yellow-light: #fef9e7;--ergo-grey: #aaaaaa;--ergo-grey-light: #d3d3d3;--ergo-grey-dark: #808080;--ergo-status-red: #ff6565;--ergo-status-red-dark: #c24848;--ergo-status-yellow: #ffd439;--ergo-status-yellow-dark: #dbb735;--ergo-status-blue: var(--ergo-secondary);--ergo-status-blue-dark: var(--ergo-secondary-dark);--ergo-status-green: #3fbc6a;--ergo-status-green-dark: #2d904f;--ergo-ink-primary: var(--ergo-accent-blue);--ergo-ink-inverse: var(--ergo-white);--scalar: 1;--accent-color: var(--ergo-primary);--font-color: var(--ergo-ink-primary);--font-family: "Lato", sans-serif;--font-size: 12px;--gap-small: 4px;--gap-medium: 8px;--gap-large: 16px;--padding-small: 4px;--padding-medium: 8px;--padding-large: 16px;--status-color-disabled: var(--ergo-grey-light);--status-color-info: var(--ergo-status-blue);--status-color-warning: var(--ergo-status-yellow);--status-color-positive: var(--ergo-status-green);--status-color-error: var(--ergo-status-red);--async-color-initial: var(--ergo-grey-main);--async-color-pending: var(--ergo-status-blue);--async-color-success: var(--ergo-status-green);--async-color-failed: var(--ergo-status-red);--action-severity-dangerous: var(--ergo-status-red);--action-severity-cautious: var(--ergo-status-yellow);--action-severity-neutral: var(--ergo-primary);--action-severity-suggested: var(--ergo-status-blue);--action-severity-encouraged: var(--ergo-status-green);--shape-radius-small: 2px;--shape-radius-medium: 4px;--shape-radius-large: 8px;--primary-color-faint: #c0c0c0;--primary-color: #008cff;--primary-color-strong: #008cff;--secondary-color-faint: #c0c0c0;--secondary-color: #008cff;--secondary-color-strong: #008cff;--tertiary-color-faint: #c0c0c0;--tertiary-color: #008cff;--tertiary-color-strong: #008cff;--quaternary-color-faint: #c0c0c0;--quaternary-color: #008cff;--quaternary-color-strong: #008cff;--background-color-primary: #ffffff;--background-color-secondary: #ffffff;--background-color-tertiary: #ffffff;--background-color-quaternary: #ffffff;--foreground-color-primary: #aaa;--foreground-color-secondary: #222222;--foreground-color-tertiary: #222222;--foreground-color-quaternary: #222222;--material-disabled: var(--ergo-grey-light);--on-material-disabled: var(--ergo-ink-inverse);--ink-disabled: var(--ergo-grey-light);--material-line: var(--ergo-grey);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-theme-root{font-family:var(--font-family);color:var(--font-color);--action: var(--ergo-primary);--on-action: var(--ergo-white);--material: var(--ergo-white);--on-material: var(--ergo-accent-blue)}.tcn-interactive{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .1s,background .1s,color .1s;--ink: var(--on-material);--act: var(--action);--mat: var(--material);--act-down: color-mix(in srgb, var(--mat), black 12%);--act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);--act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);--act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);background:var(--mat);color:var(--ink);transition:background .1s,color .1s}.tcn-interactive:focus-visible,.tcn-interactive[data-focus-visible]{background:var(--act-focus);outline:2px solid var(--ergo-primary);outline-offset:2px}.tcn-interactive:hover,.tcn-interactive[data-hover]{background:var(--act-raised)}.tcn-interactive:active,.tcn-interactive[data-active]{background:var(--act-down)}.tcn-interactive[data-is-disabled=true]{pointer-events:none}.tcn-base-button{--btn-size-base: 26px;--btn-pad-base: 12px;--btn-pad-delta: 4px;--btn-size-delta: 4px;--btn-step: 1;--btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));--btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));border-radius:var(--shape-radius-medium);min-height:var(--btn-size);padding:var(--padding-small) var(--btn-pad)}.tcn-base-button[data-size=sm]{--btn-step: -1}.tcn-base-button[data-size=md]{--btn-step: 0}.tcn-base-button[data-size=lg]{--btn-step: 1}.tcn-base-button[data-is-utility=true]{height:auto;width:auto;min-width:var(--btn-size);padding:0;--util-ratio: .75;--btn-size-base: 18px}.tcn-base-button[data-is-utility=true] .tcn-icon{min-height:min(2px,calc(var(--btn-size) * var(--util-ratio)));min-width:min(2px,calc(var(--btn-size) * var(--util-ratio)))}.tcn-button{--btn-primary: var(--action);--btn-on-primary: var(--on-action);--btn-variant: var(--on-material);transition:box-shadow .1s,transform .1s}.tcn-button[data-severity=dangerous]{--btn-primary: var(--action-severity-dangerous);--btn-variant: var(--ergo-status-red-dark)}.tcn-button[data-severity=cautious]{--btn-primary: var(--action-severity-cautious);--btn-on-primary: var(--ergo-accent-blue);--btn-variant: var(--ergo-status-yellow-dark)}.tcn-button[data-severity=suggested]{--btn-primary: var(--action-severity-suggested);--btn-variant: var(--ergo-status-blue-dark)}.tcn-button[data-severity=encouraged]{--btn-primary: var(--action-severity-encouraged);--btn-variant: var(--ergo-status-green-dark)}.tcn-button[data-hierarchy=primary]{--act: var(--ergo-white);--ink: var(--tcn-button-text-color, var(--btn-on-primary));--mat: var(--tcn-button-color, var(--btn-primary))}.tcn-button[data-hierarchy=primary][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary]{--act: var(--tcn-button-color, var(--btn-variant));--ink: var(--tcn-button-color, var(--btn-variant))}:is(.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=tertiary])[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-button[data-hierarchy=tertiary]:hover{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:1px;text-underline-offset:4px}.tcn-button[data-hierarchy=tertiary]{border:1px solid transparent}.tcn-button[data-hierarchy=secondary]{border:1px solid var(--ink)}.tcn-button[data-hierarchy=primary]{border:1px solid var(--mat)}.tcn-button:hover,.tcn-button[data-hover]{transform:translateY(-1px);box-shadow:0 4px 4px #0000001f}:is(.tcn-button:hover,.tcn-button[data-hover]):before,:is(.tcn-button:hover,.tcn-button[data-hover]):after{content:"";position:absolute;left:0;right:0;height:4px}:is(.tcn-button:hover,.tcn-button[data-hover]):before{top:-2px}:is(.tcn-button:hover,.tcn-button[data-hover]):after{bottom:-2px}.tcn-button:active,.tcn-button[data-active]{transform:translateY(1px);box-shadow:inset 0 2px 2px #0000001f}.tcn-slim-button{height:auto;width:auto;padding:0}.tcn-slim-button[data-size=sm]{min-height:12px;min-width:12px;padding:0}.tcn-slim-button[data-size=sm] .tcn-icon{min-height:10px;min-width:10px}.tcn-slim-button[data-size=md]{min-height:18px;min-width:18px;padding:0}.tcn-slim-button[data-size=md] .tcn-icon{min-height:14px;min-width:14px}.tcn-slim-button[data-size=lg]{min-height:24px;min-width:24px;padding:0}.tcn-slim-button[data-size=lg] .tcn-icon{min-height:20px;min-width:20px}.tcn-button[data-size].tcn-select{padding-inline-end:26px}.tcn-toggle{--tgl-false: var(--ergo-accent-blue);--tgl-true: var(--ergo-accent-blue);--on-tgl-true: var(--ergo-white);--ink: var(--tcn-button-color, var(--tgl-false));--act: var(--tcn-button-color, var(--tgl-false))}.tcn-toggle[data-is-disabled=true]{--ink: var(--ergo-grey-light)}.tcn-toggle[data-is-selected=true]{--mat: var(--tcn-button-color, var(--tgl-true));--ink: var(--tcn-button-text-color, var(--ergo-white));--act: var(--ergo-white)}.tcn-toggle[data-is-selected=true][data-is-disabled=true]{--ink: var(--ergo-white);--mat: var(--ergo-grey-light)}.tcn-button-group .tcn-button-group-button:hover,.tcn-button-group .tcn-button-group-button:active{transform:none}.tcn-button-group .tcn-button-group-button{border-radius:0}.tcn-button-group .tcn-button-group-button:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]{border:0}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:last-child){border-right:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=tertiary]:not(:first-child){border-left:1px solid var(--on-mat-faint)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:last-child){border-right:1px solid var(--act-down)}.tcn-button-group .tcn-button-group-button[data-hierarchy=primary]:not(:first-child){border-left:1px solid var(--act-down)}.tcn-select-group .tcn-select-group-option:hover,.tcn-select-group .tcn-select-group-option:active{transform:none}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]{color:var(--act);border-color:var(--act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:hover{background:var(--act-faint)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary]:active{background:var(--act-down);color:var(--on-act)}.tcn-select-group .tcn-select-group-option[data-hierarchy=secondary][data-is-disabled=true]{color:var(--material-disabled);border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option[data-hierarchy=primary][data-is-disabled=true]{background:var(--material-disabled);color:#fff;border:1px solid var(--material-disabled)}.tcn-select-group .tcn-select-group-option{border-radius:0}.tcn-select-group .tcn-select-group-option:first-child{border-top-left-radius:var(--shape-radius-medium);border-bottom-left-radius:var(--shape-radius-medium)}.tcn-select-group .tcn-select-group-option:last-child{border-top-right-radius:var(--shape-radius-medium);border-bottom-right-radius:var(--shape-radius-medium)}.tcn-tabs-bar .tcn-tabs-list .tcn-tab-item{min-height:24px;padding:0px var(--padding-medium);text-decoration:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item{box-sizing:border-box;border:none;padding:0px var(--padding-medium);border-radius:0}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=true]{--mat: var(--tcn-button-color, var(--material));--ink: var(--tcn-button-text-color, var(--ergo-primary));--act: var(--ergo-primary)}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item:focus-visible{z-index:2}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:hover:after,.tcn-tabs-bar[data-variant=default] .tcn-tabs-list .tcn-tab-item[data-is-selected=false]:focus-visible:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ergo-accent-blue);pointer-events:none;width:100%;z-index:3}.tcn-tabs-bar[data-variant=default] .tcn-tabs-list:after{content:"";position:absolute;bottom:-1px;left:0;min-height:2px;transform:translate(var(--tabs-active-rectangle-position-x, 0));width:var(--tabs-active-rectangle-width, 0);background:var(--ergo-primary);pointer-events:none;border-bottom-left-radius:2px;border-bottom-right-radius:2px;transition:transform .3s ease-in-out,width .3s ease-in-out;will-change:transform,width;z-index:2}.tcn-tabs-bar[data-variant=default]:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--material-line);pointer-events:none;z-index:1}.tcn-tabs-bar[data-variant=inline]{min-width:min-content;width:auto;flex-grow:0;border-radius:var(--shape-radius-medium);border:1px solid var(--on-material)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list{gap:var(--gap-small);padding:var(--padding-small)}.tcn-tabs-bar[data-variant=inline] .tcn-tabs-list .tcn-tab-item{border-radius:var(--shape-radius-medium)}.material{background-color:var(--material);color:var(--on-material)}.tcn-draggable[data-is-draggable=true] .tcn-drag-handle{cursor:move}.tcn-frame[data-is-veil=true]{background-color:#00000080}.tcn-tooltip{background:#395578d9;box-shadow:0 4px 7px #414141a8;color:#fff;border-radius:var(--shape-radius-medium);padding:var(--padding-medium)}.tcn-list{gap:var(--gap-medium)}.tcn-list .tcn-item{height:24px;padding:0px var(--padding-medium);border-radius:var(--shape-radius-medium)}.tcn-scaffold{--scaffold-v-inset: var(--v-inset, var(--padding-large));--scaffold-header-size: var(--header-size, 40px);--scaffold-footer-size: var(--footer-size, 40px);--scaffold-utility-bar-size: var(--utility-bar-size, 32px);--scaffold-divide-footer: var(--divide-footer, 1);--scaffold-divide-header: var(--divide-header, 1)}.tcn-scaffold :where(.tcn-header){min-height:var(--scaffold-header-size);padding:0 var(--scaffold-v-inset);gap:var(--gap-medium)}.tcn-scaffold :where(.tcn-header)+:where(.tcn-body),.tcn-scaffold :where(.tcn-utility-bar)+:where(.tcn-body){border-top:calc(var(--scaffold-divide-header) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-body)+:where(.tcn-footer){border-top:calc(var(--scaffold-divide-footer) * 1px) solid var(--foreground-color-primary)}.tcn-scaffold :where(.tcn-utility-bar){min-height:var(--scaffold-utility-bar-size);padding:0 var(--scaffold-v-inset);gap:var(--gap-medium)}.tcn-scaffold :where(.tcn-body){--section-tab-start: var(--scaffold-v-inset);gap:var(--gap-medium)}.tcn-scaffold :where(.tcn-body) .tcn-section{--section-tab-start: var(--scaffold-v-inset)}.tcn-scaffold :where(.tcn-footer){gap:var(--gap-medium);min-height:var(--scaffold-footer-size);padding:0 var(--scaffold-v-inset)}.tcn-frame-veil[data-is-veil=true]{background-color:#00000080}.tcn-modal{--divide-header: 0}.tcn-modal :where(.tcn-scaffold){border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:1px solid var(--foreground-color-primary)}.tcn-modal :where(.tcn-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-modal :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-window{--divide-header: 0}.tcn-window :where(.tcn-scaffold){box-shadow:0 4px 34px #00000096;border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden;border:2px solid white}.tcn-window :where(.tcn-header){--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-window :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-pop-confirm{--divide-header: 0;--v-inset: var(--padding-medium)}.tcn-pop-confirm :where(.tcn-scaffold){box-shadow:0 4px 8px #0006;border-radius:var(--shape-radius-medium);background-color:var(--background-color-primary);overflow:hidden}.tcn-pop-confirm :where(.tcn-header){min-height:32px;--material: var(--ergo-secondary-dark);--on-material: var(--ergo-white);--action: var(--ergo-tertiary);--on-action: var(--ergo-secondary-dark);background-color:var(--material);color:var(--on-material)}.tcn-pop-confirm :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-confirm{background-color:var(--background-color-primary)}.tcn-panel{background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);overflow:hidden}.tcn-card{--header-size: 32px;--footer-size: 32px;--utility-bar-size: 24px;--divide-header: 0;background-color:var(--background-color-primary);border-radius:var(--shape-radius-medium);border:1px solid var(--foreground-color-primary);overflow:hidden}.tcn-card :where(.tcn-header){min-height:32px;--material: var(--ergo-secondary-light);--on-material: var(--ergo-accent-blue);--action: var(--ergo-secondary);--on-action: var(--ergo-white);background-color:var(--material);color:var(--on-material)}.tcn-card :where(.tcn-header) :where(.tcn-typography){color:inherit}.tcn-section{--max-section-depth: 4;--section-tab-width: 4px;--section-tab-start: 8px;--section-tab-depth: 0;--section-tab: calc( var(--section-tab-start) + (var(--section-tab-width) * var(--section-tab-depth)) );--section-action: var(--ergo-secondary);--section-mat: var(--ergo-secondary-light);--section-on-mat: var(--ergo-ink-primary)}.tcn-heading{background-color:#f1f1f1;padding-inline-start:8px;height:30px;z-index:5}.tcn-section>.tcn-heading{z-index:calc(var(--max-section-depth) - var(--section-tab-depth));padding-inline-start:var(--section-tab);--material: var(--section-mat);--on-material: var(--section-on-mat);--action: var(--section-action);background-color:var(--material);color:var(--on-material);gap:var(--gap-small)}.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:var(--section-tab)}.tcn-section>.tcn-section{--section-tab-depth: 1;--section-mat: var(--ergo-accent-blue-light);--section-action: var(--ergo-accent-blue)}.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 2;--section-mat: var(--ergo-accent-green-light);--section-action: var(--ergo-accent-green-dark)}.tcn-section>.tcn-section>.tcn-section>.tcn-section{--section-tab-depth: 3;--section-mat: var(--ergo-tertiary-light);--section-action: var(--ergo-tertiary-dark)}.tcn-caret{--caret-size: 12px;--caret-triangle-height: calc(var(--caret-size) / 2);--caret-triangle-width: var(--caret-size);--caret-triangle-base: var(--caret-triangle-height) solid transparent;--caret-triangle-peak: var(--caret-triangle-width) solid var(--material);width:0;height:0;flex-grow:0;display:inline-block}.tcn-caret[data-direction=top]{border-bottom:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=bottom]{border-top:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=start]{border-right:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}.tcn-caret[data-direction=end]{border-left:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}}

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

@@ -15,12 +15,17 @@ const n = `@layer tcn-reset {
     --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-green: #97bba3;
+    --ergo-accent-yellow-light: #fef9e7;
 
     --ergo-grey: #aaaaaa;
     --ergo-grey-light: #d3d3d3;
@@ -299,6 +304,24 @@ const n = `@layer tcn-reset {
     &[data-hover] {
       transform: translateY(-1px);
       box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);
+
+      /* Increases the clickable area by 2px on hover to avoid click events not firing due to the button transform y - or slight mouse wiggles */
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 4px;
+      }
+
+      &::before {
+        top: -2px;
+      }
+
+      &::after {
+        bottom: -2px;
+      }
     }
 
     &:active,
@@ -477,8 +500,12 @@ const n = `@layer tcn-reset {
         --act: var(--ergo-primary);
       }
 
+      .tcn-tab-item:focus-visible {
+        z-index: 2;
+      }
       /* Hover Indicator */
-      .tcn-tab-item[data-is-selected="false"]:hover::after {
+      .tcn-tab-item[data-is-selected="false"]:hover::after,
+      .tcn-tab-item[data-is-selected="false"]:focus-visible::after {
         content: "";
         display: block;
         position: absolute;
@@ -614,8 +641,12 @@ const n = `@layer tcn-reset {
     }
 
     :where(.tcn-body) {
-      padding: 0 var(--scaffold-v-inset);
+      --section-tab-start: var(--scaffold-v-inset);
+
       gap: var(--gap-medium);
+      .tcn-section {
+        --section-tab-start: var(--scaffold-v-inset);
+      }
     }
 
     :where(.tcn-footer) {
@@ -747,6 +778,20 @@ const n = `@layer tcn-reset {
   }
 
   /* SECTION */
+  .tcn-section {
+    --max-section-depth: 4;
+    --section-tab-width: 4px;
+    --section-tab-start: 8px;
+    --section-tab-depth: 0;
+    --section-tab: calc(
+      var(--section-tab-start) +
+      (var(--section-tab-width) * var(--section-tab-depth))
+    );
+    --section-action: var(--ergo-secondary);
+    --section-mat: var(--ergo-secondary-light);
+    --section-on-mat: var(--ergo-ink-primary);
+  }
+
   .tcn-heading {
     background-color: #f1f1f1;
     padding-inline-start: 8px;
@@ -755,59 +800,44 @@ const n = `@layer tcn-reset {
   }
 
   .tcn-section > .tcn-heading {
-    background-color: #f2f4f6;
-    padding-inline-start: 8px;
-    color: rgb(51, 51, 51);
-    z-index: 4;
-  }
-
-  .tcn-section > .tcn-section > .tcn-heading {
-    background-color: #fff7f0;
-    padding-inline-start: 12px;
-    color: #395578;
-    z-index: 3;
-  }
-
-  .tcn-section > .tcn-section > .tcn-section > .tcn-heading {
-    background-color: #eef8ef;
-    padding-inline-start: 16px;
-    color: #395578;
-    z-index: 2;
-  }
-
-  .tcn-section > .tcn-section > .tcn-section > .tcn-section .tcn-heading {
-    background-color: #ecf4fb;
-    padding-inline-start: 20px;
-    color: #395578;
-    z-index: 1;
+    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: 8px;
+    padding-inline-start: var(--section-tab);
   }
 
-  .tcn-section > .tcn-section > :not(.tcn-heading, .tcn-section) {
-    padding-inline-start: 12px;
+  .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 > :not(.tcn-heading, .tcn-section) {
-    padding-inline-start: 16px;
+  .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
-    > :not(.tcn-heading, .tcn-section) {
-    padding-inline-start: 20px;
+  .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-base-carrot {
-    --carrot-size: 12px;
-    --carrot-triangle-height: calc(var(--carrot-size) / 2);
-    --carrot-triangle-width: var(--carrot-size);
-    --carrot-triangle-base: var(--carrot-triangle-height) solid transparent;
-    --carrot-triangle-peak: var(--carrot-triangle-width) solid var(--material);
+  .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;
@@ -815,27 +845,27 @@ const n = `@layer tcn-reset {
     display: inline-block;
 
     &[data-direction="top"] {
-      border-bottom: var(--carrot-triangle-peak);
-      border-left: var(--carrot-triangle-base);
-      border-right: var(--carrot-triangle-base);
+      border-bottom: var(--caret-triangle-peak);
+      border-left: var(--caret-triangle-base);
+      border-right: var(--caret-triangle-base);
     }
 
     &[data-direction="bottom"] {
-      border-top: var(--carrot-triangle-peak);
-      border-left: var(--carrot-triangle-base);
-      border-right: var(--carrot-triangle-base);
+      border-top: var(--caret-triangle-peak);
+      border-left: var(--caret-triangle-base);
+      border-right: var(--caret-triangle-base);
     }
 
     &[data-direction="start"] {
-      border-right: var(--carrot-triangle-peak);
-      border-top: var(--carrot-triangle-base);
-      border-bottom: var(--carrot-triangle-base);
+      border-right: var(--caret-triangle-peak);
+      border-top: var(--caret-triangle-base);
+      border-bottom: var(--caret-triangle-base);
     }
 
     &[data-direction="end"] {
-      border-left: var(--carrot-triangle-peak);
-      border-top: var(--carrot-triangle-base);
-      border-bottom: var(--carrot-triangle-base);
+      border-left: var(--caret-triangle-peak);
+      border-top: var(--caret-triangle-base);
+      border-bottom: var(--caret-triangle-base);
     }
   }
 }