@tcn/ui 0.7.0 → 0.8.0

package/dist/form/field_presenters/field_presenter.d.ts

@@ -1,4 +1,4 @@
-import { Signal } from '@tcn/state';
+import { Signal, IWeakPromise } from '@tcn/state';
 export interface FieldState<T> {
     label: string;
     value: T;
@@ -9,7 +9,7 @@ export interface FieldState<T> {
 }
 export interface FieldOptions<T> {
     description?: string;
-    validate?: (value: T) => Promise<void> | void;
+    validate?: (value: T) => Promise<void> | void | IWeakPromise<void>;
     validateOnChange?: boolean;
     equalityCheck?: (a: T, b: T) => boolean;
     copyInitialValue?: (value: T) => T;

package/dist/form/field_presenters/field_presenter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field_presenter.d.ts","sourceRoot":"","sources":["../../../src/form/field_presenters/field_presenter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,MAAM,EAAe,MAAM,YAAY,CAAC;AAUxE,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;IACxC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC;CACpC;AAKD,qBAAa,cAAc,CAAC,CAAC;IAC3B,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACxC,OAAO,CAAC,aAAa,CAAI;IACzB,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,kBAAkB,CAAc;IAExC,OAAO,CAAC,iBAAiB,CAAe;IACxC,OAAO,CAAC,SAAS,CAAyD;IAC1E,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,iBAAiB,CAAU;IACnC,OAAO,CAAC,YAAY,CAA4B;IAEhD,IAAI,cAAc,mDAEjB;IAED,IAAI,KAAK,kBAER;gBAEW,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,GAAE,YAAY,CAAC,CAAC,CAAM;IAmBlE,QAAQ,GAAI,OAAO,MAAM,UAKvB;IAEF,cAAc,GAAI,aAAa,MAAM,UAKnC;IAEF,QAAQ,GAAI,OAAO,CAAC,UAmBlB;IAEF,QAAQ,GAAI,OAAO,MAAM,GAAG,IAAI,UAQ9B;IAEF,QAAQ,sBAyBN;IAEF,OAAO,aAUL;IAEF,UAAU,aAER;IAEF,OAAO;CAIR"}
+{"version":3,"file":"field_presenter.d.ts","sourceRoot":"","sources":["../../../src/form/field_presenters/field_presenter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,MAAM,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAUzE,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACnE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;IACxC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC;CACpC;AAKD,qBAAa,cAAc,CAAC,CAAC;IAC3B,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACxC,OAAO,CAAC,aAAa,CAAI;IACzB,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,kBAAkB,CAAc;IAExC,OAAO,CAAC,iBAAiB,CAAe;IACxC,OAAO,CAAC,SAAS,CAA0D;IAC3E,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,iBAAiB,CAAU;IACnC,OAAO,CAAC,YAAY,CAA4B;IAEhD,IAAI,cAAc,mDAEjB;IAED,IAAI,KAAK,kBAER;gBAEW,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,GAAE,YAAY,CAAC,CAAC,CAAM;IAmBlE,QAAQ,GAAI,OAAO,MAAM,UAKvB;IAEF,cAAc,GAAI,aAAa,MAAM,UAKnC;IAEF,QAAQ,GAAI,OAAO,CAAC,UAmBlB;IAEF,QAAQ,GAAI,OAAO,MAAM,GAAG,IAAI,UAQ9B;IAEF,QAAQ,sBAyBN;IAEF,OAAO,aAUL;IAEF,UAAU,aAER;IAEF,OAAO;CAIR"}

package/dist/form/field_presenters/field_presenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"field_presenter.js","sources":["../../../src/form/field_presenters/field_presenter.ts"],"sourcesContent":["import { ISubscription, Runner, Signal, WeakPromise } from '@tcn/state';\n\nfunction fastCopy<T>(value: T): T {\n  return JSON.parse(JSON.stringify(value));\n}\n\nfunction fastDeepEqual<T>(a: T, b: T): boolean {\n  return JSON.stringify(a) === JSON.stringify(b);\n}\n\nexport interface FieldState<T> {\n  label: string;\n  value: T;\n  error: string | null;\n  hasError: boolean;\n  description?: string;\n  isDirty: boolean;\n}\n\nexport interface FieldOptions<T> {\n  description?: string;\n  validate?: (value: T) => Promise<void> | void;\n  validateOnChange?: boolean;\n  equalityCheck?: (a: T, b: T) => boolean;\n  copyInitialValue?: (value: T) => T;\n}\n\nconst noop = () => {};\nconst defaultCopy = <T>(value: T): T => fastCopy(value);\n\nexport class FieldPresenter<T> {\n  protected _state: Signal<FieldState<T>>;\n  private _initialValue: T;\n  private _equalityCheck: (a: T, b: T) => boolean;\n  private _cloneInitialValue: (v: T) => T;\n\n  private _validationRunner: Runner<void>;\n  private _validate: (value: T) => Promise<void> | void | WeakPromise<void>;\n  private _subscriptions: ISubscription<any>[];\n  private _validateOnChange: boolean;\n  private _cancelToken = 'field_presenter_cancel';\n\n  get stateBroadcast() {\n    return this._state.broadcast;\n  }\n\n  get state() {\n    return this._state.get();\n  }\n\n  constructor(label: string, value: T, options: FieldOptions<T> = {}) {\n    this._validate = options.validate || noop;\n    this._validationRunner = new Runner<void>(undefined);\n    this._subscriptions = [];\n    this._cloneInitialValue = options.copyInitialValue || defaultCopy;\n    this._initialValue = this._cloneInitialValue(value);\n    this._equalityCheck = options.equalityCheck || ((a, b) => fastDeepEqual(a, b));\n    this._state = new Signal<FieldState<T>>({\n      label,\n      value,\n      error: null,\n      hasError: false,\n      description: options.description,\n      isDirty: false,\n    });\n\n    this._validateOnChange = options.validateOnChange ?? false;\n  }\n\n  setLabel = (label: string) => {\n    this._state.transform(s => {\n      s.label = label;\n      return s;\n    });\n  };\n\n  setDescription = (description: string) => {\n    this._state.transform(s => {\n      s.description = description;\n      return s;\n    });\n  };\n\n  setValue = (value: T) => {\n    if (this._equalityCheck(this.state.value, value)) {\n      return;\n    }\n\n    this._state.transform(s => {\n      if (this._validateOnChange) {\n        s.error = null;\n        s.hasError = false;\n      }\n\n      s.value = value;\n      s.isDirty = !this._equalityCheck(value, this._initialValue);\n      return s;\n    });\n\n    if (this._validateOnChange) {\n      this.validate();\n    }\n  };\n\n  setError = (error: string | null) => {\n    this._validationRunner.cancel(this._cancelToken);\n\n    this._state.transform(s => {\n      s.error = error;\n      s.hasError = error != null;\n      return s;\n    });\n  };\n\n  validate = async () => {\n    try {\n      this._validationRunner.cancel(this._cancelToken);\n      await this._validationRunner.execute(() => {\n        return this._validate(this.state.value);\n      });\n\n      this._state.transform(s => {\n        s.error = null;\n        s.hasError = false;\n        return s;\n      });\n    } catch (e: any) {\n      const message = e.message || e.toString();\n      if (message === this._cancelToken) {\n        return;\n      }\n\n      this._state.transform(s => {\n        s.error = message;\n        s.hasError = true;\n        return s;\n      });\n      throw e;\n    }\n  };\n\n  upgrade = () => {\n    if (this._equalityCheck(this.state.value, this._initialValue)) {\n      return;\n    }\n\n    this._initialValue = this._cloneInitialValue(this.state.value);\n    this._state.transform(s => {\n      s.isDirty = false;\n      return s;\n    });\n  };\n\n  clearError = () => {\n    this.setError(null);\n  };\n\n  dispose() {\n    this._validationRunner.cancel(this._cancelToken);\n    this._subscriptions.forEach(s => s.unsubscribe());\n  }\n}\n"],"names":["fastCopy","value","fastDeepEqual","b","noop","defaultCopy","FieldPresenter","label","options","Runner","a","Signal","s","description","error","e","message"],"mappings":";AAEA,SAASA,EAAYC,GAAa;AAChC,SAAO,KAAK,MAAM,KAAK,UAAUA,CAAK,CAAC;AACzC;AAEA,SAASC,EAAiB,GAAMC,GAAe;AAC7C,SAAO,KAAK,UAAU,CAAC,MAAM,KAAK,UAAUA,CAAC;AAC/C;AAmBA,MAAMC,IAAO,MAAM;AAAC,GACdC,IAAc,CAAIJ,MAAgBD,EAASC,CAAK;AAE/C,MAAMK,EAAkB;AAAA,EACnB;AAAA,EACF;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EAEvB,IAAI,iBAAiB;AACnB,WAAO,KAAK,OAAO;AAAA,EACrB;AAAA,EAEA,IAAI,QAAQ;AACV,WAAO,KAAK,OAAO,IAAA;AAAA,EACrB;AAAA,EAEA,YAAYC,GAAeN,GAAUO,IAA2B,CAAA,GAAI;AAClE,SAAK,YAAYA,EAAQ,YAAYJ,GACrC,KAAK,oBAAoB,IAAIK,EAAa,MAAS,GACnD,KAAK,iBAAiB,CAAA,GACtB,KAAK,qBAAqBD,EAAQ,oBAAoBH,GACtD,KAAK,gBAAgB,KAAK,mBAAmBJ,CAAK,GAClD,KAAK,iBAAiBO,EAAQ,kBAAkB,CAACE,GAAGP,MAAMD,EAAcQ,GAAGP,CAAC,IAC5E,KAAK,SAAS,IAAIQ,EAAsB;AAAA,MACtC,OAAAJ;AAAA,MACA,OAAAN;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,MACV,aAAaO,EAAQ;AAAA,MACrB,SAAS;AAAA,IAAA,CACV,GAED,KAAK,oBAAoBA,EAAQ,oBAAoB;AAAA,EACvD;AAAA,EAEA,WAAW,CAACD,MAAkB;AAC5B,SAAK,OAAO,UAAU,CAAAK,OACpBA,EAAE,QAAQL,GACHK,EACR;AAAA,EACH;AAAA,EAEA,iBAAiB,CAACC,MAAwB;AACxC,SAAK,OAAO,UAAU,CAAAD,OACpBA,EAAE,cAAcC,GACTD,EACR;AAAA,EACH;AAAA,EAEA,WAAW,CAACX,MAAa;AACvB,IAAI,KAAK,eAAe,KAAK,MAAM,OAAOA,CAAK,MAI/C,KAAK,OAAO,UAAU,CAAAW,OAChB,KAAK,sBACPA,EAAE,QAAQ,MACVA,EAAE,WAAW,KAGfA,EAAE,QAAQX,GACVW,EAAE,UAAU,CAAC,KAAK,eAAeX,GAAO,KAAK,aAAa,GACnDW,EACR,GAEG,KAAK,qBACP,KAAK,SAAA;AAAA,EAET;AAAA,EAEA,WAAW,CAACE,MAAyB;AACnC,SAAK,kBAAkB,OAAO,KAAK,YAAY,GAE/C,KAAK,OAAO,UAAU,CAAAF,OACpBA,EAAE,QAAQE,GACVF,EAAE,WAAWE,KAAS,MACfF,EACR;AAAA,EACH;AAAA,EAEA,WAAW,YAAY;AACrB,QAAI;AACF,WAAK,kBAAkB,OAAO,KAAK,YAAY,GAC/C,MAAM,KAAK,kBAAkB,QAAQ,MAC5B,KAAK,UAAU,KAAK,MAAM,KAAK,CACvC,GAED,KAAK,OAAO,UAAU,CAAAA,OACpBA,EAAE,QAAQ,MACVA,EAAE,WAAW,IACNA,EACR;AAAA,IACH,SAASG,GAAQ;AACf,YAAMC,IAAUD,EAAE,WAAWA,EAAE,SAAA;AAC/B,UAAIC,MAAY,KAAK;AACnB;AAGF,iBAAK,OAAO,UAAU,CAAAJ,OACpBA,EAAE,QAAQI,GACVJ,EAAE,WAAW,IACNA,EACR,GACKG;AAAA,IACR;AAAA,EACF;AAAA,EAEA,UAAU,MAAM;AACd,IAAI,KAAK,eAAe,KAAK,MAAM,OAAO,KAAK,aAAa,MAI5D,KAAK,gBAAgB,KAAK,mBAAmB,KAAK,MAAM,KAAK,GAC7D,KAAK,OAAO,UAAU,CAAAH,OACpBA,EAAE,UAAU,IACLA,EACR;AAAA,EACH;AAAA,EAEA,aAAa,MAAM;AACjB,SAAK,SAAS,IAAI;AAAA,EACpB;AAAA,EAEA,UAAU;AACR,SAAK,kBAAkB,OAAO,KAAK,YAAY,GAC/C,KAAK,eAAe,QAAQ,CAAAA,MAAKA,EAAE,aAAa;AAAA,EAClD;AACF;"}
+{"version":3,"file":"field_presenter.js","sources":["../../../src/form/field_presenters/field_presenter.ts"],"sourcesContent":["import { ISubscription, Runner, Signal, IWeakPromise } from '@tcn/state';\n\nfunction fastCopy<T>(value: T): T {\n  return JSON.parse(JSON.stringify(value));\n}\n\nfunction fastDeepEqual<T>(a: T, b: T): boolean {\n  return JSON.stringify(a) === JSON.stringify(b);\n}\n\nexport interface FieldState<T> {\n  label: string;\n  value: T;\n  error: string | null;\n  hasError: boolean;\n  description?: string;\n  isDirty: boolean;\n}\n\nexport interface FieldOptions<T> {\n  description?: string;\n  validate?: (value: T) => Promise<void> | void | IWeakPromise<void>;\n  validateOnChange?: boolean;\n  equalityCheck?: (a: T, b: T) => boolean;\n  copyInitialValue?: (value: T) => T;\n}\n\nconst noop = () => {};\nconst defaultCopy = <T>(value: T): T => fastCopy(value);\n\nexport class FieldPresenter<T> {\n  protected _state: Signal<FieldState<T>>;\n  private _initialValue: T;\n  private _equalityCheck: (a: T, b: T) => boolean;\n  private _cloneInitialValue: (v: T) => T;\n\n  private _validationRunner: Runner<void>;\n  private _validate: (value: T) => Promise<void> | void | IWeakPromise<void>;\n  private _subscriptions: ISubscription<any>[];\n  private _validateOnChange: boolean;\n  private _cancelToken = 'field_presenter_cancel';\n\n  get stateBroadcast() {\n    return this._state.broadcast;\n  }\n\n  get state() {\n    return this._state.get();\n  }\n\n  constructor(label: string, value: T, options: FieldOptions<T> = {}) {\n    this._validate = options.validate || noop;\n    this._validationRunner = new Runner<void>(undefined);\n    this._subscriptions = [];\n    this._cloneInitialValue = options.copyInitialValue || defaultCopy;\n    this._initialValue = this._cloneInitialValue(value);\n    this._equalityCheck = options.equalityCheck || ((a, b) => fastDeepEqual(a, b));\n    this._state = new Signal<FieldState<T>>({\n      label,\n      value,\n      error: null,\n      hasError: false,\n      description: options.description,\n      isDirty: false,\n    });\n\n    this._validateOnChange = options.validateOnChange ?? false;\n  }\n\n  setLabel = (label: string) => {\n    this._state.transform(s => {\n      s.label = label;\n      return s;\n    });\n  };\n\n  setDescription = (description: string) => {\n    this._state.transform(s => {\n      s.description = description;\n      return s;\n    });\n  };\n\n  setValue = (value: T) => {\n    if (this._equalityCheck(this.state.value, value)) {\n      return;\n    }\n\n    this._state.transform(s => {\n      if (this._validateOnChange) {\n        s.error = null;\n        s.hasError = false;\n      }\n\n      s.value = value;\n      s.isDirty = !this._equalityCheck(value, this._initialValue);\n      return s;\n    });\n\n    if (this._validateOnChange) {\n      this.validate();\n    }\n  };\n\n  setError = (error: string | null) => {\n    this._validationRunner.cancel(this._cancelToken);\n\n    this._state.transform(s => {\n      s.error = error;\n      s.hasError = error != null;\n      return s;\n    });\n  };\n\n  validate = async () => {\n    try {\n      this._validationRunner.cancel(this._cancelToken);\n      await this._validationRunner.execute(() => {\n        return this._validate(this.state.value);\n      });\n\n      this._state.transform(s => {\n        s.error = null;\n        s.hasError = false;\n        return s;\n      });\n    } catch (e: any) {\n      const message = e.message || e.toString();\n      if (message === this._cancelToken) {\n        return;\n      }\n\n      this._state.transform(s => {\n        s.error = message;\n        s.hasError = true;\n        return s;\n      });\n      throw e;\n    }\n  };\n\n  upgrade = () => {\n    if (this._equalityCheck(this.state.value, this._initialValue)) {\n      return;\n    }\n\n    this._initialValue = this._cloneInitialValue(this.state.value);\n    this._state.transform(s => {\n      s.isDirty = false;\n      return s;\n    });\n  };\n\n  clearError = () => {\n    this.setError(null);\n  };\n\n  dispose() {\n    this._validationRunner.cancel(this._cancelToken);\n    this._subscriptions.forEach(s => s.unsubscribe());\n  }\n}\n"],"names":["fastCopy","value","fastDeepEqual","b","noop","defaultCopy","FieldPresenter","label","options","Runner","a","Signal","s","description","error","e","message"],"mappings":";AAEA,SAASA,EAAYC,GAAa;AAChC,SAAO,KAAK,MAAM,KAAK,UAAUA,CAAK,CAAC;AACzC;AAEA,SAASC,EAAiB,GAAMC,GAAe;AAC7C,SAAO,KAAK,UAAU,CAAC,MAAM,KAAK,UAAUA,CAAC;AAC/C;AAmBA,MAAMC,IAAO,MAAM;AAAC,GACdC,IAAc,CAAIJ,MAAgBD,EAASC,CAAK;AAE/C,MAAMK,EAAkB;AAAA,EACnB;AAAA,EACF;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EAEvB,IAAI,iBAAiB;AACnB,WAAO,KAAK,OAAO;AAAA,EACrB;AAAA,EAEA,IAAI,QAAQ;AACV,WAAO,KAAK,OAAO,IAAA;AAAA,EACrB;AAAA,EAEA,YAAYC,GAAeN,GAAUO,IAA2B,CAAA,GAAI;AAClE,SAAK,YAAYA,EAAQ,YAAYJ,GACrC,KAAK,oBAAoB,IAAIK,EAAa,MAAS,GACnD,KAAK,iBAAiB,CAAA,GACtB,KAAK,qBAAqBD,EAAQ,oBAAoBH,GACtD,KAAK,gBAAgB,KAAK,mBAAmBJ,CAAK,GAClD,KAAK,iBAAiBO,EAAQ,kBAAkB,CAACE,GAAGP,MAAMD,EAAcQ,GAAGP,CAAC,IAC5E,KAAK,SAAS,IAAIQ,EAAsB;AAAA,MACtC,OAAAJ;AAAA,MACA,OAAAN;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,MACV,aAAaO,EAAQ;AAAA,MACrB,SAAS;AAAA,IAAA,CACV,GAED,KAAK,oBAAoBA,EAAQ,oBAAoB;AAAA,EACvD;AAAA,EAEA,WAAW,CAACD,MAAkB;AAC5B,SAAK,OAAO,UAAU,CAAAK,OACpBA,EAAE,QAAQL,GACHK,EACR;AAAA,EACH;AAAA,EAEA,iBAAiB,CAACC,MAAwB;AACxC,SAAK,OAAO,UAAU,CAAAD,OACpBA,EAAE,cAAcC,GACTD,EACR;AAAA,EACH;AAAA,EAEA,WAAW,CAACX,MAAa;AACvB,IAAI,KAAK,eAAe,KAAK,MAAM,OAAOA,CAAK,MAI/C,KAAK,OAAO,UAAU,CAAAW,OAChB,KAAK,sBACPA,EAAE,QAAQ,MACVA,EAAE,WAAW,KAGfA,EAAE,QAAQX,GACVW,EAAE,UAAU,CAAC,KAAK,eAAeX,GAAO,KAAK,aAAa,GACnDW,EACR,GAEG,KAAK,qBACP,KAAK,SAAA;AAAA,EAET;AAAA,EAEA,WAAW,CAACE,MAAyB;AACnC,SAAK,kBAAkB,OAAO,KAAK,YAAY,GAE/C,KAAK,OAAO,UAAU,CAAAF,OACpBA,EAAE,QAAQE,GACVF,EAAE,WAAWE,KAAS,MACfF,EACR;AAAA,EACH;AAAA,EAEA,WAAW,YAAY;AACrB,QAAI;AACF,WAAK,kBAAkB,OAAO,KAAK,YAAY,GAC/C,MAAM,KAAK,kBAAkB,QAAQ,MAC5B,KAAK,UAAU,KAAK,MAAM,KAAK,CACvC,GAED,KAAK,OAAO,UAAU,CAAAA,OACpBA,EAAE,QAAQ,MACVA,EAAE,WAAW,IACNA,EACR;AAAA,IACH,SAASG,GAAQ;AACf,YAAMC,IAAUD,EAAE,WAAWA,EAAE,SAAA;AAC/B,UAAIC,MAAY,KAAK;AACnB;AAGF,iBAAK,OAAO,UAAU,CAAAJ,OACpBA,EAAE,QAAQI,GACVJ,EAAE,WAAW,IACNA,EACR,GACKG;AAAA,IACR;AAAA,EACF;AAAA,EAEA,UAAU,MAAM;AACd,IAAI,KAAK,eAAe,KAAK,MAAM,OAAO,KAAK,aAAa,MAI5D,KAAK,gBAAgB,KAAK,mBAAmB,KAAK,MAAM,KAAK,GAC7D,KAAK,OAAO,UAAU,CAAAH,OACpBA,EAAE,UAAU,IACLA,EACR;AAAA,EACH;AAAA,EAEA,aAAa,MAAM;AACjB,SAAK,SAAS,IAAI;AAAA,EACpB;AAAA,EAEA,UAAU;AACR,SAAK,kBAAkB,OAAO,KAAK,YAAY,GAC/C,KAAK,eAAe,QAAQ,CAAAA,MAAKA,EAAE,aAAa;AAAA,EAClD;AACF;"}

package/dist/navigation/tabs/primitives/tabs_list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs_list.d.ts","sourceRoot":"","sources":["../../../../src/navigation/tabs/primitives/tabs_list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAItE,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC;AAExC,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAYzD,CAAC;AAEF,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,4IAcnB,CAAC"}
+{"version":3,"file":"tabs_list.d.ts","sourceRoot":"","sources":["../../../../src/navigation/tabs/primitives/tabs_list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACjF,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAItE,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC;AA+BxC,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,iBAAiB,CAAC,aAAa,CAAC,CA2BzD,CAAC;AAEF,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,4IAcnB,CAAC"}

package/dist/navigation/tabs/primitives/tabs_list.js

@@ -1,29 +1,69 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { HStack as n } from "../../../stacks/h_stack.js";
-import e from "clsx";
-import { Toggle as f } from "../../../actions/toggle/toggle.js";
-const T = ({
-  children: t,
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as m, useCallback as f } from "react";
+import { HStack as u } from "../../../stacks/h_stack.js";
+import l from "clsx";
+import { Toggle as b } from "../../../actions/toggle/toggle.js";
+const g = (e) => {
+  const r = Array.from(e.currentTarget.querySelectorAll(':scope > [role="tab"]')), o = e.currentTarget.querySelector(":focus"), a = o ? r.indexOf(o) : -1;
+  if (a === -1) return;
+  let t = 0;
+  switch (e.key) {
+    case "ArrowRight":
+      t = (a + 1) % r.length;
+      break;
+    case "ArrowLeft":
+      t = (a - 1 + r.length) % r.length;
+      break;
+    case "Home":
+      t = 0;
+      break;
+    case "End":
+      t = r.length - 1;
+      break;
+    default:
+      return;
+  }
+  e.preventDefault(), e.stopPropagation(), r[t].focus();
+}, x = ({
+  children: e,
   className: r,
-  role: m = "tablist",
-  as: o = "menu",
-  ...a
-}) => /* @__PURE__ */ s(n, { as: o, role: m, className: e("tcn-tabs-list", r), ...a, children: t }), g = c(
-  ({ children: t, className: r, role: m = "tab", selected: o = !1, ...a }, i) => /* @__PURE__ */ s(
-    f,
+  role: o = "tablist",
+  as: a = "menu",
+  onKeyDown: t,
+  ...s
+}) => {
+  const i = f(
+    (c) => {
+      g(c), t && t(c);
+    },
+    [t]
+  );
+  return /* @__PURE__ */ n(
+    u,
     {
-      ref: i,
-      role: m,
-      className: e(r, "tcn-interactive", "tcn-tab-item"),
-      selected: o,
-      ...a,
-      children: t
+      onKeyDown: i,
+      as: a,
+      role: o,
+      className: l("tcn-tabs-list", r),
+      ...s,
+      children: e
+    }
+  );
+}, w = m(
+  ({ children: e, className: r, role: o = "tab", selected: a = !1, ...t }, s) => /* @__PURE__ */ n(
+    b,
+    {
+      ref: s,
+      role: o,
+      className: l(r, "tcn-interactive", "tcn-tab-item"),
+      selected: a,
+      ...t,
+      children: e
     }
   )
 );
 export {
-  g as TabItem,
-  T as TabsList
+  w as TabItem,
+  x as TabsList
 };
 //# sourceMappingURL=tabs_list.js.map

package/dist/navigation/tabs/primitives/tabs_list.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs_list.js","sources":["../../../../src/navigation/tabs/primitives/tabs_list.tsx"],"sourcesContent":["import { forwardRef, type FC, type PropsWithChildren } from 'react';\nimport { type BaseButtonProps } from '../../../actions/index.js';\nimport { HStack, type HStackProps } from '../../../stacks/h_stack.js';\nimport clsx from 'clsx';\nimport { Toggle } from '../../../actions/toggle/toggle.js';\n\nexport type TabsListProps = HStackProps;\n\nexport const TabsList: FC<PropsWithChildren<TabsListProps>> = ({\n  children,\n  className,\n  role = 'tablist',\n  as = 'menu',\n  ...props\n}) => {\n  return (\n    <HStack as={as} role={role} className={clsx('tcn-tabs-list', className)} {...props}>\n      {children}\n    </HStack>\n  );\n};\n\nexport interface TabItemProps extends Omit<BaseButtonProps, 'hierarchy'> {\n  selected?: boolean;\n}\n\nexport const TabItem = forwardRef<HTMLButtonElement, PropsWithChildren<TabItemProps>>(\n  ({ children, className, role = 'tab', selected = false, ...props }, ref) => {\n    return (\n      <Toggle\n        ref={ref}\n        role={role}\n        className={clsx(className, 'tcn-interactive', 'tcn-tab-item')}\n        selected={selected}\n        {...props}\n      >\n        {children}\n      </Toggle>\n    );\n  }\n);\n"],"names":["TabsList","children","className","role","as","props","jsx","HStack","clsx","TabItem","forwardRef","selected","ref","Toggle"],"mappings":";;;;;AAQO,MAAMA,IAAiD,CAAC;AAAA,EAC7D,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,IAAAC,IAAK;AAAA,EACL,GAAGC;AACL,MAEI,gBAAAC,EAACC,GAAA,EAAO,IAAAH,GAAQ,MAAAD,GAAY,WAAWK,EAAK,iBAAiBN,CAAS,GAAI,GAAGG,GAC1E,UAAAJ,EAAA,CACH,GAQSQ,IAAUC;AAAA,EACrB,CAAC,EAAE,UAAAT,GAAU,WAAAC,GAAW,MAAAC,IAAO,OAAO,UAAAQ,IAAW,IAAO,GAAGN,EAAA,GAASO,MAEhE,gBAAAN;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAAT;AAAA,MACA,WAAWK,EAAKN,GAAW,mBAAmB,cAAc;AAAA,MAC5D,UAAAS;AAAA,MACC,GAAGN;AAAA,MAEH,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAIT;"}
+{"version":3,"file":"tabs_list.js","sources":["../../../../src/navigation/tabs/primitives/tabs_list.tsx"],"sourcesContent":["import { forwardRef, useCallback, type FC, type PropsWithChildren } from 'react';\nimport { type BaseButtonProps } from '../../../actions/index.js';\nimport { HStack, type HStackProps } from '../../../stacks/h_stack.js';\nimport clsx from 'clsx';\nimport { Toggle } from '../../../actions/toggle/toggle.js';\n\nexport type TabsListProps = HStackProps;\n\nconst navigateTabs = (event: React.KeyboardEvent<HTMLDivElement>) => {\n  const tabs = Array.from(event.currentTarget.querySelectorAll(':scope > [role=\"tab\"]'));\n  const currentTab = event.currentTarget.querySelector(':focus');\n  const currentIndex = currentTab ? tabs.indexOf(currentTab) : -1;\n  if (currentIndex === -1) return; // Exit if the focused element is not a tab\n  let newIndex = 0;\n\n  switch (event.key) {\n    case 'ArrowRight':\n      newIndex = (currentIndex + 1) % tabs.length;\n      break;\n    case 'ArrowLeft':\n      newIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n      break;\n    case 'Home':\n      newIndex = 0;\n      break;\n    case 'End':\n      newIndex = tabs.length - 1;\n      break;\n    default:\n      return; // Exit if the key is not recognized\n  }\n\n  event.preventDefault();\n  event.stopPropagation();\n  tabs[newIndex]['focus']();\n};\n\nexport const TabsList: FC<PropsWithChildren<TabsListProps>> = ({\n  children,\n  className,\n  role = 'tablist',\n  as = 'menu',\n  onKeyDown,\n  ...props\n}) => {\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      navigateTabs(event);\n      onKeyDown && onKeyDown(event);\n    },\n    [onKeyDown]\n  );\n\n  return (\n    <HStack\n      onKeyDown={handleKeyDown}\n      as={as}\n      role={role}\n      className={clsx('tcn-tabs-list', className)}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n};\n\nexport interface TabItemProps extends Omit<BaseButtonProps, 'hierarchy'> {\n  selected?: boolean;\n}\n\nexport const TabItem = forwardRef<HTMLButtonElement, PropsWithChildren<TabItemProps>>(\n  ({ children, className, role = 'tab', selected = false, ...props }, ref) => {\n    return (\n      <Toggle\n        ref={ref}\n        role={role}\n        className={clsx(className, 'tcn-interactive', 'tcn-tab-item')}\n        selected={selected}\n        {...props}\n      >\n        {children}\n      </Toggle>\n    );\n  }\n);\n"],"names":["navigateTabs","event","tabs","currentTab","currentIndex","newIndex","TabsList","children","className","role","as","onKeyDown","props","handleKeyDown","useCallback","jsx","HStack","clsx","TabItem","forwardRef","selected","ref","Toggle"],"mappings":";;;;;AAQA,MAAMA,IAAe,CAACC,MAA+C;AACnE,QAAMC,IAAO,MAAM,KAAKD,EAAM,cAAc,iBAAiB,uBAAuB,CAAC,GAC/EE,IAAaF,EAAM,cAAc,cAAc,QAAQ,GACvDG,IAAeD,IAAaD,EAAK,QAAQC,CAAU,IAAI;AAC7D,MAAIC,MAAiB,GAAI;AACzB,MAAIC,IAAW;AAEf,UAAQJ,EAAM,KAAA;AAAA,IACZ,KAAK;AACH,MAAAI,KAAYD,IAAe,KAAKF,EAAK;AACrC;AAAA,IACF,KAAK;AACH,MAAAG,KAAYD,IAAe,IAAIF,EAAK,UAAUA,EAAK;AACnD;AAAA,IACF,KAAK;AACH,MAAAG,IAAW;AACX;AAAA,IACF,KAAK;AACH,MAAAA,IAAWH,EAAK,SAAS;AACzB;AAAA,IACF;AACE;AAAA,EAAA;AAGJ,EAAAD,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNC,EAAKG,CAAQ,EAAE,MAAO;AACxB,GAEaC,IAAiD,CAAC;AAAA,EAC7D,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,IAAAC,IAAK;AAAA,EACL,WAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAgBC;AAAA,IACpB,CAACb,MAA+C;AAC9C,MAAAD,EAAaC,CAAK,GAClBU,KAAaA,EAAUV,CAAK;AAAA,IAC9B;AAAA,IACA,CAACU,CAAS;AAAA,EAAA;AAGZ,SACE,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWH;AAAA,MACX,IAAAH;AAAA,MACA,MAAAD;AAAA,MACA,WAAWQ,EAAK,iBAAiBT,CAAS;AAAA,MACzC,GAAGI;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP,GAMaW,IAAUC;AAAA,EACrB,CAAC,EAAE,UAAAZ,GAAU,WAAAC,GAAW,MAAAC,IAAO,OAAO,UAAAW,IAAW,IAAO,GAAGR,EAAA,GAASS,MAEhE,gBAAAN;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAAZ;AAAA,MACA,WAAWQ,EAAKT,GAAW,mBAAmB,cAAc;AAAA,MAC5D,UAAAY;AAAA,MACC,GAAGR;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAIT;"}

package/dist/navigation/tabs/state/link/tab_link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab_link.d.ts","sourceRoot":"","sources":["../../../../../src/navigation/tabs/state/link/tab_link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAK3E,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,OAAO,CAAC,EAC9C,eAAe;CAAG;AAEtB,eAAO,MAAM,OAAO,4IA8BnB,CAAC"}
+{"version":3,"file":"tab_link.d.ts","sourceRoot":"","sources":["../../../../../src/navigation/tabs/state/link/tab_link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAK3E,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,OAAO,CAAC,EAC9C,eAAe;CAAG;AAEtB,eAAO,MAAM,OAAO,4IAiCnB,CAAC"}

package/dist/navigation/tabs/state/link/tab_link.js

@@ -1,34 +1,37 @@
-import { jsx as W } from "react/jsx-runtime";
-import { forwardRef as b, useCallback as x } from "react";
+import { jsx as k } from "react/jsx-runtime";
+import { forwardRef as x, useCallback as W } from "react";
 import { TabItem as l } from "../../primitives/tabs_list.js";
 import "../../../../utils/click_away_listener.js";
 import "../../../../utils/focus_redirect.js";
 import "../../../../utils/scroll_away_listener.js";
-import { useForkRef as T } from "../../../../utils/hooks/use_fork_ref.js";
+import { useForkRef as I } from "../../../../utils/hooks/use_fork_ref.js";
 import "../../../../utils/hooks/use_resize_observer.js";
 import "../../../../utils/dnd/context.js";
 import "clsx";
 import "../../../../draggable.module-BgelQsuJ.js";
-import { useTabs as u } from "../context.js";
+import { useTabs as T } from "../context.js";
 import { useTabLink as C } from "./use_tab_link.js";
-const D = b(
-  ({ children: r, value: o, onClick: i, minWidth: m, maxWidth: e, ...n }, p) => {
-    const { ref: s, isMatch: a } = C(o), t = u(), c = T(s, p), f = x(
-      (k) => {
-        t.onChange?.(o), i?.(k);
+const D = x(
+  ({ children: m, value: t, onClick: o, minWidth: n, maxWidth: e, id: M, ...a }, p) => {
+    const { ref: s, isMatch: r } = C(t), i = T(), c = I(s, p), d = W(
+      (b) => {
+        i.onChange?.(t), o?.(b);
       },
-      [t, o, i]
-    ), d = t.minItemWidth ?? m, h = t.maxItemWidth ?? e;
-    return /* @__PURE__ */ W(
+      [i, t, o]
+    ), f = i.minItemWidth ?? n, h = i.maxItemWidth ?? e;
+    return /* @__PURE__ */ k(
       l,
       {
         ref: c,
-        selected: a,
-        onClick: f,
-        minWidth: d,
+        selected: r,
+        onClick: d,
+        minWidth: f,
         maxWidth: h,
-        ...n,
-        children: r
+        id: `tab-${t}`,
+        "aria-controls": `tabpanel-${t}`,
+        tabIndex: r ? 0 : -1,
+        ...a,
+        children: m
       }
     );
   }

package/dist/navigation/tabs/state/link/tab_link.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab_link.js","sources":["../../../../../src/navigation/tabs/state/link/tab_link.tsx"],"sourcesContent":["import { forwardRef, useCallback, type PropsWithChildren } from 'react';\nimport { TabItem, type TabItemProps } from '../../primitives/tabs_list.js';\nimport { useForkRef } from '../../../../utils/index.js';\nimport { useTabs } from '../context.js';\nimport { useTabLink } from './use_tab_link.js';\n\nexport interface TabLinkOwnProps {\n  value: string;\n}\n\nexport interface TabLinkProps\n  extends Omit<TabItemProps, 'selected' | 'value'>,\n    TabLinkOwnProps {}\n\nexport const TabLink = forwardRef<HTMLButtonElement, PropsWithChildren<TabLinkProps>>(\n  ({ children, value, onClick, minWidth, maxWidth, ...props }, forwardedRef) => {\n    const { ref: internalRef, isMatch } = useTabLink(value);\n    const state = useTabs();\n    const ref = useForkRef(internalRef, forwardedRef);\n\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        state.onChange?.(value);\n        onClick?.(event);\n      },\n      [state, value, onClick]\n    );\n\n    const pickMinWidth = state.minItemWidth ?? minWidth;\n    const pickMaxWidth = state.maxItemWidth ?? maxWidth;\n\n    return (\n      <TabItem\n        ref={ref}\n        selected={isMatch}\n        onClick={handleClick}\n        minWidth={pickMinWidth}\n        maxWidth={pickMaxWidth}\n        {...props}\n      >\n        {children}\n      </TabItem>\n    );\n  }\n);\n"],"names":["TabLink","forwardRef","children","value","onClick","minWidth","maxWidth","props","forwardedRef","internalRef","isMatch","useTabLink","state","useTabs","ref","useForkRef","handleClick","useCallback","event","pickMinWidth","pickMaxWidth","jsx","TabItem"],"mappings":";;;;;;;;;;;;;AAcO,MAAMA,IAAUC;AAAA,EACrB,CAAC,EAAE,UAAAC,GAAU,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAAiB;AAC5E,UAAM,EAAE,KAAKC,GAAa,SAAAC,EAAA,IAAYC,EAAWR,CAAK,GAChDS,IAAQC,EAAA,GACRC,IAAMC,EAAWN,GAAaD,CAAY,GAE1CQ,IAAcC;AAAA,MAClB,CAACC,MAA+C;AAC9C,QAAAN,EAAM,WAAWT,CAAK,GACtBC,IAAUc,CAAK;AAAA,MACjB;AAAA,MACA,CAACN,GAAOT,GAAOC,CAAO;AAAA,IAAA,GAGlBe,IAAeP,EAAM,gBAAgBP,GACrCe,IAAeR,EAAM,gBAAgBN;AAE3C,WACE,gBAAAe;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,UAAUJ;AAAA,QACV,SAASM;AAAA,QACT,UAAUG;AAAA,QACV,UAAUC;AAAA,QACT,GAAGb;AAAA,QAEH,UAAAL;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"tab_link.js","sources":["../../../../../src/navigation/tabs/state/link/tab_link.tsx"],"sourcesContent":["import { forwardRef, useCallback, type PropsWithChildren } from 'react';\nimport { TabItem, type TabItemProps } from '../../primitives/tabs_list.js';\nimport { useForkRef } from '../../../../utils/index.js';\nimport { useTabs } from '../context.js';\nimport { useTabLink } from './use_tab_link.js';\n\nexport interface TabLinkOwnProps {\n  value: string;\n}\n\nexport interface TabLinkProps\n  extends Omit<TabItemProps, 'selected' | 'value'>,\n    TabLinkOwnProps {}\n\nexport const TabLink = forwardRef<HTMLButtonElement, PropsWithChildren<TabLinkProps>>(\n  ({ children, value, onClick, minWidth, maxWidth, id, ...props }, forwardedRef) => {\n    const { ref: internalRef, isMatch } = useTabLink(value);\n    const state = useTabs();\n    const ref = useForkRef(internalRef, forwardedRef);\n\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        state.onChange?.(value);\n        onClick?.(event);\n      },\n      [state, value, onClick]\n    );\n\n    const pickMinWidth = state.minItemWidth ?? minWidth;\n    const pickMaxWidth = state.maxItemWidth ?? maxWidth;\n\n    return (\n      <TabItem\n        ref={ref}\n        selected={isMatch}\n        onClick={handleClick}\n        minWidth={pickMinWidth}\n        maxWidth={pickMaxWidth}\n        id={`tab-${value}`}\n        aria-controls={`tabpanel-${value}`}\n        tabIndex={isMatch ? 0 : -1}\n        {...props}\n      >\n        {children}\n      </TabItem>\n    );\n  }\n);\n"],"names":["TabLink","forwardRef","children","value","onClick","minWidth","maxWidth","id","props","forwardedRef","internalRef","isMatch","useTabLink","state","useTabs","ref","useForkRef","handleClick","useCallback","event","pickMinWidth","pickMaxWidth","jsx","TabItem"],"mappings":";;;;;;;;;;;;;AAcO,MAAMA,IAAUC;AAAA,EACrB,CAAC,EAAE,UAAAC,GAAU,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,UAAAC,GAAU,IAAAC,GAAI,GAAGC,EAAA,GAASC,MAAiB;AAChF,UAAM,EAAE,KAAKC,GAAa,SAAAC,EAAA,IAAYC,EAAWT,CAAK,GAChDU,IAAQC,EAAA,GACRC,IAAMC,EAAWN,GAAaD,CAAY,GAE1CQ,IAAcC;AAAA,MAClB,CAACC,MAA+C;AAC9C,QAAAN,EAAM,WAAWV,CAAK,GACtBC,IAAUe,CAAK;AAAA,MACjB;AAAA,MACA,CAACN,GAAOV,GAAOC,CAAO;AAAA,IAAA,GAGlBgB,IAAeP,EAAM,gBAAgBR,GACrCgB,IAAeR,EAAM,gBAAgBP;AAE3C,WACE,gBAAAgB;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,UAAUJ;AAAA,QACV,SAASM;AAAA,QACT,UAAUG;AAAA,QACV,UAAUC;AAAA,QACV,IAAI,OAAOlB,CAAK;AAAA,QAChB,iBAAe,YAAYA,CAAK;AAAA,QAChC,UAAUQ,IAAU,IAAI;AAAA,QACvB,GAAGH;AAAA,QAEH,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/navigation/tabs/state/tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/navigation/tabs/state/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGnD,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAI/C,CAAC"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/navigation/tabs/state/tab.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGnD,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAa/C,CAAC"}

package/dist/navigation/tabs/state/tab.js

@@ -1,6 +1,11 @@
-import { useTabs as r } from "./context.js";
-const n = ({ value: t, children: e }) => r().value !== t ? null : e;
+import e from "react";
+import { useTabs as a } from "./context.js";
+const m = ({ value: o, children: t }) => a().value !== o ? null : t && e.isValidElement(t) ? e.cloneElement(t, {
+  ...t.props,
+  id: t.props.id ?? `tabpanel-${o}`,
+  role: t.props.role ?? "tabpanel"
+}) : t;
 export {
-  n as Tab
+  m as Tab
 };
 //# sourceMappingURL=tab.js.map

package/dist/navigation/tabs/state/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../../../src/navigation/tabs/state/tab.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from 'react';\nimport { useTabs } from './context.js';\n\nexport interface TabProps {\n  value: string;\n}\n\nexport const Tab: FC<PropsWithChildren<TabProps>> = ({ value, children }) => {\n  const state = useTabs();\n  if (state.value !== value) return null;\n  return children;\n};\n"],"names":["Tab","value","children","useTabs"],"mappings":";AAOO,MAAMA,IAAuC,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAC9CC,EAAA,EACJ,UAAUF,IAAc,OAC3BC;"}
+{"version":3,"file":"tab.js","sources":["../../../../src/navigation/tabs/state/tab.tsx"],"sourcesContent":["import React from 'react';\nimport type { FC, PropsWithChildren } from 'react';\nimport { useTabs } from './context.js';\n\nexport interface TabProps {\n  value: string;\n}\n\nexport const Tab: FC<PropsWithChildren<TabProps>> = ({ value, children }) => {\n  const state = useTabs();\n  if (state.value !== value) return null;\n\n  if (children && React.isValidElement(children)) {\n    return React.cloneElement(children, {\n      ...children.props,\n      id: children.props.id ?? `tabpanel-${value}`,\n      role: children.props.role ?? 'tabpanel',\n    });\n  }\n\n  return children;\n};\n"],"names":["Tab","value","children","useTabs","React"],"mappings":";;AAQO,MAAMA,IAAuC,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAC9CC,EAAA,EACJ,UAAUF,IAAc,OAE9BC,KAAYE,EAAM,eAAeF,CAAQ,IACpCE,EAAM,aAAaF,GAAU;AAAA,EAClC,GAAGA,EAAS;AAAA,EACZ,IAAIA,EAAS,MAAM,MAAM,YAAYD,CAAK;AAAA,EAC1C,MAAMC,EAAS,MAAM,QAAQ;AAAA,CAC9B,IAGIA;"}

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

@@ -500,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;

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

@@ -1 +1 @@
-{"version":3,"file":"ergo_theme.js","sources":["../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"@layer tcn-reset {\\n  * {\\n    position: relative;\\n    box-sizing: border-box;\\n  }\\n}\\n\\n@layer tcn-theme {\\n  /* ===== CSS VARIABLES ===== */\\n  :root {\\n    /* ========== Ergo Brand Palette ========== */\\n    --ergo-primary: #ce6b2b;\\n    --ergo-secondary: #669eb4;\\n    --ergo-secondary-light: #ecf4fb;\\n    --ergo-secondary-dark: #497485;\\n    --ergo-tertiary: #dfd7cd;\\n    --ergo-tertiary-light: #f9f4ed;\\n    --ergo-tertiary-dark: #7e6c5d;\\n    --ergo-white: #ffffff;\\n\\n    --ergo-accent-blue: #395578;\\n    --ergo-accent-blue-light: #f3f4f6;\\n    --ergo-accent-green: #97bba3;\\n    --ergo-accent-green-light: #eef8ef;\\n    --ergo-accent-green-dark: #4f785c;\\n    --ergo-accent-yellow: #dbc97e;\\n    --ergo-accent-yellow-light: #fef9e7;\\n\\n    --ergo-grey: #aaaaaa;\\n    --ergo-grey-light: #d3d3d3;\\n    --ergo-grey-dark: #808080;\\n\\n    --ergo-status-red: #ff6565;\\n    --ergo-status-red-dark: #c24848;\\n\\n    --ergo-status-yellow: #ffd439;\\n    --ergo-status-yellow-dark: #dbb735;\\n\\n    --ergo-status-blue: var(--ergo-secondary);\\n    --ergo-status-blue-dark: var(--ergo-secondary-dark);\\n\\n    --ergo-status-green: #3fbc6a;\\n    --ergo-status-green-dark: #2d904f;\\n\\n    --ergo-ink-primary: var(--ergo-accent-blue);\\n    --ergo-ink-inverse: var(--ergo-white);\\n\\n    /* ========== Blackcat System Tokens ========== */\\n    --scalar: 1;\\n    --accent-color: var(--ergo-primary);\\n\\n    /* Typography */\\n    --font-color: var(--ergo-ink-primary);\\n    --font-family: \\\"Lato\\\", sans-serif;\\n    --font-size: 12px;\\n\\n    /* Spacing */\\n    --gap-small: 4px;\\n    --gap-medium: 8px;\\n    --gap-large: 16px;\\n\\n    --padding-small: 4px;\\n    --padding-medium: 8px;\\n    --padding-large: 16px;\\n\\n    /* Status Colors */\\n    --status-color-disabled: var(--ergo-grey-light);\\n    --status-color-info: var(--ergo-status-blue);\\n    --status-color-warning: var(--ergo-status-yellow);\\n    --status-color-positive: var(--ergo-status-green);\\n    --status-color-error: var(--ergo-status-red);\\n\\n    --async-color-initial: var(--ergo-grey-main);\\n    --async-color-pending: var(--ergo-status-blue);\\n    --async-color-success: var(--ergo-status-green);\\n    --async-color-failed: var(--ergo-status-red);\\n\\n    --action-severity-dangerous: var(--ergo-status-red);\\n    --action-severity-cautious: var(--ergo-status-yellow);\\n    --action-severity-neutral: var(--ergo-primary);\\n    --action-severity-suggested: var(--ergo-status-blue);\\n    --action-severity-encouraged: var(--ergo-status-green);\\n\\n    /* Shape */\\n    --shape-radius-small: 2px;\\n    --shape-radius-medium: 4px;\\n    --shape-radius-large: 8px;\\n\\n    /* Palette */\\n    --primary-color-faint: #c0c0c0;\\n    --primary-color: #008cff;\\n    --primary-color-strong: #008cff;\\n\\n    --secondary-color-faint: #c0c0c0;\\n    --secondary-color: #008cff;\\n    --secondary-color-strong: #008cff;\\n\\n    --tertiary-color-faint: #c0c0c0;\\n    --tertiary-color: #008cff;\\n    --tertiary-color-strong: #008cff;\\n\\n    --quaternary-color-faint: #c0c0c0;\\n    --quaternary-color: #008cff;\\n    --quaternary-color-strong: #008cff;\\n\\n    --background-color-primary: #ffffff;\\n    --background-color-secondary: #ffffff;\\n    --background-color-tertiary: #ffffff;\\n    --background-color-quaternary: #ffffff;\\n\\n    --foreground-color-primary: #aaa;\\n    --foreground-color-secondary: #222222;\\n    --foreground-color-tertiary: #222222;\\n    --foreground-color-quaternary: #222222;\\n\\n    --material-disabled: var(--ergo-grey-light);\\n    --on-material-disabled: var(--ergo-ink-inverse);\\n    --ink-disabled: var(--ergo-grey-light);\\n\\n    --material-line: var(--ergo-grey);\\n\\n    /* Default Material */\\n    --action: var(--ergo-primary);\\n    --on-action: var(--ergo-white);\\n    --material: var(--ergo-white);\\n    --on-material: var(--ergo-accent-blue);\\n  }\\n\\n  .tcn-theme-root {\\n    font-family: var(--font-family);\\n    color: var(--font-color);\\n    --action: var(--ergo-primary);\\n    --on-action: var(--ergo-white);\\n    --material: var(--ergo-white);\\n    --on-material: var(--ergo-accent-blue);\\n  }\\n\\n  /* ===== Actions ===== */\\n\\n  .tcn-interactive {\\n    cursor: pointer;\\n    user-select: none;\\n    transition:\\n      transform 0.1s,\\n      background 0.1s,\\n      color 0.1s;\\n\\n    --ink: var(--on-material);\\n    --act: var(--action);\\n    --mat: var(--material);\\n\\n    --act-down: color-mix(in srgb, var(--mat), black 12%);\\n    --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);\\n    --act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);\\n    --act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);\\n\\n    background: var(--mat);\\n    color: var(--ink);\\n    transition:\\n      background 0.1s,\\n      color 0.1s;\\n\\n    &:focus-visible,\\n    &[data-focus-visible] {\\n      background: var(--act-focus);\\n      outline: 2px solid var(--ergo-primary);\\n      outline-offset: 2px;\\n    }\\n\\n    &:hover,\\n    &[data-hover] {\\n      background: var(--act-raised);\\n    }\\n\\n    &:active,\\n    &[data-active] {\\n      background: var(--act-down);\\n    }\\n\\n    &[data-is-disabled=\\\"true\\\"] {\\n      pointer-events: none;\\n    }\\n  }\\n\\n  /* ===== Base Button ===== \\n  * Shared between Button and Toggle.\\n  * Primarily manages button dimensions and sizing ratios.\\n  */\\n  .tcn-base-button {\\n    /* TODO: btn size should look for \\\"--tcn-action-size\\\" variable before defaulting. */\\n    --btn-size-base: 26px;\\n    --btn-pad-base: 12px;\\n\\n    --btn-pad-delta: 4px;\\n    --btn-size-delta: 4px;\\n    --btn-step: 1;\\n\\n    /* Increase size and pad by 4px for each size \\\"step\\\" from medium */\\n    --btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));\\n    --btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));\\n\\n    border-radius: var(--shape-radius-medium);\\n    min-height: var(--btn-size);\\n    padding: var(--padding-small) var(--btn-pad);\\n\\n    &[data-size=\\\"sm\\\"] {\\n      --btn-step: -1;\\n    }\\n    &[data-size=\\\"md\\\"] {\\n      --btn-step: 0;\\n    }\\n    &[data-size=\\\"lg\\\"] {\\n      --btn-step: 1;\\n    }\\n\\n    &[data-is-utility=\\\"true\\\"] {\\n      height: auto;\\n      width: auto;\\n      min-width: var(--btn-size);\\n      padding: 0;\\n\\n      /* Icon is 75% of the button size but minimum of 2px to account for border and 1px offset */\\n      --util-ratio: 0.75;\\n      --btn-size-base: 18px;\\n\\n      .tcn-icon {\\n        min-height: min(2px, calc(var(--btn-size) * var(--util-ratio)));\\n        min-width: min(2px, calc(var(--btn-size) * var(--util-ratio)));\\n      }\\n    }\\n  }\\n\\n  /* ===== Button ===== \\n  * Manages Hierarchy and Severity.\\n  */\\n  .tcn-button {\\n    --btn-primary: var(--action);\\n    --btn-on-primary: var(--on-action);\\n    --btn-variant: var(--on-material);\\n\\n    &[data-severity=\\\"dangerous\\\"] {\\n      --btn-primary: var(--action-severity-dangerous);\\n      --btn-variant: var(--ergo-status-red-dark);\\n    }\\n    &[data-severity=\\\"cautious\\\"] {\\n      --btn-primary: var(--action-severity-cautious);\\n      --btn-on-primary: var(--ergo-accent-blue);\\n      --btn-variant: var(--ergo-status-yellow-dark);\\n    }\\n    &[data-severity=\\\"suggested\\\"] {\\n      --btn-primary: var(--action-severity-suggested);\\n      --btn-variant: var(--ergo-status-blue-dark);\\n    }\\n    &[data-severity=\\\"encouraged\\\"] {\\n      --btn-primary: var(--action-severity-encouraged);\\n      --btn-variant: var(--ergo-status-green-dark);\\n    }\\n\\n    &[data-hierarchy=\\\"primary\\\"] {\\n      --act: var(--ergo-white);\\n      --ink: var(--tcn-button-text-color, var(--btn-on-primary));\\n      --mat: var(--tcn-button-color, var(--btn-primary));\\n      &[data-is-disabled=\\\"true\\\"] {\\n        --ink: var(--ergo-white);\\n        --mat: var(--ergo-grey-light);\\n      }\\n    }\\n\\n    &[data-hierarchy=\\\"secondary\\\"],\\n    &[data-hierarchy=\\\"tertiary\\\"] {\\n      --act: var(--tcn-button-color, var(--btn-variant));\\n      --ink: var(--tcn-button-color, var(--btn-variant));\\n      &[data-is-disabled=\\\"true\\\"] {\\n        --ink: var(--ergo-grey-light);\\n      }\\n    }\\n\\n    /* Decorations */\\n    &[data-hierarchy=\\\"tertiary\\\"]:hover {\\n      text-decoration: underline;\\n      text-decoration-color: var(--ink);\\n      text-decoration-thickness: 1px;\\n      text-underline-offset: 4px;\\n    }\\n\\n    &[data-hierarchy=\\\"tertiary\\\"] {\\n      border: 1px solid transparent;\\n    }\\n\\n    &[data-hierarchy=\\\"secondary\\\"] {\\n      border: 1px solid var(--ink);\\n    }\\n\\n    &[data-hierarchy=\\\"primary\\\"] {\\n      border: 1px solid var(--mat);\\n    }\\n\\n    transition:\\n      box-shadow 0.1s,\\n      transform 0.1s;\\n\\n    &:hover,\\n    &[data-hover] {\\n      transform: translateY(-1px);\\n      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);\\n\\n      /* Increases the clickable area by 2px on hover to avoid click events not firing due to the button transform y - or slight mouse wiggles */\\n      &::before,\\n      &::after {\\n        content: \\\"\\\";\\n        position: absolute;\\n        left: 0;\\n        right: 0;\\n        height: 4px;\\n      }\\n\\n      &::before {\\n        top: -2px;\\n      }\\n\\n      &::after {\\n        bottom: -2px;\\n      }\\n    }\\n\\n    &:active,\\n    &[data-active] {\\n      transform: translateY(1px);\\n      box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.12);\\n    }\\n  }\\n\\n  /* @deprecated - use Button with utility prop instead */\\n  .tcn-slim-button {\\n    height: auto;\\n    width: auto;\\n    padding: 0;\\n\\n    &[data-size=\\\"sm\\\"] {\\n      min-height: 12px;\\n      min-width: 12px;\\n      padding: 0;\\n      .tcn-icon {\\n        min-height: 10px;\\n        min-width: 10px;\\n      }\\n    }\\n    &[data-size=\\\"md\\\"] {\\n      min-height: 18px;\\n      min-width: 18px;\\n      padding: 0;\\n      .tcn-icon {\\n        min-height: 14px;\\n        min-width: 14px;\\n      }\\n    }\\n\\n    &[data-size=\\\"lg\\\"] {\\n      min-height: 24px;\\n      min-width: 24px;\\n      padding: 0;\\n      .tcn-icon {\\n        min-height: 20px;\\n        min-width: 20px;\\n      }\\n    }\\n  }\\n\\n  .tcn-button[data-size].tcn-select {\\n    padding-inline-end: 26px;\\n  }\\n\\n  /* Toggle */\\n  .tcn-toggle {\\n    --tgl-false: var(--ergo-accent-blue);\\n    --tgl-true: var(--ergo-accent-blue);\\n    --on-tgl-true: var(--ergo-white);\\n\\n    --ink: var(--tcn-button-color, var(--tgl-false));\\n    --act: var(--tcn-button-color, var(--tgl-false));\\n    &[data-is-disabled=\\\"true\\\"] {\\n      --ink: var(--ergo-grey-light);\\n    }\\n    &[data-is-selected=\\\"true\\\"] {\\n      --mat: var(--tcn-button-color, var(--tgl-true));\\n      --ink: var(--tcn-button-text-color, var(--ergo-white));\\n      --act: var(--ergo-white);\\n      &[data-is-disabled=\\\"true\\\"] {\\n        --ink: var(--ergo-white);\\n        --mat: var(--ergo-grey-light);\\n      }\\n    }\\n  }\\n\\n  .tcn-button-group {\\n    .tcn-button-group-button:hover,\\n    .tcn-button-group-button:active {\\n      transform: none;\\n    }\\n\\n    .tcn-button-group-button {\\n      border-radius: 0;\\n    }\\n    .tcn-button-group-button:first-child {\\n      border-top-left-radius: var(--shape-radius-medium);\\n      border-bottom-left-radius: var(--shape-radius-medium);\\n    }\\n    .tcn-button-group-button:last-child {\\n      border-top-right-radius: var(--shape-radius-medium);\\n      border-bottom-right-radius: var(--shape-radius-medium);\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"] {\\n      border: 0;\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:last-child) {\\n      border-right: 1px solid var(--on-mat-faint);\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:first-child) {\\n      border-left: 1px solid var(--on-mat-faint);\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:last-child) {\\n      border-right: 1px solid var(--act-down);\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:first-child) {\\n      border-left: 1px solid var(--act-down);\\n    }\\n  }\\n\\n  .tcn-select-group {\\n    .tcn-select-group-option:hover,\\n    .tcn-select-group-option:active {\\n      transform: none;\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"] {\\n      color: var(--act);\\n      border-color: var(--act);\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:hover {\\n      background: var(--act-faint);\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:active {\\n      background: var(--act-down);\\n      color: var(--on-act);\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n      color: var(--material-disabled);\\n      border: 1px solid var(--material-disabled);\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n      background: var(--material-disabled);\\n      color: white;\\n      border: 1px solid var(--material-disabled);\\n    }\\n\\n    .tcn-select-group-option {\\n      border-radius: 0;\\n    }\\n    .tcn-select-group-option:first-child {\\n      border-top-left-radius: var(--shape-radius-medium);\\n      border-bottom-left-radius: var(--shape-radius-medium);\\n    }\\n    .tcn-select-group-option:last-child {\\n      border-top-right-radius: var(--shape-radius-medium);\\n      border-bottom-right-radius: var(--shape-radius-medium);\\n    }\\n  }\\n\\n  /* ===== Tabs ===== */\\n  .tcn-tabs-bar {\\n    .tcn-tabs-list {\\n      .tcn-tab-item {\\n        min-height: 24px;\\n        padding: 0px var(--padding-medium);\\n        text-decoration: none;\\n        text-overflow: ellipsis;\\n        overflow: hidden;\\n        white-space: nowrap;\\n      }\\n    }\\n  }\\n\\n  /* Default */\\n  .tcn-tabs-bar[data-variant=\\\"default\\\"] {\\n    .tcn-tabs-list {\\n      .tcn-tab-item {\\n        box-sizing: border-box;\\n        border: none;\\n        padding: 0px var(--padding-medium);\\n        border-radius: 0;\\n      }\\n      .tcn-tab-item[data-is-selected=\\\"true\\\"] {\\n        --mat: var(--tcn-button-color, var(--material));\\n        --ink: var(--tcn-button-text-color, var(--ergo-primary));\\n        --act: var(--ergo-primary);\\n      }\\n\\n      /* Hover Indicator */\\n      .tcn-tab-item[data-is-selected=\\\"false\\\"]:hover::after {\\n        content: \\\"\\\";\\n        display: block;\\n        position: absolute;\\n        left: 0;\\n        right: 0;\\n        bottom: 0px;\\n        height: 1px;\\n        background: var(--ergo-accent-blue);\\n        pointer-events: none;\\n        width: 100%;\\n        z-index: 3;\\n      }\\n\\n      /* Indicator */\\n      &::after {\\n        content: \\\"\\\";\\n        position: absolute;\\n        bottom: -1px;\\n        left: 0;\\n        min-height: 2px;\\n        transform: translateX(var(--tabs-active-rectangle-position-x, 0));\\n        width: var(--tabs-active-rectangle-width, 0);\\n        background: var(--ergo-primary);\\n        pointer-events: none;\\n        border-bottom-left-radius: 2px;\\n        border-bottom-right-radius: 2px;\\n        transition:\\n          transform 300ms ease-in-out,\\n          width 300ms ease-in-out;\\n        will-change: transform, width;\\n        z-index: 2;\\n      }\\n    }\\n\\n    /* Rail */\\n    &::before {\\n      content: \\\"\\\";\\n      position: absolute;\\n      bottom: 0px;\\n      left: 0;\\n      width: 100%;\\n      height: 1px;\\n      background: var(--material-line);\\n      pointer-events: none;\\n      z-index: 1;\\n    }\\n  }\\n\\n  /* Inline  */\\n  .tcn-tabs-bar[data-variant=\\\"inline\\\"] {\\n    min-width: min-content;\\n    width: auto;\\n    flex-grow: 0;\\n    border-radius: var(--shape-radius-medium);\\n    border: 1px solid var(--on-material);\\n\\n    .tcn-tabs-list {\\n      gap: var(--gap-small);\\n      padding: var(--padding-small);\\n      .tcn-tab-item {\\n        border-radius: var(--shape-radius-medium);\\n      }\\n    }\\n  }\\n\\n  /* ===== MATERIAL ===== */\\n\\n  .material {\\n    background-color: var(--material);\\n    color: var(--on-material);\\n  }\\n\\n  /* ===== SURFACES ===== */\\n  .tcn-draggable[data-is-draggable=\\\"true\\\"] {\\n    .tcn-drag-handle {\\n      cursor: move;\\n    }\\n  }\\n\\n  .tcn-frame[data-is-veil=\\\"true\\\"] {\\n    background-color: rgba(0, 0, 0, 0.5);\\n  }\\n\\n  .tcn-tooltip {\\n    background: rgba(57, 85, 120, 0.85);\\n    box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);\\n    color: rgba(255, 255, 255, 1);\\n    border-radius: var(--shape-radius-medium);\\n    padding: var(--padding-medium);\\n  }\\n\\n  .tcn-list {\\n    gap: var(--gap-medium);\\n    .tcn-item {\\n      height: 24px;\\n      padding: 0px var(--padding-medium);\\n      border-radius: var(--shape-radius-medium);\\n    }\\n  }\\n\\n  /* Scaffold: */\\n  .tcn-scaffold {\\n    --scaffold-v-inset: var(--v-inset, var(--padding-large));\\n    --scaffold-header-size: var(--header-size, 40px);\\n    --scaffold-footer-size: var(--footer-size, 40px);\\n    --scaffold-utility-bar-size: var(--utility-bar-size, 32px);\\n    --scaffold-divide-footer: var(--divide-footer, 1);\\n    --scaffold-divide-header: var(--divide-header, 1);\\n\\n    :where(.tcn-header) {\\n      min-height: var(--scaffold-header-size);\\n      padding: 0 var(--scaffold-v-inset);\\n      gap: var(--gap-medium);\\n    }\\n\\n    /* Border appears on body only when it follows header or utility-bar */\\n    :where(.tcn-header) + :where(.tcn-body),\\n    :where(.tcn-utility-bar) + :where(.tcn-body) {\\n      border-top: calc(var(--scaffold-divide-header) * 1px) solid\\n        var(--foreground-color-primary);\\n    }\\n\\n    /* Border appears on footer only when it follows body and --scaffold-divide-footer is 1 */\\n    :where(.tcn-body) + :where(.tcn-footer) {\\n      border-top: calc(var(--scaffold-divide-footer) * 1px) solid\\n        var(--foreground-color-primary);\\n    }\\n\\n    :where(.tcn-utility-bar) {\\n      min-height: var(--scaffold-utility-bar-size);\\n      padding: 0 var(--scaffold-v-inset);\\n      gap: var(--gap-medium);\\n    }\\n\\n    :where(.tcn-body) {\\n      --section-tab-start: var(--scaffold-v-inset);\\n\\n      gap: var(--gap-medium);\\n      .tcn-section {\\n        --section-tab-start: var(--scaffold-v-inset);\\n      }\\n    }\\n\\n    :where(.tcn-footer) {\\n      gap: var(--gap-medium);\\n      min-height: var(--scaffold-footer-size);\\n      padding: 0 var(--scaffold-v-inset);\\n    }\\n  }\\n\\n  .tcn-frame-veil[data-is-veil=\\\"true\\\"] {\\n    background-color: rgba(0, 0, 0, 0.5);\\n  }\\n\\n  /* MODAL: */\\n  .tcn-modal {\\n    --divide-header: 0;\\n\\n    :where(.tcn-scaffold) {\\n      border-radius: var(--shape-radius-medium);\\n      background-color: var(--background-color-primary);\\n      overflow: hidden;\\n      border: 1px solid var(--foreground-color-primary);\\n    }\\n\\n    :where(.tcn-header) {\\n      --material: var(--ergo-secondary-dark);\\n      --on-material: var(--ergo-white);\\n      --action: var(--ergo-tertiary);\\n      --on-action: var(--ergo-secondary-dark);\\n\\n      background-color: var(--material);\\n      color: var(--on-material);\\n      :where(.tcn-typography) {\\n        color: inherit;\\n      }\\n    }\\n  }\\n\\n  /* WINDOW: */\\n  .tcn-window {\\n    --divide-header: 0;\\n\\n    :where(.tcn-scaffold) {\\n      box-shadow: 0px 4px 34px 0px #00000096;\\n      border-radius: var(--shape-radius-medium);\\n      background-color: var(--background-color-primary);\\n      overflow: hidden;\\n      border: 2px solid white;\\n    }\\n\\n    :where(.tcn-header) {\\n      --material: var(--ergo-secondary-dark);\\n      --on-material: var(--ergo-white);\\n      --action: var(--ergo-tertiary);\\n      --on-action: var(--ergo-secondary-dark);\\n\\n      background-color: var(--material);\\n      color: var(--on-material);\\n      :where(.tcn-typography) {\\n        color: inherit;\\n      }\\n    }\\n  }\\n\\n  .tcn-pop-confirm {\\n    --divide-header: 0;\\n    --v-inset: var(--padding-medium);\\n\\n    :where(.tcn-scaffold) {\\n      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);\\n      border-radius: var(--shape-radius-medium);\\n      background-color: var(--background-color-primary);\\n      overflow: hidden;\\n    }\\n\\n    :where(.tcn-header) {\\n      min-height: 32px;\\n\\n      --material: var(--ergo-secondary-dark);\\n      --on-material: var(--ergo-white);\\n      --action: var(--ergo-tertiary);\\n      --on-action: var(--ergo-secondary-dark);\\n\\n      background-color: var(--material);\\n      color: var(--on-material);\\n      :where(.tcn-typography) {\\n        color: inherit;\\n      }\\n    }\\n  }\\n\\n  .tcn-confirm {\\n    background-color: var(--background-color-primary);\\n  }\\n\\n  /* PANEL */\\n  .tcn-panel {\\n    background-color: var(--background-color-primary);\\n    border-radius: var(--shape-radius-medium);\\n    overflow: hidden;\\n  }\\n\\n  /* Card */\\n  .tcn-card {\\n    --header-size: 32px;\\n    --footer-size: 32px;\\n    --utility-bar-size: 24px;\\n    --divide-header: 0;\\n\\n    background-color: var(--background-color-primary);\\n    border-radius: var(--shape-radius-medium);\\n    border: 1px solid var(--foreground-color-primary);\\n    overflow: hidden;\\n\\n    :where(.tcn-header) {\\n      min-height: 32px;\\n\\n      --material: var(--ergo-secondary-light);\\n      --on-material: var(--ergo-accent-blue);\\n      --action: var(--ergo-secondary);\\n      --on-action: var(--ergo-white);\\n\\n      background-color: var(--material);\\n      color: var(--on-material);\\n      :where(.tcn-typography) {\\n        color: inherit;\\n      }\\n    }\\n  }\\n\\n  /* SECTION */\\n  .tcn-section {\\n    --max-section-depth: 4;\\n    --section-tab-width: 4px;\\n    --section-tab-start: 8px;\\n    --section-tab-depth: 0;\\n    --section-tab: calc(\\n      var(--section-tab-start) +\\n      (var(--section-tab-width) * var(--section-tab-depth))\\n    );\\n    --section-action: var(--ergo-secondary);\\n    --section-mat: var(--ergo-secondary-light);\\n    --section-on-mat: var(--ergo-ink-primary);\\n  }\\n\\n  .tcn-heading {\\n    background-color: #f1f1f1;\\n    padding-inline-start: 8px;\\n    height: 30px;\\n    z-index: 5;\\n  }\\n\\n  .tcn-section > .tcn-heading {\\n    z-index: calc(var(--max-section-depth) - var(--section-tab-depth));\\n    padding-inline-start: var(--section-tab);\\n    --material: var(--section-mat);\\n    --on-material: var(--section-on-mat);\\n    --action: var(--section-action);\\n    background-color: var(--material);\\n    color: var(--on-material);\\n    gap: var(--gap-small);\\n  }\\n\\n  .tcn-section > :not(.tcn-heading, .tcn-section) {\\n    padding-inline-start: var(--section-tab);\\n  }\\n\\n  .tcn-section > .tcn-section {\\n    --section-tab-depth: 1;\\n    --section-mat: var(--ergo-accent-blue-light);\\n    --section-action: var(--ergo-accent-blue);\\n  }\\n\\n  .tcn-section > .tcn-section > .tcn-section {\\n    --section-tab-depth: 2;\\n    --section-mat: var(--ergo-accent-green-light);\\n    --section-action: var(--ergo-accent-green-dark);\\n  }\\n\\n  .tcn-section > .tcn-section > .tcn-section > .tcn-section {\\n    --section-tab-depth: 3;\\n    --section-mat: var(--ergo-tertiary-light);\\n    --section-action: var(--ergo-tertiary-dark);\\n  }\\n\\n  .tcn-caret {\\n    --caret-size: 12px;\\n    --caret-triangle-height: calc(var(--caret-size) / 2);\\n    --caret-triangle-width: var(--caret-size);\\n    --caret-triangle-base: var(--caret-triangle-height) solid transparent;\\n    --caret-triangle-peak: var(--caret-triangle-width) solid var(--material);\\n\\n    width: 0;\\n    height: 0;\\n    flex-grow: 0;\\n    display: inline-block;\\n\\n    &[data-direction=\\\"top\\\"] {\\n      border-bottom: var(--caret-triangle-peak);\\n      border-left: var(--caret-triangle-base);\\n      border-right: var(--caret-triangle-base);\\n    }\\n\\n    &[data-direction=\\\"bottom\\\"] {\\n      border-top: var(--caret-triangle-peak);\\n      border-left: var(--caret-triangle-base);\\n      border-right: var(--caret-triangle-base);\\n    }\\n\\n    &[data-direction=\\\"start\\\"] {\\n      border-right: var(--caret-triangle-peak);\\n      border-top: var(--caret-triangle-base);\\n      border-bottom: var(--caret-triangle-base);\\n    }\\n\\n    &[data-direction=\\\"end\\\"] {\\n      border-left: var(--caret-triangle-peak);\\n      border-top: var(--caret-triangle-base);\\n      border-bottom: var(--caret-triangle-base);\\n    }\\n  }\\n}\\n\"","import css from './ergo_theme.css?raw';\nimport '@fontsource/lato';\n\nexport const ergoStyleSheet = new CSSStyleSheet();\nergoStyleSheet.replaceSync(css);\n"],"names":["css","ergoStyleSheet"],"mappings":";AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCGFC,IAAiB,IAAI,cAAA;AAClCA,EAAe,YAAYD,CAAG;"}
+{"version":3,"file":"ergo_theme.js","sources":["../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"@layer tcn-reset {\\n  * {\\n    position: relative;\\n    box-sizing: border-box;\\n  }\\n}\\n\\n@layer tcn-theme {\\n  /* ===== CSS VARIABLES ===== */\\n  :root {\\n    /* ========== Ergo Brand Palette ========== */\\n    --ergo-primary: #ce6b2b;\\n    --ergo-secondary: #669eb4;\\n    --ergo-secondary-light: #ecf4fb;\\n    --ergo-secondary-dark: #497485;\\n    --ergo-tertiary: #dfd7cd;\\n    --ergo-tertiary-light: #f9f4ed;\\n    --ergo-tertiary-dark: #7e6c5d;\\n    --ergo-white: #ffffff;\\n\\n    --ergo-accent-blue: #395578;\\n    --ergo-accent-blue-light: #f3f4f6;\\n    --ergo-accent-green: #97bba3;\\n    --ergo-accent-green-light: #eef8ef;\\n    --ergo-accent-green-dark: #4f785c;\\n    --ergo-accent-yellow: #dbc97e;\\n    --ergo-accent-yellow-light: #fef9e7;\\n\\n    --ergo-grey: #aaaaaa;\\n    --ergo-grey-light: #d3d3d3;\\n    --ergo-grey-dark: #808080;\\n\\n    --ergo-status-red: #ff6565;\\n    --ergo-status-red-dark: #c24848;\\n\\n    --ergo-status-yellow: #ffd439;\\n    --ergo-status-yellow-dark: #dbb735;\\n\\n    --ergo-status-blue: var(--ergo-secondary);\\n    --ergo-status-blue-dark: var(--ergo-secondary-dark);\\n\\n    --ergo-status-green: #3fbc6a;\\n    --ergo-status-green-dark: #2d904f;\\n\\n    --ergo-ink-primary: var(--ergo-accent-blue);\\n    --ergo-ink-inverse: var(--ergo-white);\\n\\n    /* ========== Blackcat System Tokens ========== */\\n    --scalar: 1;\\n    --accent-color: var(--ergo-primary);\\n\\n    /* Typography */\\n    --font-color: var(--ergo-ink-primary);\\n    --font-family: \\\"Lato\\\", sans-serif;\\n    --font-size: 12px;\\n\\n    /* Spacing */\\n    --gap-small: 4px;\\n    --gap-medium: 8px;\\n    --gap-large: 16px;\\n\\n    --padding-small: 4px;\\n    --padding-medium: 8px;\\n    --padding-large: 16px;\\n\\n    /* Status Colors */\\n    --status-color-disabled: var(--ergo-grey-light);\\n    --status-color-info: var(--ergo-status-blue);\\n    --status-color-warning: var(--ergo-status-yellow);\\n    --status-color-positive: var(--ergo-status-green);\\n    --status-color-error: var(--ergo-status-red);\\n\\n    --async-color-initial: var(--ergo-grey-main);\\n    --async-color-pending: var(--ergo-status-blue);\\n    --async-color-success: var(--ergo-status-green);\\n    --async-color-failed: var(--ergo-status-red);\\n\\n    --action-severity-dangerous: var(--ergo-status-red);\\n    --action-severity-cautious: var(--ergo-status-yellow);\\n    --action-severity-neutral: var(--ergo-primary);\\n    --action-severity-suggested: var(--ergo-status-blue);\\n    --action-severity-encouraged: var(--ergo-status-green);\\n\\n    /* Shape */\\n    --shape-radius-small: 2px;\\n    --shape-radius-medium: 4px;\\n    --shape-radius-large: 8px;\\n\\n    /* Palette */\\n    --primary-color-faint: #c0c0c0;\\n    --primary-color: #008cff;\\n    --primary-color-strong: #008cff;\\n\\n    --secondary-color-faint: #c0c0c0;\\n    --secondary-color: #008cff;\\n    --secondary-color-strong: #008cff;\\n\\n    --tertiary-color-faint: #c0c0c0;\\n    --tertiary-color: #008cff;\\n    --tertiary-color-strong: #008cff;\\n\\n    --quaternary-color-faint: #c0c0c0;\\n    --quaternary-color: #008cff;\\n    --quaternary-color-strong: #008cff;\\n\\n    --background-color-primary: #ffffff;\\n    --background-color-secondary: #ffffff;\\n    --background-color-tertiary: #ffffff;\\n    --background-color-quaternary: #ffffff;\\n\\n    --foreground-color-primary: #aaa;\\n    --foreground-color-secondary: #222222;\\n    --foreground-color-tertiary: #222222;\\n    --foreground-color-quaternary: #222222;\\n\\n    --material-disabled: var(--ergo-grey-light);\\n    --on-material-disabled: var(--ergo-ink-inverse);\\n    --ink-disabled: var(--ergo-grey-light);\\n\\n    --material-line: var(--ergo-grey);\\n\\n    /* Default Material */\\n    --action: var(--ergo-primary);\\n    --on-action: var(--ergo-white);\\n    --material: var(--ergo-white);\\n    --on-material: var(--ergo-accent-blue);\\n  }\\n\\n  .tcn-theme-root {\\n    font-family: var(--font-family);\\n    color: var(--font-color);\\n    --action: var(--ergo-primary);\\n    --on-action: var(--ergo-white);\\n    --material: var(--ergo-white);\\n    --on-material: var(--ergo-accent-blue);\\n  }\\n\\n  /* ===== Actions ===== */\\n\\n  .tcn-interactive {\\n    cursor: pointer;\\n    user-select: none;\\n    transition:\\n      transform 0.1s,\\n      background 0.1s,\\n      color 0.1s;\\n\\n    --ink: var(--on-material);\\n    --act: var(--action);\\n    --mat: var(--material);\\n\\n    --act-down: color-mix(in srgb, var(--mat), black 12%);\\n    --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);\\n    --act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);\\n    --act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);\\n\\n    background: var(--mat);\\n    color: var(--ink);\\n    transition:\\n      background 0.1s,\\n      color 0.1s;\\n\\n    &:focus-visible,\\n    &[data-focus-visible] {\\n      background: var(--act-focus);\\n      outline: 2px solid var(--ergo-primary);\\n      outline-offset: 2px;\\n    }\\n\\n    &:hover,\\n    &[data-hover] {\\n      background: var(--act-raised);\\n    }\\n\\n    &:active,\\n    &[data-active] {\\n      background: var(--act-down);\\n    }\\n\\n    &[data-is-disabled=\\\"true\\\"] {\\n      pointer-events: none;\\n    }\\n  }\\n\\n  /* ===== Base Button ===== \\n  * Shared between Button and Toggle.\\n  * Primarily manages button dimensions and sizing ratios.\\n  */\\n  .tcn-base-button {\\n    /* TODO: btn size should look for \\\"--tcn-action-size\\\" variable before defaulting. */\\n    --btn-size-base: 26px;\\n    --btn-pad-base: 12px;\\n\\n    --btn-pad-delta: 4px;\\n    --btn-size-delta: 4px;\\n    --btn-step: 1;\\n\\n    /* Increase size and pad by 4px for each size \\\"step\\\" from medium */\\n    --btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));\\n    --btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));\\n\\n    border-radius: var(--shape-radius-medium);\\n    min-height: var(--btn-size);\\n    padding: var(--padding-small) var(--btn-pad);\\n\\n    &[data-size=\\\"sm\\\"] {\\n      --btn-step: -1;\\n    }\\n    &[data-size=\\\"md\\\"] {\\n      --btn-step: 0;\\n    }\\n    &[data-size=\\\"lg\\\"] {\\n      --btn-step: 1;\\n    }\\n\\n    &[data-is-utility=\\\"true\\\"] {\\n      height: auto;\\n      width: auto;\\n      min-width: var(--btn-size);\\n      padding: 0;\\n\\n      /* Icon is 75% of the button size but minimum of 2px to account for border and 1px offset */\\n      --util-ratio: 0.75;\\n      --btn-size-base: 18px;\\n\\n      .tcn-icon {\\n        min-height: min(2px, calc(var(--btn-size) * var(--util-ratio)));\\n        min-width: min(2px, calc(var(--btn-size) * var(--util-ratio)));\\n      }\\n    }\\n  }\\n\\n  /* ===== Button ===== \\n  * Manages Hierarchy and Severity.\\n  */\\n  .tcn-button {\\n    --btn-primary: var(--action);\\n    --btn-on-primary: var(--on-action);\\n    --btn-variant: var(--on-material);\\n\\n    &[data-severity=\\\"dangerous\\\"] {\\n      --btn-primary: var(--action-severity-dangerous);\\n      --btn-variant: var(--ergo-status-red-dark);\\n    }\\n    &[data-severity=\\\"cautious\\\"] {\\n      --btn-primary: var(--action-severity-cautious);\\n      --btn-on-primary: var(--ergo-accent-blue);\\n      --btn-variant: var(--ergo-status-yellow-dark);\\n    }\\n    &[data-severity=\\\"suggested\\\"] {\\n      --btn-primary: var(--action-severity-suggested);\\n      --btn-variant: var(--ergo-status-blue-dark);\\n    }\\n    &[data-severity=\\\"encouraged\\\"] {\\n      --btn-primary: var(--action-severity-encouraged);\\n      --btn-variant: var(--ergo-status-green-dark);\\n    }\\n\\n    &[data-hierarchy=\\\"primary\\\"] {\\n      --act: var(--ergo-white);\\n      --ink: var(--tcn-button-text-color, var(--btn-on-primary));\\n      --mat: var(--tcn-button-color, var(--btn-primary));\\n      &[data-is-disabled=\\\"true\\\"] {\\n        --ink: var(--ergo-white);\\n        --mat: var(--ergo-grey-light);\\n      }\\n    }\\n\\n    &[data-hierarchy=\\\"secondary\\\"],\\n    &[data-hierarchy=\\\"tertiary\\\"] {\\n      --act: var(--tcn-button-color, var(--btn-variant));\\n      --ink: var(--tcn-button-color, var(--btn-variant));\\n      &[data-is-disabled=\\\"true\\\"] {\\n        --ink: var(--ergo-grey-light);\\n      }\\n    }\\n\\n    /* Decorations */\\n    &[data-hierarchy=\\\"tertiary\\\"]:hover {\\n      text-decoration: underline;\\n      text-decoration-color: var(--ink);\\n      text-decoration-thickness: 1px;\\n      text-underline-offset: 4px;\\n    }\\n\\n    &[data-hierarchy=\\\"tertiary\\\"] {\\n      border: 1px solid transparent;\\n    }\\n\\n    &[data-hierarchy=\\\"secondary\\\"] {\\n      border: 1px solid var(--ink);\\n    }\\n\\n    &[data-hierarchy=\\\"primary\\\"] {\\n      border: 1px solid var(--mat);\\n    }\\n\\n    transition:\\n      box-shadow 0.1s,\\n      transform 0.1s;\\n\\n    &:hover,\\n    &[data-hover] {\\n      transform: translateY(-1px);\\n      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);\\n\\n      /* Increases the clickable area by 2px on hover to avoid click events not firing due to the button transform y - or slight mouse wiggles */\\n      &::before,\\n      &::after {\\n        content: \\\"\\\";\\n        position: absolute;\\n        left: 0;\\n        right: 0;\\n        height: 4px;\\n      }\\n\\n      &::before {\\n        top: -2px;\\n      }\\n\\n      &::after {\\n        bottom: -2px;\\n      }\\n    }\\n\\n    &:active,\\n    &[data-active] {\\n      transform: translateY(1px);\\n      box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.12);\\n    }\\n  }\\n\\n  /* @deprecated - use Button with utility prop instead */\\n  .tcn-slim-button {\\n    height: auto;\\n    width: auto;\\n    padding: 0;\\n\\n    &[data-size=\\\"sm\\\"] {\\n      min-height: 12px;\\n      min-width: 12px;\\n      padding: 0;\\n      .tcn-icon {\\n        min-height: 10px;\\n        min-width: 10px;\\n      }\\n    }\\n    &[data-size=\\\"md\\\"] {\\n      min-height: 18px;\\n      min-width: 18px;\\n      padding: 0;\\n      .tcn-icon {\\n        min-height: 14px;\\n        min-width: 14px;\\n      }\\n    }\\n\\n    &[data-size=\\\"lg\\\"] {\\n      min-height: 24px;\\n      min-width: 24px;\\n      padding: 0;\\n      .tcn-icon {\\n        min-height: 20px;\\n        min-width: 20px;\\n      }\\n    }\\n  }\\n\\n  .tcn-button[data-size].tcn-select {\\n    padding-inline-end: 26px;\\n  }\\n\\n  /* Toggle */\\n  .tcn-toggle {\\n    --tgl-false: var(--ergo-accent-blue);\\n    --tgl-true: var(--ergo-accent-blue);\\n    --on-tgl-true: var(--ergo-white);\\n\\n    --ink: var(--tcn-button-color, var(--tgl-false));\\n    --act: var(--tcn-button-color, var(--tgl-false));\\n    &[data-is-disabled=\\\"true\\\"] {\\n      --ink: var(--ergo-grey-light);\\n    }\\n    &[data-is-selected=\\\"true\\\"] {\\n      --mat: var(--tcn-button-color, var(--tgl-true));\\n      --ink: var(--tcn-button-text-color, var(--ergo-white));\\n      --act: var(--ergo-white);\\n      &[data-is-disabled=\\\"true\\\"] {\\n        --ink: var(--ergo-white);\\n        --mat: var(--ergo-grey-light);\\n      }\\n    }\\n  }\\n\\n  .tcn-button-group {\\n    .tcn-button-group-button:hover,\\n    .tcn-button-group-button:active {\\n      transform: none;\\n    }\\n\\n    .tcn-button-group-button {\\n      border-radius: 0;\\n    }\\n    .tcn-button-group-button:first-child {\\n      border-top-left-radius: var(--shape-radius-medium);\\n      border-bottom-left-radius: var(--shape-radius-medium);\\n    }\\n    .tcn-button-group-button:last-child {\\n      border-top-right-radius: var(--shape-radius-medium);\\n      border-bottom-right-radius: var(--shape-radius-medium);\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"] {\\n      border: 0;\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:last-child) {\\n      border-right: 1px solid var(--on-mat-faint);\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:first-child) {\\n      border-left: 1px solid var(--on-mat-faint);\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:last-child) {\\n      border-right: 1px solid var(--act-down);\\n    }\\n    .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:first-child) {\\n      border-left: 1px solid var(--act-down);\\n    }\\n  }\\n\\n  .tcn-select-group {\\n    .tcn-select-group-option:hover,\\n    .tcn-select-group-option:active {\\n      transform: none;\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"] {\\n      color: var(--act);\\n      border-color: var(--act);\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:hover {\\n      background: var(--act-faint);\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:active {\\n      background: var(--act-down);\\n      color: var(--on-act);\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n      color: var(--material-disabled);\\n      border: 1px solid var(--material-disabled);\\n    }\\n\\n    .tcn-select-group-option[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n      background: var(--material-disabled);\\n      color: white;\\n      border: 1px solid var(--material-disabled);\\n    }\\n\\n    .tcn-select-group-option {\\n      border-radius: 0;\\n    }\\n    .tcn-select-group-option:first-child {\\n      border-top-left-radius: var(--shape-radius-medium);\\n      border-bottom-left-radius: var(--shape-radius-medium);\\n    }\\n    .tcn-select-group-option:last-child {\\n      border-top-right-radius: var(--shape-radius-medium);\\n      border-bottom-right-radius: var(--shape-radius-medium);\\n    }\\n  }\\n\\n  /* ===== Tabs ===== */\\n  .tcn-tabs-bar {\\n    .tcn-tabs-list {\\n      .tcn-tab-item {\\n        min-height: 24px;\\n        padding: 0px var(--padding-medium);\\n        text-decoration: none;\\n        text-overflow: ellipsis;\\n        overflow: hidden;\\n        white-space: nowrap;\\n      }\\n    }\\n  }\\n\\n  /* Default */\\n  .tcn-tabs-bar[data-variant=\\\"default\\\"] {\\n    .tcn-tabs-list {\\n      .tcn-tab-item {\\n        box-sizing: border-box;\\n        border: none;\\n        padding: 0px var(--padding-medium);\\n        border-radius: 0;\\n      }\\n      .tcn-tab-item[data-is-selected=\\\"true\\\"] {\\n        --mat: var(--tcn-button-color, var(--material));\\n        --ink: var(--tcn-button-text-color, var(--ergo-primary));\\n        --act: var(--ergo-primary);\\n      }\\n\\n      .tcn-tab-item:focus-visible {\\n        z-index: 2;\\n      }\\n      /* Hover Indicator */\\n      .tcn-tab-item[data-is-selected=\\\"false\\\"]:hover::after,\\n      .tcn-tab-item[data-is-selected=\\\"false\\\"]:focus-visible::after {\\n        content: \\\"\\\";\\n        display: block;\\n        position: absolute;\\n        left: 0;\\n        right: 0;\\n        bottom: 0px;\\n        height: 1px;\\n        background: var(--ergo-accent-blue);\\n        pointer-events: none;\\n        width: 100%;\\n        z-index: 3;\\n      }\\n\\n      /* Indicator */\\n      &::after {\\n        content: \\\"\\\";\\n        position: absolute;\\n        bottom: -1px;\\n        left: 0;\\n        min-height: 2px;\\n        transform: translateX(var(--tabs-active-rectangle-position-x, 0));\\n        width: var(--tabs-active-rectangle-width, 0);\\n        background: var(--ergo-primary);\\n        pointer-events: none;\\n        border-bottom-left-radius: 2px;\\n        border-bottom-right-radius: 2px;\\n        transition:\\n          transform 300ms ease-in-out,\\n          width 300ms ease-in-out;\\n        will-change: transform, width;\\n        z-index: 2;\\n      }\\n    }\\n\\n    /* Rail */\\n    &::before {\\n      content: \\\"\\\";\\n      position: absolute;\\n      bottom: 0px;\\n      left: 0;\\n      width: 100%;\\n      height: 1px;\\n      background: var(--material-line);\\n      pointer-events: none;\\n      z-index: 1;\\n    }\\n  }\\n\\n  /* Inline  */\\n  .tcn-tabs-bar[data-variant=\\\"inline\\\"] {\\n    min-width: min-content;\\n    width: auto;\\n    flex-grow: 0;\\n    border-radius: var(--shape-radius-medium);\\n    border: 1px solid var(--on-material);\\n\\n    .tcn-tabs-list {\\n      gap: var(--gap-small);\\n      padding: var(--padding-small);\\n      .tcn-tab-item {\\n        border-radius: var(--shape-radius-medium);\\n      }\\n    }\\n  }\\n\\n  /* ===== MATERIAL ===== */\\n\\n  .material {\\n    background-color: var(--material);\\n    color: var(--on-material);\\n  }\\n\\n  /* ===== SURFACES ===== */\\n  .tcn-draggable[data-is-draggable=\\\"true\\\"] {\\n    .tcn-drag-handle {\\n      cursor: move;\\n    }\\n  }\\n\\n  .tcn-frame[data-is-veil=\\\"true\\\"] {\\n    background-color: rgba(0, 0, 0, 0.5);\\n  }\\n\\n  .tcn-tooltip {\\n    background: rgba(57, 85, 120, 0.85);\\n    box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);\\n    color: rgba(255, 255, 255, 1);\\n    border-radius: var(--shape-radius-medium);\\n    padding: var(--padding-medium);\\n  }\\n\\n  .tcn-list {\\n    gap: var(--gap-medium);\\n    .tcn-item {\\n      height: 24px;\\n      padding: 0px var(--padding-medium);\\n      border-radius: var(--shape-radius-medium);\\n    }\\n  }\\n\\n  /* Scaffold: */\\n  .tcn-scaffold {\\n    --scaffold-v-inset: var(--v-inset, var(--padding-large));\\n    --scaffold-header-size: var(--header-size, 40px);\\n    --scaffold-footer-size: var(--footer-size, 40px);\\n    --scaffold-utility-bar-size: var(--utility-bar-size, 32px);\\n    --scaffold-divide-footer: var(--divide-footer, 1);\\n    --scaffold-divide-header: var(--divide-header, 1);\\n\\n    :where(.tcn-header) {\\n      min-height: var(--scaffold-header-size);\\n      padding: 0 var(--scaffold-v-inset);\\n      gap: var(--gap-medium);\\n    }\\n\\n    /* Border appears on body only when it follows header or utility-bar */\\n    :where(.tcn-header) + :where(.tcn-body),\\n    :where(.tcn-utility-bar) + :where(.tcn-body) {\\n      border-top: calc(var(--scaffold-divide-header) * 1px) solid\\n        var(--foreground-color-primary);\\n    }\\n\\n    /* Border appears on footer only when it follows body and --scaffold-divide-footer is 1 */\\n    :where(.tcn-body) + :where(.tcn-footer) {\\n      border-top: calc(var(--scaffold-divide-footer) * 1px) solid\\n        var(--foreground-color-primary);\\n    }\\n\\n    :where(.tcn-utility-bar) {\\n      min-height: var(--scaffold-utility-bar-size);\\n      padding: 0 var(--scaffold-v-inset);\\n      gap: var(--gap-medium);\\n    }\\n\\n    :where(.tcn-body) {\\n      --section-tab-start: var(--scaffold-v-inset);\\n\\n      gap: var(--gap-medium);\\n      .tcn-section {\\n        --section-tab-start: var(--scaffold-v-inset);\\n      }\\n    }\\n\\n    :where(.tcn-footer) {\\n      gap: var(--gap-medium);\\n      min-height: var(--scaffold-footer-size);\\n      padding: 0 var(--scaffold-v-inset);\\n    }\\n  }\\n\\n  .tcn-frame-veil[data-is-veil=\\\"true\\\"] {\\n    background-color: rgba(0, 0, 0, 0.5);\\n  }\\n\\n  /* MODAL: */\\n  .tcn-modal {\\n    --divide-header: 0;\\n\\n    :where(.tcn-scaffold) {\\n      border-radius: var(--shape-radius-medium);\\n      background-color: var(--background-color-primary);\\n      overflow: hidden;\\n      border: 1px solid var(--foreground-color-primary);\\n    }\\n\\n    :where(.tcn-header) {\\n      --material: var(--ergo-secondary-dark);\\n      --on-material: var(--ergo-white);\\n      --action: var(--ergo-tertiary);\\n      --on-action: var(--ergo-secondary-dark);\\n\\n      background-color: var(--material);\\n      color: var(--on-material);\\n      :where(.tcn-typography) {\\n        color: inherit;\\n      }\\n    }\\n  }\\n\\n  /* WINDOW: */\\n  .tcn-window {\\n    --divide-header: 0;\\n\\n    :where(.tcn-scaffold) {\\n      box-shadow: 0px 4px 34px 0px #00000096;\\n      border-radius: var(--shape-radius-medium);\\n      background-color: var(--background-color-primary);\\n      overflow: hidden;\\n      border: 2px solid white;\\n    }\\n\\n    :where(.tcn-header) {\\n      --material: var(--ergo-secondary-dark);\\n      --on-material: var(--ergo-white);\\n      --action: var(--ergo-tertiary);\\n      --on-action: var(--ergo-secondary-dark);\\n\\n      background-color: var(--material);\\n      color: var(--on-material);\\n      :where(.tcn-typography) {\\n        color: inherit;\\n      }\\n    }\\n  }\\n\\n  .tcn-pop-confirm {\\n    --divide-header: 0;\\n    --v-inset: var(--padding-medium);\\n\\n    :where(.tcn-scaffold) {\\n      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);\\n      border-radius: var(--shape-radius-medium);\\n      background-color: var(--background-color-primary);\\n      overflow: hidden;\\n    }\\n\\n    :where(.tcn-header) {\\n      min-height: 32px;\\n\\n      --material: var(--ergo-secondary-dark);\\n      --on-material: var(--ergo-white);\\n      --action: var(--ergo-tertiary);\\n      --on-action: var(--ergo-secondary-dark);\\n\\n      background-color: var(--material);\\n      color: var(--on-material);\\n      :where(.tcn-typography) {\\n        color: inherit;\\n      }\\n    }\\n  }\\n\\n  .tcn-confirm {\\n    background-color: var(--background-color-primary);\\n  }\\n\\n  /* PANEL */\\n  .tcn-panel {\\n    background-color: var(--background-color-primary);\\n    border-radius: var(--shape-radius-medium);\\n    overflow: hidden;\\n  }\\n\\n  /* Card */\\n  .tcn-card {\\n    --header-size: 32px;\\n    --footer-size: 32px;\\n    --utility-bar-size: 24px;\\n    --divide-header: 0;\\n\\n    background-color: var(--background-color-primary);\\n    border-radius: var(--shape-radius-medium);\\n    border: 1px solid var(--foreground-color-primary);\\n    overflow: hidden;\\n\\n    :where(.tcn-header) {\\n      min-height: 32px;\\n\\n      --material: var(--ergo-secondary-light);\\n      --on-material: var(--ergo-accent-blue);\\n      --action: var(--ergo-secondary);\\n      --on-action: var(--ergo-white);\\n\\n      background-color: var(--material);\\n      color: var(--on-material);\\n      :where(.tcn-typography) {\\n        color: inherit;\\n      }\\n    }\\n  }\\n\\n  /* SECTION */\\n  .tcn-section {\\n    --max-section-depth: 4;\\n    --section-tab-width: 4px;\\n    --section-tab-start: 8px;\\n    --section-tab-depth: 0;\\n    --section-tab: calc(\\n      var(--section-tab-start) +\\n      (var(--section-tab-width) * var(--section-tab-depth))\\n    );\\n    --section-action: var(--ergo-secondary);\\n    --section-mat: var(--ergo-secondary-light);\\n    --section-on-mat: var(--ergo-ink-primary);\\n  }\\n\\n  .tcn-heading {\\n    background-color: #f1f1f1;\\n    padding-inline-start: 8px;\\n    height: 30px;\\n    z-index: 5;\\n  }\\n\\n  .tcn-section > .tcn-heading {\\n    z-index: calc(var(--max-section-depth) - var(--section-tab-depth));\\n    padding-inline-start: var(--section-tab);\\n    --material: var(--section-mat);\\n    --on-material: var(--section-on-mat);\\n    --action: var(--section-action);\\n    background-color: var(--material);\\n    color: var(--on-material);\\n    gap: var(--gap-small);\\n  }\\n\\n  .tcn-section > :not(.tcn-heading, .tcn-section) {\\n    padding-inline-start: var(--section-tab);\\n  }\\n\\n  .tcn-section > .tcn-section {\\n    --section-tab-depth: 1;\\n    --section-mat: var(--ergo-accent-blue-light);\\n    --section-action: var(--ergo-accent-blue);\\n  }\\n\\n  .tcn-section > .tcn-section > .tcn-section {\\n    --section-tab-depth: 2;\\n    --section-mat: var(--ergo-accent-green-light);\\n    --section-action: var(--ergo-accent-green-dark);\\n  }\\n\\n  .tcn-section > .tcn-section > .tcn-section > .tcn-section {\\n    --section-tab-depth: 3;\\n    --section-mat: var(--ergo-tertiary-light);\\n    --section-action: var(--ergo-tertiary-dark);\\n  }\\n\\n  .tcn-caret {\\n    --caret-size: 12px;\\n    --caret-triangle-height: calc(var(--caret-size) / 2);\\n    --caret-triangle-width: var(--caret-size);\\n    --caret-triangle-base: var(--caret-triangle-height) solid transparent;\\n    --caret-triangle-peak: var(--caret-triangle-width) solid var(--material);\\n\\n    width: 0;\\n    height: 0;\\n    flex-grow: 0;\\n    display: inline-block;\\n\\n    &[data-direction=\\\"top\\\"] {\\n      border-bottom: var(--caret-triangle-peak);\\n      border-left: var(--caret-triangle-base);\\n      border-right: var(--caret-triangle-base);\\n    }\\n\\n    &[data-direction=\\\"bottom\\\"] {\\n      border-top: var(--caret-triangle-peak);\\n      border-left: var(--caret-triangle-base);\\n      border-right: var(--caret-triangle-base);\\n    }\\n\\n    &[data-direction=\\\"start\\\"] {\\n      border-right: var(--caret-triangle-peak);\\n      border-top: var(--caret-triangle-base);\\n      border-bottom: var(--caret-triangle-base);\\n    }\\n\\n    &[data-direction=\\\"end\\\"] {\\n      border-left: var(--caret-triangle-peak);\\n      border-top: var(--caret-triangle-base);\\n      border-bottom: var(--caret-triangle-base);\\n    }\\n  }\\n}\\n\"","import css from './ergo_theme.css?raw';\nimport '@fontsource/lato';\n\nexport const ergoStyleSheet = new CSSStyleSheet();\nergoStyleSheet.replaceSync(css);\n"],"names":["css","ergoStyleSheet"],"mappings":";AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCGFC,IAAiB,IAAI,cAAA;AAClCA,EAAe,YAAYD,CAAG;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -142,7 +142,7 @@
     "clsx": "^2.1.1",
     "react-color": "^2.19.3",
     "@tcn/icons": "2.2.1",
-    "@tcn/state": "1.1.1"
+    "@tcn/state": "1.2.0"
   },
   "scripts": {
     "build": "vite build",

package/src/form/field_presenters/field_presenter.ts

@@ -1,4 +1,4 @@
-import { ISubscription, Runner, Signal, WeakPromise } from '@tcn/state';
+import { ISubscription, Runner, Signal, IWeakPromise } from '@tcn/state';
 
 function fastCopy<T>(value: T): T {
   return JSON.parse(JSON.stringify(value));
@@ -19,7 +19,7 @@ export interface FieldState<T> {
 
 export interface FieldOptions<T> {
   description?: string;
-  validate?: (value: T) => Promise<void> | void;
+  validate?: (value: T) => Promise<void> | void | IWeakPromise<void>;
   validateOnChange?: boolean;
   equalityCheck?: (a: T, b: T) => boolean;
   copyInitialValue?: (value: T) => T;
@@ -35,7 +35,7 @@ export class FieldPresenter<T> {
   private _cloneInitialValue: (v: T) => T;
 
   private _validationRunner: Runner<void>;
-  private _validate: (value: T) => Promise<void> | void | WeakPromise<void>;
+  private _validate: (value: T) => Promise<void> | void | IWeakPromise<void>;
   private _subscriptions: ISubscription<any>[];
   private _validateOnChange: boolean;
   private _cancelToken = 'field_presenter_cancel';

package/src/navigation/tabs/primitives/tabs_list.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type FC, type PropsWithChildren } from 'react';
+import { forwardRef, useCallback, type FC, type PropsWithChildren } from 'react';
 import { type BaseButtonProps } from '../../../actions/index.js';
 import { HStack, type HStackProps } from '../../../stacks/h_stack.js';
 import clsx from 'clsx';
@@ -6,15 +6,59 @@ import { Toggle } from '../../../actions/toggle/toggle.js';
 
 export type TabsListProps = HStackProps;
 
+const navigateTabs = (event: React.KeyboardEvent<HTMLDivElement>) => {
+  const tabs = Array.from(event.currentTarget.querySelectorAll(':scope > [role="tab"]'));
+  const currentTab = event.currentTarget.querySelector(':focus');
+  const currentIndex = currentTab ? tabs.indexOf(currentTab) : -1;
+  if (currentIndex === -1) return; // Exit if the focused element is not a tab
+  let newIndex = 0;
+
+  switch (event.key) {
+    case 'ArrowRight':
+      newIndex = (currentIndex + 1) % tabs.length;
+      break;
+    case 'ArrowLeft':
+      newIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+      break;
+    case 'Home':
+      newIndex = 0;
+      break;
+    case 'End':
+      newIndex = tabs.length - 1;
+      break;
+    default:
+      return; // Exit if the key is not recognized
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+  tabs[newIndex]['focus']();
+};
+
 export const TabsList: FC<PropsWithChildren<TabsListProps>> = ({
   children,
   className,
   role = 'tablist',
   as = 'menu',
+  onKeyDown,
   ...props
 }) => {
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      navigateTabs(event);
+      onKeyDown && onKeyDown(event);
+    },
+    [onKeyDown]
+  );
+
   return (
-    <HStack as={as} role={role} className={clsx('tcn-tabs-list', className)} {...props}>
+    <HStack
+      onKeyDown={handleKeyDown}
+      as={as}
+      role={role}
+      className={clsx('tcn-tabs-list', className)}
+      {...props}
+    >
       {children}
     </HStack>
   );

package/src/navigation/tabs/state/link/tab_link.tsx

@@ -13,7 +13,7 @@ export interface TabLinkProps
     TabLinkOwnProps {}
 
 export const TabLink = forwardRef<HTMLButtonElement, PropsWithChildren<TabLinkProps>>(
-  ({ children, value, onClick, minWidth, maxWidth, ...props }, forwardedRef) => {
+  ({ children, value, onClick, minWidth, maxWidth, id, ...props }, forwardedRef) => {
     const { ref: internalRef, isMatch } = useTabLink(value);
     const state = useTabs();
     const ref = useForkRef(internalRef, forwardedRef);
@@ -36,6 +36,9 @@ export const TabLink = forwardRef<HTMLButtonElement, PropsWithChildren<TabLinkPr
         onClick={handleClick}
         minWidth={pickMinWidth}
         maxWidth={pickMaxWidth}
+        id={`tab-${value}`}
+        aria-controls={`tabpanel-${value}`}
+        tabIndex={isMatch ? 0 : -1}
         {...props}
       >
         {children}

package/src/navigation/tabs/state/tab.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { FC, PropsWithChildren } from 'react';
 import { useTabs } from './context.js';
 
@@ -8,5 +9,14 @@ export interface TabProps {
 export const Tab: FC<PropsWithChildren<TabProps>> = ({ value, children }) => {
   const state = useTabs();
   if (state.value !== value) return null;
+
+  if (children && React.isValidElement(children)) {
+    return React.cloneElement(children, {
+      ...children.props,
+      id: children.props.id ?? `tabpanel-${value}`,
+      role: children.props.role ?? 'tabpanel',
+    });
+  }
+
   return children;
 };

package/src/themes/themes/ergo/ergo_theme.css

@@ -499,8 +499,12 @@
         --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;