@mhmo91/schmancy 0.2.194 → 0.2.196

package/dist/surface-h9dLHMTm.js

@@ -0,0 +1,113 @@
+import { e as y, n as i } from "./provide-hwQSumt-.js";
+import { T as d } from "./tailwind.mixin-Du4i6vQR.js";
+import { css as u, html as p } from "lit";
+import { property as t, customElement as f } from "lit/decorators.js";
+var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (h, e, a, c) => {
+  for (var n, o = c > 1 ? void 0 : c ? v(e, a) : e, l = h.length - 1; l >= 0; l--) (n = h[l]) && (o = (c ? n(e, a, o) : n(o)) || o);
+  return c && o && m(e, a, o), o;
+};
+const b = i("surface");
+let r = class extends d(u`
+	:host {
+		display: block;
+		position: relative;
+		inset: 0;
+		box-sizing: border-box;
+	}
+	
+	/* Fill styles */
+	:host([fill='all']) {
+		height: 100%;
+		width: 100%;
+	}
+	:host([fill='width']) {
+		width: 100%;
+	}
+	:host([fill='height']) {
+		height: 100%;
+	}
+	
+	/* Rounded corner styles */
+	:host([rounded='none']) {
+		border-radius: 0;
+	}
+	:host([rounded='top']) {
+		border-radius: 8px 8px 0 0;
+	}
+	:host([rounded='left']) {
+		border-radius: 8px 0 0 8px;
+	}
+	:host([rounded='right']) {
+		border-radius: 0 8px 8px 0;
+	}
+	:host([rounded='bottom']) {
+		border-radius: 0 0 8px 8px;
+	}
+	:host([rounded='all']) {
+		border-radius: 8px;
+	}
+	
+	/* Elevation styles */
+	:host([elevation='1']) {
+		box-shadow: var(--schmancy-sys-elevation-1);
+	}
+	:host([elevation='2']) {
+		box-shadow: var(--schmancy-sys-elevation-2);
+	}
+	:host([elevation='3']) {
+		box-shadow: var(--schmancy-sys-elevation-3);
+	}
+	:host([elevation='4']) {
+		box-shadow: var(--schmancy-sys-elevation-4);
+	}
+	:host([elevation='5']) {
+		box-shadow: var(--schmancy-sys-elevation-5);
+	}
+	
+	/* Surface type styles - background and text colors */
+	:host([type='surface']) {
+		background-color: var(--schmancy-sys-color-surface-default);
+		color: var(--schmancy-sys-color-surface-on);
+	}
+	:host([type='surfaceDim']) {
+		background-color: var(--schmancy-sys-color-surface-dim);
+		color: var(--schmancy-sys-color-surface-on);
+	}
+	:host([type='surfaceBright']) {
+		background-color: var(--schmancy-sys-color-surface-bright);
+		color: var(--schmancy-sys-color-surface-on);
+	}
+	:host([type='containerLowest']) {
+		background-color: var(--schmancy-sys-color-surface-lowest);
+		color: var(--schmancy-sys-color-surface-on);
+	}
+	:host([type='containerLow']) {
+		background-color: var(--schmancy-sys-color-surface-low);
+		color: var(--schmancy-sys-color-surface-on);
+	}
+	:host([type='container']) {
+		background-color: var(--schmancy-sys-color-surface-container);
+		color: var(--schmancy-sys-color-surface-on);
+	}
+	:host([type='containerHigh']) {
+		background-color: var(--schmancy-sys-color-surface-high);
+		color: var(--schmancy-sys-color-surface-on);
+	}
+	:host([type='containerHighest']) {
+		background-color: var(--schmancy-sys-color-surface-highest);
+		color: var(--schmancy-sys-color-surface-on);
+	}
+`) {
+  constructor() {
+    super(...arguments), this.fill = "auto", this.rounded = "none", this.type = "surface", this.elevation = 0;
+  }
+  render() {
+    return p`<slot></slot>`;
+  }
+};
+s([t({ type: String, reflect: !0 })], r.prototype, "fill", 2), s([t({ reflect: !0 })], r.prototype, "rounded", 2), s([y({ context: b }), t({ reflect: !0 })], r.prototype, "type", 2), s([t({ type: Number, reflect: !0 })], r.prototype, "elevation", 2), r = s([f("schmancy-surface")], r);
+export {
+  b as S,
+  r as a
+};
+//# sourceMappingURL=surface-h9dLHMTm.js.map

package/dist/surface-h9dLHMTm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface-h9dLHMTm.js","sources":["../src/surface/surface.ts"],"sourcesContent":["import { createContext, provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/tailwind.mixin'\nimport { TSurfaceColor } from '@schmancy/types'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nexport const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')\n\nexport type SchmancySurfaceFill = 'all' | 'width' | 'height' | 'auto'\n/**\n * `<schmancy-surface>` component\n *\n * This component renders a styled container that adapts its dimensions based on the `fill` property.\n * It supports various rounding options, elevation levels, and applies background and text color classes\n * based on the specified surface variant. Additionally, when the `scroller` property is true, the component\n * enables internal scrolling by applying overflow and scroll-behavior styles.\n *\n * @element schmancy-surface\n * @slot - Default slot for projecting child content.\n *\n * @example\n * <schmancy-surface fill=\"all\" rounded=\"all\" elevation=\"3\" type=\"surfaceBright\" scroller>\n *   <p>Your scrollable content here</p>\n * </schmancy-surface>\n */\n@customElement('schmancy-surface')\nexport class SchmancySurface extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tinset: 0;\n\t\tbox-sizing: border-box;\n\t}\n\t\n\t/* Fill styles */\n\t:host([fill='all']) {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t:host([fill='width']) {\n\t\twidth: 100%;\n\t}\n\t:host([fill='height']) {\n\t\theight: 100%;\n\t}\n\t\n\t/* Rounded corner styles */\n\t:host([rounded='none']) {\n\t\tborder-radius: 0;\n\t}\n\t:host([rounded='top']) {\n\t\tborder-radius: 8px 8px 0 0;\n\t}\n\t:host([rounded='left']) {\n\t\tborder-radius: 8px 0 0 8px;\n\t}\n\t:host([rounded='right']) {\n\t\tborder-radius: 0 8px 8px 0;\n\t}\n\t:host([rounded='bottom']) {\n\t\tborder-radius: 0 0 8px 8px;\n\t}\n\t:host([rounded='all']) {\n\t\tborder-radius: 8px;\n\t}\n\t\n\t/* Elevation styles */\n\t:host([elevation='1']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-1);\n\t}\n\t:host([elevation='2']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-2);\n\t}\n\t:host([elevation='3']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-3);\n\t}\n\t:host([elevation='4']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-4);\n\t}\n\t:host([elevation='5']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-5);\n\t}\n\t\n\t/* Surface type styles - background and text colors */\n\t:host([type='surface']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-default);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='surfaceDim']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-dim);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='surfaceBright']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-bright);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerLowest']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-lowest);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerLow']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-low);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='container']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-container);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerHigh']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-high);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerHighest']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-highest);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n`) {\n\t/**\n\t * Fill the width and/or height of the parent container.\n\t * Options: 'all', 'width', 'height', 'auto'.\n\t * @default 'auto'\n\t */\n\t@property({ type: String, reflect: true })\n\tfill: 'all' | 'width' | 'height' | 'auto' = 'auto'\n\n\t/**\n\t * Specifies the rounding style of the component's corners.\n\t * Options: 'none', 'top', 'left', 'right', 'bottom', 'all'.\n\t * @default 'none'\n\t */\n\t@property({ reflect: true })\n\trounded: 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all' = 'none'\n\n\t/**\n\t * Specifies the surface type for styling.\n\t * Provided to descendant components via context.\n\t * Options: 'surface', 'surfaceDim', 'surfaceBright', 'containerLowest',\n\t * 'containerLow', 'container', 'containerHigh', 'containerHighest'.\n\t * @default 'surface'\n\t */\n\t@provide({ context: SchmancySurfaceTypeContext })\n\t@property({ reflect: true })\n\ttype: TSurfaceColor = 'surface'\n\n\t/**\n\t * Defines the elevation level (shadow depth) of the surface.\n\t * Valid values: 0, 1, 2, 3, 4, 5.\n\t * @default 0\n\t */\n\t@property({ type: Number, reflect: true })\n\televation: 0 | 1 | 2 | 3 | 4 | 5 = 0\n\n\tprotected render(): unknown {\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-surface': SchmancySurface\n\t}\n}"],"names":["SchmancySurfaceTypeContext","createContext","SchmancySurface","TailwindElement","css","super","arguments","this","fill","rounded","type","elevation","render","html","__decorateClass","property","String","reflect","prototype","provide","context","Number","customElement"],"mappings":";;;;;;;;AAMa,MAAAA,IAA6BC,EAA6B,SAoB1D;AAAA,IAAAC,IAAN,cAA8BC,EAAgBC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAA9C,EAAA;AAAA,EAAA;AAAAC,UAAAC,GAAAA,SAAAA,GAiGsCC,KAAAC,OAAA,QAQoBD,KAAAE,UAAA,QAW1CF,KAAAG,OAAA,WAQaH,KAAAI,YAAA;AAAA,EAAA;AAAA,EAEzB,SAAAC;AACF,WAAAC;AAAAA,EAAA;AA9BRC;AAAAA,EAAA,CADCC,EAAS,EAAEL,MAAMM,QAAQC,SAAS,GAAA,CAAA,CAAA,GAhGvBf,EAiGZgB,WAAA,QAAA,CAQAJ,GAAAA,EAAA,CADCC,EAAS,EAAEE,SAAS,GAAA,CAAA,CAAA,GAxGTf,EAyGZgB,WAAA,WAAA,CAWAJ,GAAAA,EAAA,CAFCK,EAAQ,EAAEC,SAASpB,EAAAA,CAAAA,GACnBe,EAAS,EAAEE,SAAAA,GAnHAf,CAAAA,CAAAA,GAAAA,EAoHZgB,WAAA,QAAA,CAAA,GAQAJ,EAAA,CADCC,EAAS,EAAEL,MAAMW,QAAQJ,SAAAA,QA3Hdf,EA4HZgB,WAAA,aAAA,CAAA,GA5HYhB,IAANY,EAAA,CADNQ,EAAc,kBAAA,CAAA,GACFpB;"}

package/dist/surface.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./surface-BTuzKmT2.cjs");Object.defineProperty(exports,"SchmancySurface",{enumerable:!0,get:()=>e.SchmancySurface}),exports.SchmancySurfaceTypeContext=e.SchmancySurfaceTypeContext;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./surface-BAEUiWcq.cjs");Object.defineProperty(exports,"SchmancySurface",{enumerable:!0,get:()=>e.SchmancySurface}),exports.SchmancySurfaceTypeContext=e.SchmancySurfaceTypeContext;
 //# sourceMappingURL=surface.cjs.map

package/dist/surface.js

@@ -1,4 +1,4 @@
-import { a as e, S } from "./surface-DXx1bJN4.js";
+import { a as e, S } from "./surface-h9dLHMTm.js";
 export {
   e as SchmancySurface,
   S as SchmancySurfaceTypeContext

package/dist/{table-CqUv1TOC.js → table-CxazXBjI.js}

@@ -1,21 +1,21 @@
-import { _ as g } from "./tslib.es6-ujVQHAQ4.js";
-import { html as c, noChange as P, LitElement as H } from "lit";
-import { property as f } from "lit/decorators/property.js";
+import { _ as f } from "./tslib.es6-ujVQHAQ4.js";
+import { html as a, noChange as P, LitElement as H } from "lit";
+import { property as v } from "lit/decorators/property.js";
 import { directive as W, PartType as q } from "lit/directive.js";
 import { AsyncDirective as U } from "lit/async-directive.js";
 import { repeat as G } from "lit/directives/repeat.js";
-import { $ as D } from "./litElement.mixin-B9Qdq5S_.js";
-import { property as _, customElement as M, state as z } from "lit/decorators.js";
-var J = Object.defineProperty, X = Object.getOwnPropertyDescriptor, b = (s, t, e, i) => {
+import { $ as D } from "./litElement.mixin-C6PzcPXd.js";
+import { property as _, customElement as M, state as x } from "lit/decorators.js";
+var J = Object.defineProperty, X = Object.getOwnPropertyDescriptor, w = (s, t, e, i) => {
   for (var r, l = i > 1 ? void 0 : i ? X(t, e) : t, o = s.length - 1; o >= 0; o--) (r = s[o]) && (l = (i ? r(t, e, l) : r(l)) || l);
   return i && l && J(t, e, l), l;
 };
-let v = class extends D() {
+let b = class extends D() {
   constructor() {
     super(...arguments), this.columns = [], this.cols = this.columns.map(() => "1fr").join(" ");
   }
   renderCell(s) {
-    if (s.render) return c`
+    if (s.render) return a`
 				<div class="overflow-hidden text-ellipsis">
 					<schmancy-typography align="${s.align || "left"}" maxLines="2" weight="${s.weight || "normal"}">
 						${s.render(this.item)}
@@ -23,7 +23,7 @@ let v = class extends D() {
 				</div>
 			`;
     const t = s.key ? this.item[s.key] : "";
-    return c`
+    return a`
 			<div class="overflow-hidden text-ellipsis">
 				<schmancy-typography align="${s.align || "left"}" maxLines="2" weight="${s.weight || "normal"}">
 					${t}
@@ -32,7 +32,7 @@ let v = class extends D() {
 		`;
   }
   render() {
-    return c`
+    return a`
 			<schmancy-list-item class="w-full">
 				<schmancy-grid .cols=${this.cols} align="center" gap="md">
 					${this.columns.map((s) => this.renderCell(s))}
@@ -41,25 +41,25 @@ let v = class extends D() {
 		`;
   }
 };
-b([_({ type: Array, attribute: !1 })], v.prototype, "columns", 2), b([_({ type: Object, attribute: !1 })], v.prototype, "item", 2), b([_({ type: String })], v.prototype, "cols", 2), v = b([M("schmancy-table-row")], v);
-class S extends Event {
-  constructor(t) {
-    super(S.eventName, { bubbles: !1 }), this.first = t.first, this.last = t.last;
-  }
-}
-S.eventName = "rangeChanged";
+w([_({ type: Array, attribute: !1 })], b.prototype, "columns", 2), w([_({ type: Object, attribute: !1 })], b.prototype, "item", 2), w([_({ type: String })], b.prototype, "cols", 2), b = w([M("schmancy-table-row")], b);
 class E extends Event {
   constructor(t) {
     super(E.eventName, { bubbles: !1 }), this.first = t.first, this.last = t.last;
   }
 }
-E.eventName = "visibilityChanged";
+E.eventName = "rangeChanged";
 class L extends Event {
+  constructor(t) {
+    super(L.eventName, { bubbles: !1 }), this.first = t.first, this.last = t.last;
+  }
+}
+L.eventName = "visibilityChanged";
+class z extends Event {
   constructor() {
-    super(L.eventName, { bubbles: !1 });
+    super(z.eventName, { bubbles: !1 });
   }
 }
-L.eventName = "unpinned";
+z.eventName = "unpinned";
 class Y {
   constructor(t) {
     this._element = null;
@@ -153,7 +153,7 @@ class K extends Y {
   }
 }
 let k = typeof window < "u" ? window.ResizeObserver : void 0;
-const x = Symbol("virtualizerRef"), w = "virtualizer-sizer";
+const T = Symbol("virtualizerRef"), C = "virtualizer-sizer";
 let O;
 class Q {
   constructor(t) {
@@ -174,7 +174,7 @@ class Q {
   }
   _initHostElement(t) {
     const e = this._hostElement = t.hostElement;
-    this._applyVirtualizerStyles(), e[x] = this;
+    this._applyVirtualizerStyles(), e[T] = this;
   }
   connected() {
     this._initObservers();
@@ -182,10 +182,10 @@ class Q {
     this._clippingAncestors = function(e, i = !1) {
       let r = !1;
       return function(l, o = !1) {
-        const a = [];
+        const c = [];
         let h = o ? l : V(l);
-        for (; h !== null; ) a.push(h), h = V(h);
-        return a;
+        for (; h !== null; ) c.push(h), h = V(h);
+        return c;
       }(e, i).filter((l) => {
         if (r) return !1;
         const o = getComputedStyle(l);
@@ -209,8 +209,8 @@ class Q {
   _getSizer() {
     const t = this._hostElement;
     if (!this._sizer) {
-      let e = t.querySelector(`[${w}]`);
-      e || (e = document.createElement("div"), e.setAttribute(w, ""), t.appendChild(e)), Object.assign(e.style, { position: "absolute", margin: "-2px 0 0 0", padding: 0, visibility: "hidden", fontSize: "2px" }), e.textContent = "&nbsp;", e.setAttribute(w, ""), this._sizer = e;
+      let e = t.querySelector(`[${C}]`);
+      e || (e = document.createElement("div"), e.setAttribute(C, ""), t.appendChild(e)), Object.assign(e.style, { position: "absolute", margin: "-2px 0 0 0", padding: 0, visibility: "hidden", fontSize: "2px" }), e.textContent = "&nbsp;", e.setAttribute(C, ""), this._sizer = e;
     }
     return this._sizer;
   }
@@ -254,7 +254,7 @@ class Q {
     const { width: e, height: i } = t.getBoundingClientRect();
     return Object.assign({ width: e, height: i }, function(r) {
       const l = window.getComputedStyle(r);
-      return { marginTop: C(l.marginTop), marginRight: C(l.marginRight), marginBottom: C(l.marginBottom), marginLeft: C(l.marginLeft) };
+      return { marginTop: S(l.marginTop), marginRight: S(l.marginRight), marginBottom: S(l.marginBottom), marginLeft: S(l.marginLeft) };
     }(t));
   }
   async _schedule(t) {
@@ -286,25 +286,25 @@ class Q {
     t.type === "scroll" && (t.currentTarget === window || this._clippingAncestors.includes(t.currentTarget)) && this._handleScrollEvent();
   }
   _handleLayoutMessage(t) {
-    t.type === "stateChanged" ? this._updateDOM(t) : t.type === "visibilityChanged" ? (this._firstVisible = t.firstVisible, this._lastVisible = t.lastVisible, this._notifyVisibility()) : t.type === "unpinned" && this._hostElement.dispatchEvent(new L());
+    t.type === "stateChanged" ? this._updateDOM(t) : t.type === "visibilityChanged" ? (this._firstVisible = t.firstVisible, this._lastVisible = t.lastVisible, this._notifyVisibility()) : t.type === "unpinned" && this._hostElement.dispatchEvent(new z());
   }
   get _children() {
     const t = [];
     let e = this._hostElement.firstElementChild;
-    for (; e; ) e.hasAttribute(w) || t.push(e), e = e.nextElementSibling;
+    for (; e; ) e.hasAttribute(C) || t.push(e), e = e.nextElementSibling;
     return t;
   }
   _updateView() {
     var r;
     const t = this._hostElement, e = (r = this._scrollerController) == null ? void 0 : r.element, i = this._layout;
     if (t && e && i) {
-      let l, o, a, h;
+      let l, o, c, h;
       const n = t.getBoundingClientRect();
-      l = 0, o = 0, a = window.innerHeight, h = window.innerWidth;
+      l = 0, o = 0, c = window.innerHeight, h = window.innerWidth;
       const y = this._clippingAncestors.map((m) => m.getBoundingClientRect());
       y.unshift(n);
-      for (const m of y) l = Math.max(l, m.top), o = Math.max(o, m.left), a = Math.min(a, m.bottom), h = Math.min(h, m.right);
-      const T = e.getBoundingClientRect(), $ = { left: n.left - T.left, top: n.top - T.top }, F = { width: e.scrollWidth, height: e.scrollHeight }, N = l - n.top + t.scrollTop, A = o - n.left + t.scrollLeft, B = Math.max(0, a - l), j = Math.max(0, h - o);
+      for (const m of y) l = Math.max(l, m.top), o = Math.max(o, m.left), c = Math.min(c, m.bottom), h = Math.min(h, m.right);
+      const g = e.getBoundingClientRect(), $ = { left: n.left - g.left, top: n.top - g.top }, F = { width: e.scrollWidth, height: e.scrollHeight }, N = l - n.top + t.scrollTop, A = o - n.left + t.scrollLeft, B = Math.max(0, c - l), j = Math.max(0, h - o);
       i.viewportSize = { width: j, height: B }, i.viewportScroll = { top: N, left: A }, i.totalScrollSize = F, i.offsetWithinScroller = $;
     }
   }
@@ -317,9 +317,9 @@ class Q {
     }
   }
   _positionChildren(t) {
-    t && t.forEach(({ top: e, left: i, width: r, height: l, xOffset: o, yOffset: a }, h) => {
+    t && t.forEach(({ top: e, left: i, width: r, height: l, xOffset: o, yOffset: c }, h) => {
       const n = this._children[h - this._first];
-      n && (n.style.position = "absolute", n.style.boxSizing = "border-box", n.style.transform = `translate(${i}px, ${e}px)`, r !== void 0 && (n.style.width = r + "px"), l !== void 0 && (n.style.height = l + "px"), n.style.left = o === void 0 ? null : o + "px", n.style.top = a === void 0 ? null : a + "px");
+      n && (n.style.position = "absolute", n.style.boxSizing = "border-box", n.style.transform = `translate(${i}px, ${e}px)`, r !== void 0 && (n.style.width = r + "px"), l !== void 0 && (n.style.height = l + "px"), n.style.left = o === void 0 ? null : o + "px", n.style.top = c === void 0 ? null : c + "px");
     });
   }
   async _adjustRange(t) {
@@ -348,10 +348,10 @@ class Q {
     e && (t != null && t.has(e)) && this._updateScrollIntoViewCoordinates(this._layout.getScrollIntoViewCoordinates(this._scrollIntoViewTarget));
   }
   _notifyRange() {
-    this._hostElement.dispatchEvent(new S({ first: this._first, last: this._last }));
+    this._hostElement.dispatchEvent(new E({ first: this._first, last: this._last }));
   }
   _notifyVisibility() {
-    this._hostElement.dispatchEvent(new E({ first: this._firstVisible, last: this._lastVisible }));
+    this._hostElement.dispatchEvent(new L({ first: this._firstVisible, last: this._lastVisible }));
   }
   get layoutComplete() {
     return this._layoutCompletePromise || (this._layoutCompletePromise = new Promise((t, e) => {
@@ -384,7 +384,7 @@ class Q {
     this._scheduleLayoutComplete(), this._itemsChanged = !1, this._rangeChanged = !1;
   }
 }
-function C(s) {
+function S(s) {
   const t = s ? parseFloat(s) : NaN;
   return Number.isNaN(t) ? 0 : t;
 }
@@ -394,7 +394,7 @@ function V(s) {
   const t = s.parentNode;
   return t && t.nodeType === Node.DOCUMENT_FRAGMENT_NODE && t.host || null;
 }
-const R = (s) => s, I = (s, t) => c`${t}: ${JSON.stringify(s, null, 2)}`, Z = W(class extends U {
+const R = (s) => s, I = (s, t) => a`${t}: ${JSON.stringify(s, null, 2)}`, Z = W(class extends U {
   constructor(s) {
     if (super(s), this._virtualizer = null, this._first = 0, this._last = -1, this._renderItem = (t, e) => I(t, e + this._first), this._keyFunction = (t, e) => R(t, this._first), this._items = [], s.type !== q.CHILD) throw new Error("The virtualize directive can only be used in child expressions");
   }
@@ -449,22 +449,22 @@ class p extends H {
   }
   render() {
     const { items: t, renderItem: e, keyFunction: i, layout: r, scroller: l } = this;
-    return c`${Z({ items: t, renderItem: e, keyFunction: i, layout: r, scroller: l })}`;
+    return a`${Z({ items: t, renderItem: e, keyFunction: i, layout: r, scroller: l })}`;
   }
   element(t) {
     var e;
-    return (e = this[x]) == null ? void 0 : e.element(t);
+    return (e = this[T]) == null ? void 0 : e.element(t);
   }
   get layoutComplete() {
     var t;
-    return (t = this[x]) == null ? void 0 : t.layoutComplete;
+    return (t = this[T]) == null ? void 0 : t.layoutComplete;
   }
   scrollToIndex(t, e = "start") {
     var i;
     (i = this.element(t)) == null || i.scrollIntoView({ block: e });
   }
 }
-g([f({ attribute: !1 })], p.prototype, "items", void 0), g([f()], p.prototype, "renderItem", void 0), g([f()], p.prototype, "keyFunction", void 0), g([f({ attribute: !1 })], p.prototype, "layout", void 0), g([f({ reflect: !0, type: Boolean })], p.prototype, "scroller", void 0), customElements.define("lit-virtualizer", p);
+f([v({ attribute: !1 })], p.prototype, "items", void 0), f([v()], p.prototype, "renderItem", void 0), f([v()], p.prototype, "keyFunction", void 0), f([v({ attribute: !1 })], p.prototype, "layout", void 0), f([v({ reflect: !0, type: Boolean })], p.prototype, "scroller", void 0), customElements.define("lit-virtualizer", p);
 var tt = Object.defineProperty, et = Object.getOwnPropertyDescriptor, d = (s, t, e, i) => {
   for (var r, l = i > 1 ? void 0 : i ? et(t, e) : t, o = s.length - 1; o >= 0; o--) (r = s[o]) && (l = (i ? r(t, e, l) : r(l)) || l);
   return i && l && tt(t, e, l), l;
@@ -481,20 +481,24 @@ let u = class extends D() {
   }
   processData() {
     let s = [...this.data];
-    this.sortable && this.sortColumn && this.sortDirection && s.sort((t, e) => {
-      const i = t[this.sortColumn], r = e[this.sortColumn];
-      if (i == null) return this.sortDirection === "asc" ? 1 : -1;
-      if (r == null) return this.sortDirection === "asc" ? -1 : 1;
-      if (typeof i == "number" && typeof r == "number") return this.sortDirection === "asc" ? i - r : r - i;
-      const l = typeof i == "string" && !isNaN(Number(i)), o = typeof r == "string" && !isNaN(Number(r));
-      if (l && o) {
-        const n = parseFloat(i), y = parseFloat(r);
-        return this.sortDirection === "asc" ? n - y : y - n;
-      }
-      if (this.isDate(i) && this.isDate(r)) return this.sortDirection === "asc" ? i.getTime() - r.getTime() : r.getTime() - i.getTime();
-      const a = String(i), h = String(r);
-      return this.sortDirection === "asc" ? a.localeCompare(h) : h.localeCompare(a);
-    }), this.filteredData = s;
+    if (this.sortable && this.sortColumn && this.sortDirection) {
+      const t = this.columns.find((e) => e.key === this.sortColumn);
+      s.sort((e, i) => {
+        let r, l;
+        if (t && t.value ? (r = t.value(e), l = t.value(i)) : (r = e[this.sortColumn], l = i[this.sortColumn]), r == null) return this.sortDirection === "asc" ? 1 : -1;
+        if (l == null) return this.sortDirection === "asc" ? -1 : 1;
+        if (typeof r == "number" && typeof l == "number") return this.sortDirection === "asc" ? r - l : l - r;
+        const o = typeof r == "string" && !isNaN(Number(r)), c = typeof l == "string" && !isNaN(Number(l));
+        if (o && c) {
+          const y = parseFloat(r), g = parseFloat(l);
+          return this.sortDirection === "asc" ? y - g : g - y;
+        }
+        if (this.isDate(r) && this.isDate(l)) return this.sortDirection === "asc" ? r.getTime() - l.getTime() : l.getTime() - r.getTime();
+        const h = String(r), n = String(l);
+        return this.sortDirection === "asc" ? h.localeCompare(n) : n.localeCompare(h);
+      });
+    }
+    this.filteredData = s;
   }
   toggleSort(s) {
     if (!s.key || s.sortable === !1) return;
@@ -502,20 +506,20 @@ let u = class extends D() {
     t === this.sortColumn ? this.sortDirection === "asc" ? this.sortDirection = "desc" : this.sortDirection === "desc" ? this.sortDirection = null : this.sortDirection = "asc" : (this.sortColumn = t, this.sortDirection = "asc"), this.dispatchEvent(new CustomEvent("sort-change", { detail: { column: this.sortColumn, direction: this.sortDirection }, bubbles: !0, composed: !0 }));
   }
   renderSortIndicator(s) {
-    return this.sortable && s.sortable !== !1 && s.key && s.key === this.sortColumn ? c`
+    return this.sortable && s.sortable !== !1 && s.key && s.key === this.sortColumn ? a`
 			<span class="ml-1">
-				${this.sortDirection === "asc" ? c`<schmancy-icon size="16px">arrow_upward</schmancy-icon>` : this.sortDirection === "desc" ? c`<schmancy-icon size="16px">arrow_downward</schmancy-icon>` : null}
+				${this.sortDirection === "asc" ? a`<schmancy-icon size="16px">arrow_upward</schmancy-icon>` : this.sortDirection === "desc" ? a`<schmancy-icon size="16px">arrow_downward</schmancy-icon>` : null}
 			</span>
 		` : null;
   }
   render() {
     const s = (t) => ({ "flex items-center": !0, "cursor-pointer gap-1": this.sortable && t.sortable !== !1 && t.key });
-    return c`
+    return a`
 			<schmancy-surface fill="all" type="container" rounded="all" elevation="2">
 				<schmancy-grid class="h-full w-full" cols="1fr" rows="auto 1fr">
 					<schmancy-surface rounded="top" elevation="1" type="containerHighest" class="sticky top-0 z-10">
 						<schmancy-grid align="center" class="px-4 py-3" .cols=${this.cols} gap="md" rows="1fr">
-							${this.columns.map((t) => c`
+							${this.columns.map((t) => a`
 									<div
 										class=${this.classMap(s(t))}
 										@click=${() => this.sortable && t.sortable !== !1 ? this.toggleSort(t) : null}
@@ -529,12 +533,12 @@ let u = class extends D() {
 						</schmancy-grid>
 					</schmancy-surface>
 
-					${this.filteredData.length > 0 ? c`
+					${this.filteredData.length > 0 ? a`
 								<lit-virtualizer
 									scroller
 									class="w-full h-full relative overflow-auto"
 									.items=${this.filteredData}
-									.renderItem=${(t, e) => c`
+									.renderItem=${(t, e) => a`
 											<schmancy-table-row
 												class="w-full border-b border-solid border-outlineVariant"
 												.columns=${this.columns}
@@ -547,7 +551,7 @@ let u = class extends D() {
 											></schmancy-table-row>
 										`}
 								></lit-virtualizer>
-							` : c`
+							` : a`
 								<div class="flex items-center justify-center w-full h-full p-8 text-center">
 									<schmancy-typography type="body" token="lg"> No data available </schmancy-typography>
 								</div>
@@ -557,9 +561,9 @@ let u = class extends D() {
 		`;
   }
 };
-d([_({ type: Array, attribute: !1 })], u.prototype, "columns", 2), d([_({ type: Array, attribute: !1 })], u.prototype, "data", 2), d([_({ type: String })], u.prototype, "keyField", 2), d([_({ type: String })], u.prototype, "cols", 2), d([_({ type: Boolean })], u.prototype, "sortable", 2), d([z()], u.prototype, "sortColumn", 2), d([z()], u.prototype, "sortDirection", 2), d([z()], u.prototype, "filteredData", 2), u = d([M("schmancy-table")], u);
+d([_({ type: Array, attribute: !1 })], u.prototype, "columns", 2), d([_({ type: Array, attribute: !1 })], u.prototype, "data", 2), d([_({ type: String })], u.prototype, "keyField", 2), d([_({ type: String })], u.prototype, "cols", 2), d([_({ type: Boolean })], u.prototype, "sortable", 2), d([x()], u.prototype, "sortColumn", 2), d([x()], u.prototype, "sortDirection", 2), d([x()], u.prototype, "filteredData", 2), u = d([M("schmancy-table")], u);
 export {
-  v as S,
+  b as S,
   u as a
 };
-//# sourceMappingURL=table-CqUv1TOC.js.map
+//# sourceMappingURL=table-CxazXBjI.js.map