@oscarpalmer/tabela 0.11.0 → 0.13.0

package/dist/{tabela.full.js → tabela.full.mjs}

@@ -1,4 +1,89 @@
-function compact$1(array, strict) {
+//#region node_modules/@oscarpalmer/toretto/dist/internal/is.mjs
+/**
+* Is the value an event target?
+* @param value Value to check
+* @returns `true` if it's an event target, otherwise `false`
+*/
+function isEventTarget(value) {
+	return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
+}
+/**
+* Is the value an HTML or SVG element?
+* @param value Value to check
+* @returns `true` if it's an HTML or SVG element, otherwise `false`
+*/
+function isHTMLOrSVGElement(value) {
+	return value instanceof HTMLElement || value instanceof SVGElement;
+}
+new Set([
+	Node.ELEMENT_NODE,
+	Node.TEXT_NODE,
+	Node.PROCESSING_INSTRUCTION_NODE,
+	Node.COMMENT_NODE,
+	Node.DOCUMENT_TYPE_NODE
+]);
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/is.mjs
+/**
+* Is the value a constructor function?
+* @param value Value to check
+* @returns `true` if the value is a constructor function, otherwise `false`
+*/
+function isConstructor(value) {
+	return typeof value === "function" && value.prototype?.constructor === value;
+}
+/**
+* Is the value a key?
+* @param value Value to check
+* @returns `true` if the value is a `Key` _(`number` or `string`)_, otherwise `false`
+*/
+function isKey(value) {
+	return typeof value === "number" || typeof value === "string";
+}
+/**
+* Is the value a number?
+* @param value Value to check
+* @returns `true` if the value is a `number`, otherwise `false`
+*/
+function isNumber(value) {
+	return typeof value === "number" && !Number.isNaN(value);
+}
+/**
+* Is the value a plain object?
+* @param value Value to check
+* @returns `true` if the value is a plain object, otherwise `false`
+*/
+function isPlainObject(value) {
+	if (value === null || typeof value !== "object") return false;
+	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
+}
+/**
+* Is the value a typed array?
+* @param value Value to check
+* @returns `true` if the value is a typed array, otherwise `false`
+*/
+function isTypedArray(value) {
+	TYPED_ARRAYS ??= new Set([
+		Int8Array,
+		Uint8Array,
+		Uint8ClampedArray,
+		Int16Array,
+		Uint16Array,
+		Int32Array,
+		Uint32Array,
+		Float32Array,
+		Float64Array,
+		BigInt64Array,
+		BigUint64Array
+	]);
+	return TYPED_ARRAYS.has(value?.constructor);
+}
+let TYPED_ARRAYS;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/array/compact.mjs
+function compact(array, strict) {
 	if (!Array.isArray(array)) return [];
 	if (strict === true) return array.filter(Boolean);
 	const { length } = array;
@@ -9,56 +94,143 @@ function compact$1(array, strict) {
 	}
 	return compacted;
 }
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/string.mjs
 /**
 * Get the string value from any value
 * @param value Original value
 * @returns String representation of the value
 */
-function getString$1(value) {
+function getString(value) {
 	if (typeof value === "string") return value;
 	if (value == null) return "";
-	if (typeof value === "function") return getString$1(value());
+	if (typeof value === "function") return getString(value());
 	if (typeof value !== "object") return String(value);
 	const asString = String(value.valueOf?.() ?? value);
 	return asString.startsWith("[object ") ? JSON.stringify(value) : asString;
 }
+function ignoreKey(key) {
+	return EXPRESSION_IGNORED.test(key);
+}
 /**
 * Join an array of values into a string
 * @param value Array of values
 * @param delimiter Delimiter to use between values
 * @returns Joined string
 */
-function join$1(value, delimiter) {
-	return compact$1(value).map(getString$1).join(typeof delimiter === "string" ? delimiter : "");
+function join(value, delimiter) {
+	return compact(value).map(getString).join(typeof delimiter === "string" ? delimiter : "");
 }
 /**
 * Split a string into words _(and other readable parts)_
 * @param value Original string
 * @returns Array of words found in the string
 */
-function words$1(value) {
-	return typeof value === "string" ? value.match(EXPRESSION_WORDS$1) ?? [] : [];
+function words(value) {
+	return typeof value === "string" ? value.match(EXPRESSION_WORDS) ?? [] : [];
 }
-var EXPRESSION_WORDS$1 = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
+const EXPRESSION_IGNORED = /(^|\.)(__proto__|constructor|prototype)(\.|$)/i;
+const EXPRESSION_WORDS = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/is.mjs
 /**
-* Is the value a number?
+* Is the value `undefined`, `null`, or a whitespace-only string?
 * @param value Value to check
-* @returns `true` if the value is a `number`, otherwise `false`
+* @returns `true` if the value is nullable or a whitespace-only string, otherwise `false`
 */
-function isNumber$1(value) {
-	return typeof value === "number" && !Number.isNaN(value);
+function isNullableOrWhitespace(value) {
+	return value == null || EXPRESSION_WHITESPACE.test(getString(value));
+}
+const EXPRESSION_WHITESPACE = /^\s*$/;
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/internal/element-value.mjs
+function setElementValue(element, first, second, third, callback) {
+	if (!isHTMLOrSVGElement(element)) return;
+	if (typeof first === "string") setElementValues(element, first, second, third, callback);
+	else if (isAttribute(first)) setElementValues(element, first.name, first.value, third, callback);
+}
+function setElementValues(element, first, second, third, callback) {
+	if (!isHTMLOrSVGElement(element)) return;
+	if (typeof first === "string") {
+		callback(element, first, second, third);
+		return;
+	}
+	const isArray = Array.isArray(first);
+	if (!isArray && !(typeof first === "object" && first !== null)) return;
+	const entries = isArray ? first : Object.entries(first).map(([name, value]) => ({
+		name,
+		value
+	}));
+	const { length } = entries;
+	for (let index = 0; index < length; index += 1) {
+		const entry = entries[index];
+		if (typeof entry === "object" && typeof entry?.name === "string") callback(element, entry.name, entry.value, third);
+	}
+}
+function updateElementValue(element, key, value, set, remove, isBoolean, json) {
+	if (isBoolean ? value == null : isNullableOrWhitespace(value)) remove.call(element, key);
+	else set.call(element, key, json ? JSON.stringify(value) : String(value));
+}
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/internal/attribute.mjs
+function isAttribute(value) {
+	return value instanceof Attr || isPlainObject(value) && typeof value.name === "string" && "value" in value;
+}
+function updateAttribute(element, name, value, dispatch) {
+	const normalizedName = name.toLowerCase();
+	const isBoolean = booleanAttributesSet.has(normalizedName);
+	const next = isBoolean ? value === true || typeof value === "string" && (value === "" || value.toLowerCase() === normalizedName) : value == null ? "" : value;
+	if (name in element) updateProperty(element, normalizedName, next, dispatch);
+	updateElementValue(element, name, isBoolean ? next ? "" : null : value, element.setAttribute, element.removeAttribute, isBoolean, false);
+}
+function updateProperty(element, name, value, dispatch) {
+	if (Object.is(element[name], value)) return;
+	element[name] = value;
+	const event = dispatch !== false && elementEvents[element.tagName]?.[name];
+	if (typeof event === "string") element.dispatchEvent(new Event(event, { bubbles: true }));
 }
 /**
-* Is the value a plain object?
-* @param value Value to check
-* @returns `true` if the value is a plain object, otherwise `false`
+* List of boolean attributes
 */
-function isPlainObject$1(value) {
-	if (value === null || typeof value !== "object") return false;
-	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
-	const prototype = Object.getPrototypeOf(value);
-	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
-}
+const booleanAttributes = Object.freeze([
+	"async",
+	"autofocus",
+	"autoplay",
+	"checked",
+	"controls",
+	"default",
+	"defer",
+	"disabled",
+	"formnovalidate",
+	"hidden",
+	"inert",
+	"ismap",
+	"itemscope",
+	"loop",
+	"multiple",
+	"muted",
+	"nomodule",
+	"novalidate",
+	"open",
+	"playsinline",
+	"readonly",
+	"required",
+	"reversed",
+	"selected"
+]);
+const booleanAttributesSet = new Set(booleanAttributes);
+const elementEvents = {
+	DETAILS: { open: "toggle" },
+	INPUT: {
+		checked: "change",
+		value: "input"
+	},
+	SELECT: { value: "change" },
+	TEXTAREA: { value: "input" }
+};
+document.createElement("form");
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/number.mjs
 /**
 * Clamp a number between a minimum and maximum value
 * @param value Value to clamp
@@ -67,29 +239,59 @@ function isPlainObject$1(value) {
 * @param loop If `true`, the value will loop around when smaller than the minimum or larger than the maximum _(defaults to `false`)_
 * @returns Clamped value
 */
-function clamp$1(value, minimum, maximum, loop) {
+function clamp(value, minimum, maximum, loop) {
 	if (![
 		value,
 		minimum,
 		maximum
-	].every(isNumber$1)) return NaN;
+	].every(isNumber)) return NaN;
 	if (value < minimum) return loop === true ? maximum : minimum;
 	return value > maximum ? loop === true ? minimum : maximum : value;
 }
-function getSizedMaximum$1(first, second) {
+/**
+* Get the number value from an unknown value _(based on Lodash)_
+* @param value Original value
+* @returns Original value as a number, or `NaN` if the value is unable to be parsed
+*/
+function getNumber(value) {
+	if (typeof value === "number") return value;
+	if (typeof value === "bigint" || typeof value === "boolean") return Number(value);
+	if (value == null || typeof value === "symbol") return NaN;
+	if (typeof value === "function") return getNumber(value());
+	let parsed = value.valueOf();
+	if (typeof parsed === "object") parsed = parsed.toString();
+	if (typeof parsed !== "string") return getNumber(parsed);
+	const trimmed = parsed.trim();
+	if (trimmed.length === 0) return NaN;
+	if (EXPRESSION_ZEROISH.test(parsed)) return 0;
+	const isBinary = EXPRESSION_BINARY.test(trimmed);
+	if (isBinary || EXPRESSION_OCTAL.test(trimmed)) return Number.parseInt(trimmed.slice(2), isBinary ? 2 : OCTAL_VALUE);
+	return Number(EXPRESSION_HEX.test(trimmed) ? trimmed : trimmed.replace(EXPRESSION_UNDERSCORE, ""));
+}
+const EXPRESSION_BINARY = /^0b[01]+$/i;
+const EXPRESSION_HEX = /^0x[0-9a-f]+$/i;
+const EXPRESSION_OCTAL = /^0o[0-7]+$/i;
+const EXPRESSION_UNDERSCORE = /_/g;
+const EXPRESSION_ZEROISH = /^\s*0+\s*$/;
+const OCTAL_VALUE = 8;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/sized.mjs
+function getSizedMaximum(first, second) {
 	let actual;
 	if (typeof first === "number") actual = first;
-	else actual = typeof second === "number" ? second : MAXIMUM_DEFAULT$1;
-	return clamp$1(actual, 1, MAXIMUM_ABSOLUTE$1);
+	else actual = typeof second === "number" ? second : MAXIMUM_DEFAULT;
+	return clamp(actual, 1, MAXIMUM_ABSOLUTE);
 }
-var MAXIMUM_ABSOLUTE$1 = 16777216;
-var MAXIMUM_DEFAULT$1 = 1048576;
+const MAXIMUM_ABSOLUTE = 16777216;
+const MAXIMUM_DEFAULT = 1048576;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/sized/map.mjs
 /**
 * A Map with a maximum size
 *
 * Behavior is similar to a _LRU_-cache, where the least recently used entries are removed
 */
-var SizedMap$1 = class extends Map {
+var SizedMap = class extends Map {
 	/**
 	* The maximum size of the Map
 	*/
@@ -104,7 +306,7 @@ var SizedMap$1 = class extends Map {
 		return this.#maximumSize;
 	}
 	constructor(first, second) {
-		const maximum = getSizedMaximum$1(first, second);
+		const maximum = getSizedMaximum(first, second);
 		super();
 		this.#maximumSize = maximum;
 		if (Array.isArray(first)) {
@@ -130,7 +332,9 @@ var SizedMap$1 = class extends Map {
 		return super.set(key, value);
 	}
 };
-var Memoized$1 = class {
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/function/memoize.mjs
+var Memoized = class {
 	#state;
 	/**
 	* Maximum cache size
@@ -145,9 +349,9 @@ var Memoized$1 = class {
 		return this.#state.cache?.size ?? NaN;
 	}
 	constructor(callback, options) {
-		const cache = new SizedMap$1(options.cacheSize);
+		const cache = new SizedMap(options.cacheSize);
 		const getter = (...parameters) => {
-			const key = options.cacheKey?.(...parameters) ?? (parameters.length === 1 ? parameters[0] : join$1(parameters.map(getString$1), "_"));
+			const key = options.cacheKey?.(...parameters) ?? (parameters.length === 1 ? parameters[0] : join(parameters.map(getString), SEPARATOR));
 			if (cache.has(key)) return cache.get(key);
 			const value = callback(...parameters);
 			cache.set(key, value);
@@ -206,11 +410,11 @@ var Memoized$1 = class {
 		return this.#state.getter(...parameters);
 	}
 };
-function getMemoizationOptions$1(input) {
-	const { cacheKey, cacheSize } = isPlainObject$1(input) ? input : {};
+function getMemoizationOptions(input) {
+	const { cacheKey, cacheSize } = isPlainObject(input) ? input : {};
 	return {
 		cacheKey: typeof cacheKey === "function" ? cacheKey : void 0,
-		cacheSize: typeof cacheSize === "number" && cacheSize > 0 ? cacheSize : DEFAULT_CACHE_SIZE$1
+		cacheSize: typeof cacheSize === "number" && cacheSize > 0 ? cacheSize : DEFAULT_CACHE_SIZE
 	};
 }
 /**
@@ -219,17 +423,20 @@ function getMemoizationOptions$1(input) {
 * @param options Memoization options
 * @returns Memoized instance
 */
-function memoize$1(callback, options) {
-	return new Memoized$1(callback, getMemoizationOptions$1(options));
+function memoize(callback, options) {
+	return new Memoized(callback, getMemoizationOptions(options));
 }
-var DEFAULT_CACHE_SIZE$1 = 1024;
+const DEFAULT_CACHE_SIZE = 1024;
+const SEPARATOR = "_";
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/string/case.mjs
 /**
 * Convert a string to camel case _(thisIsCamelCase)_
 * @param value String to convert
 * @returns Camel-cased string
 */
 function camelCase(value) {
-	return toCase("camel", value, true, false);
+	return toCase(CASE_CAMEL, value, true, false);
 }
 /**
 * Capitalize the first letter of a string _(and lowercase the rest)_
@@ -238,11 +445,11 @@ function camelCase(value) {
 */
 function capitalize(value) {
 	if (typeof value !== "string" || value.length === 0) return "";
-	memoizedCapitalize ??= memoize$1((v) => v.length === 1 ? v.toLocaleUpperCase() : `${v.charAt(0).toLocaleUpperCase()}${v.slice(1).toLocaleLowerCase()}`);
+	memoizedCapitalize ??= memoize((v) => v.length === 1 ? v.toLocaleUpperCase() : `${v.charAt(0).toLocaleUpperCase()}${v.slice(1).toLocaleLowerCase()}`);
 	return memoizedCapitalize.run(value);
 }
 function toCase(type, value, capitalizeAny, capitalizeFirst) {
-	caseMemoizers[type] ??= memoize$1(toCaseCallback.bind({
+	caseMemoizers[type] ??= memoize(toCaseCallback.bind({
 		type,
 		capitalizeAny,
 		capitalizeFirst
@@ -253,11 +460,11 @@ function toCaseCallback(value) {
 	if (typeof value !== "string") return "";
 	if (value.length < 1) return value;
 	const { capitalizeAny, capitalizeFirst, type } = this;
-	const parts = words$1(value);
+	const parts = words(value);
 	const partsLength = parts.length;
 	const cased = [];
 	for (let partIndex = 0; partIndex < partsLength; partIndex += 1) {
-		const items = parts[partIndex].replace(EXPRESSION_ACRONYM, (full, one, two, three) => three === "s" ? full : `${one}-${two}${three}`).replace(EXPRESSION_CAMEL_CASE, REPLACEMENT_CAMEL_CASE).split("-");
+		const items = parts[partIndex].replace(EXPRESSION_ACRONYM, (full, one, two, three) => three === S ? full : `${one}-${two}${three}`).replace(EXPRESSION_CAMEL_CASE, REPLACEMENT_CAMEL_CASE).split("-");
 		const itemsLength = items.length;
 		const partResult = [];
 		let itemCount = 0;
@@ -268,21 +475,31 @@ function toCaseCallback(value) {
 			else partResult.push(capitalize(item));
 			itemCount += 1;
 		}
-		cased.push(join$1(partResult, delimiters[type]));
-	}
-	return join$1(cased, delimiters[type]);
-}
-var caseMemoizers = {};
-var delimiters = {
-	camel: "",
-	kebab: "-",
-	pascal: "",
-	snake: "_"
+		cased.push(join(partResult, delimiters[type]));
+	}
+	return join(cased, delimiters[type]);
+}
+const CASE_CAMEL = "camel";
+const CASE_KEBAB = "kebab";
+const CASE_PASCAL = "pascal";
+const CASE_SNAKE = "snake";
+const DELIMTER_EMPTY = "";
+const DELIMITER_HYPHEN = "-";
+const DELIMITER_UNDERSCORE = "_";
+const EXPRESSION_CAMEL_CASE = /(\p{Ll})(\p{Lu})/gu;
+const EXPRESSION_ACRONYM = /(\p{Lu}*)(\p{Lu})(\p{Ll}+)/gu;
+const REPLACEMENT_CAMEL_CASE = "$1-$2";
+const S = "s";
+const caseMemoizers = {};
+const delimiters = {
+	[CASE_CAMEL]: DELIMTER_EMPTY,
+	[CASE_KEBAB]: DELIMITER_HYPHEN,
+	[CASE_PASCAL]: DELIMTER_EMPTY,
+	[CASE_SNAKE]: DELIMITER_UNDERSCORE
 };
-var EXPRESSION_CAMEL_CASE = /(\p{Ll})(\p{Lu})/gu;
-var EXPRESSION_ACRONYM = /(\p{Lu}*)(\p{Lu})(\p{Ll}+)/gu;
-var REPLACEMENT_CAMEL_CASE = "$1-$2";
-var memoizedCapitalize;
+let memoizedCapitalize;
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/internal/get-value.mjs
 function getBoolean(value, defaultValue) {
 	return typeof value === "boolean" ? value : defaultValue ?? false;
 }
@@ -290,203 +507,40 @@ function getStyleValue(element, property, computed) {
 	const name = camelCase(property);
 	return computed ? getComputedStyle(element)[name] : element.style[name];
 }
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/attribute/set.mjs
+function setAttribute(element, first, second, third) {
+	setElementValue(element, first, second, third, updateAttribute);
+}
+function setAttributes(element, attributes, dispatch) {
+	setElementValues(element, attributes, null, dispatch, updateAttribute);
+}
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/style.mjs
 /**
-* Is the value an event target?
-* @param value Value to check
-* @returns `true` if it's an event target, otherwise `false`
+* Get styles from an element
+* @param element Element to get the styles from
+* @param properties Styles to get
+* @param computed Get the computed styles? _(defaults to `false`)_
+* @returns Style values
 */
-function isEventTarget(value) {
-	return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
+function getStyles(element, properties, computed) {
+	const styles = {};
+	if (!(isHTMLOrSVGElement(element) && Array.isArray(properties))) return styles;
+	const { length } = properties;
+	for (let index = 0; index < length; index += 1) {
+		const property = properties[index];
+		if (typeof property === "string") styles[property] = getStyleValue(element, property, computed === true);
+	}
+	return styles;
 }
 /**
-* Is the value an HTML or SVG element?
-* @param value Value to check
-* @returns `true` if it's an HTML or SVG element, otherwise `false`
+* Set styles on an element
+* @param element Element to set the styles on
+* @param styles Styles to set
 */
-function isHTMLOrSVGElement(value) {
-	return value instanceof HTMLElement || value instanceof SVGElement;
-}
-new Set([
-	Node.ELEMENT_NODE,
-	Node.TEXT_NODE,
-	Node.PROCESSING_INSTRUCTION_NODE,
-	Node.COMMENT_NODE,
-	Node.DOCUMENT_TYPE_NODE
-]);
-/**
-* Is the value `undefined`, `null`, or a whitespace-only string?
-* @param value Value to check
-* @returns `true` if the value is nullable or a whitespace-only string, otherwise `false`
-*/
-function isNullableOrWhitespace$1(value) {
-	return value == null || EXPRESSION_WHITESPACE$2.test(getString$1(value));
-}
-var EXPRESSION_WHITESPACE$2 = /^\s*$/;
-function setElementValue(element, first, second, third, callback) {
-	if (!isHTMLOrSVGElement(element)) return;
-	if (typeof first === "string") setElementValues(element, first, second, third, callback);
-	else if (isAttribute(first)) setElementValues(element, first.name, first.value, third, callback);
-}
-function setElementValues(element, first, second, third, callback) {
-	if (!isHTMLOrSVGElement(element)) return;
-	if (typeof first === "string") {
-		callback(element, first, second, third);
-		return;
-	}
-	const isArray = Array.isArray(first);
-	if (!isArray && !(typeof first === "object" && first !== null)) return;
-	const entries = isArray ? first : Object.entries(first).map(([name, value]) => ({
-		name,
-		value
-	}));
-	const { length } = entries;
-	for (let index = 0; index < length; index += 1) {
-		const entry = entries[index];
-		if (typeof entry === "object" && typeof entry?.name === "string") callback(element, entry.name, entry.value, third);
-	}
-}
-function updateElementValue(element, key, value, set, remove, isBoolean, json) {
-	if (isBoolean ? value == null : isNullableOrWhitespace$1(value)) remove.call(element, key);
-	else set.call(element, key, json ? JSON.stringify(value) : String(value));
-}
-function badAttributeHandler(name, value) {
-	if (typeof name !== "string" || name.trim().length === 0 || typeof value !== "string") return true;
-	if (EXPRESSION_CLOBBERED_NAME.test(name) && (value in document || value in formElement) || EXPRESSION_EVENT_NAME.test(name)) return true;
-	if (EXPRESSION_SKIP_NAME.test(name) || EXPRESSION_URI_VALUE.test(value) || isValidSourceAttribute(name, value)) return false;
-	return EXPRESSION_DATA_OR_SCRIPT.test(value);
-}
-function booleanAttributeHandler(name, value) {
-	if (typeof name !== "string" || name.trim().length === 0 || typeof value !== "string") return true;
-	const normalizedName = name.toLowerCase();
-	if (!booleanAttributesSet.has(normalizedName)) return false;
-	const normalized = value.toLowerCase();
-	return !(normalized.length === 0 || normalized === normalizedName);
-}
-function decodeAttribute(value) {
-	textArea ??= document.createElement("textarea");
-	textArea.innerHTML = value;
-	return decodeURIComponent(textArea.value);
-}
-function handleAttribute(callback, decode, first, second) {
-	let name;
-	let value;
-	if (isAttribute(first)) {
-		name = first.name;
-		value = String(first.value);
-	} else if (typeof first === "string" && typeof second === "string") {
-		name = first;
-		value = second;
-	}
-	if (decode && value != null) value = decodeAttribute(value);
-	return callback(name, value?.replace(EXPRESSION_WHITESPACE$1, ""));
-}
-function isAttribute(value) {
-	return value instanceof Attr || isPlainObject$1(value) && typeof value.name === "string" && "value" in value;
-}
-function _isBadAttribute(first, second, decode) {
-	return handleAttribute(badAttributeHandler, decode, first, second);
-}
-function _isEmptyNonBooleanAttribute(first, second, decode) {
-	return handleAttribute((name, value) => name != null && value != null && !booleanAttributesSet.has(name) && value.trim().length === 0, decode, first, second);
-}
-function _isInvalidBooleanAttribute(first, second, decode) {
-	return handleAttribute(booleanAttributeHandler, decode, first, second);
-}
-function isValidSourceAttribute(name, value) {
-	return EXPRESSION_SOURCE_NAME.test(name) && EXPRESSION_SOURCE_VALUE.test(value);
-}
-function updateAttribute(element, name, value, dispatch) {
-	const normalizedName = name.toLowerCase();
-	const isBoolean = booleanAttributesSet.has(normalizedName);
-	const next = isBoolean ? value === true || typeof value === "string" && (value === "" || value.toLowerCase() === normalizedName) : value == null ? "" : value;
-	if (name in element) updateProperty(element, normalizedName, next, dispatch);
-	updateElementValue(element, name, isBoolean ? next ? "" : null : value, element.setAttribute, element.removeAttribute, isBoolean, false);
-}
-function updateProperty(element, name, value, dispatch) {
-	if (Object.is(element[name], value)) return;
-	element[name] = value;
-	const event = dispatch !== false && elementEvents[element.tagName]?.[name];
-	if (typeof event === "string") element.dispatchEvent(new Event(event, { bubbles: true }));
-}
-var EXPRESSION_CLOBBERED_NAME = /^(id|name)$/i;
-var EXPRESSION_DATA_OR_SCRIPT = /^(?:data|\w+script):/i;
-var EXPRESSION_EVENT_NAME = /^on/i;
-var EXPRESSION_SKIP_NAME = /^(aria-[-\w]+|data-[-\w.\u00B7-\uFFFF]+)$/i;
-var EXPRESSION_SOURCE_NAME = /^src$/i;
-var EXPRESSION_SOURCE_VALUE = /^data:/i;
-var EXPRESSION_URI_VALUE = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
-var EXPRESSION_WHITESPACE$1 = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
-/**
-* List of boolean attributes
-*/
-const booleanAttributes = Object.freeze([
-	"async",
-	"autofocus",
-	"autoplay",
-	"checked",
-	"controls",
-	"default",
-	"defer",
-	"disabled",
-	"formnovalidate",
-	"hidden",
-	"inert",
-	"ismap",
-	"itemscope",
-	"loop",
-	"multiple",
-	"muted",
-	"nomodule",
-	"novalidate",
-	"open",
-	"playsinline",
-	"readonly",
-	"required",
-	"reversed",
-	"selected"
-]);
-var booleanAttributesSet = new Set(booleanAttributes);
-var elementEvents = {
-	DETAILS: { open: "toggle" },
-	INPUT: {
-		checked: "change",
-		value: "input"
-	},
-	SELECT: { value: "change" },
-	TEXTAREA: { value: "input" }
-};
-var formElement = document.createElement("form");
-var textArea;
-function setAttribute(element, first, second, third) {
-	setElementValue(element, first, second, third, updateAttribute);
-}
-function setAttributes(element, attributes, dispatch) {
-	setElementValues(element, attributes, null, dispatch, updateAttribute);
-}
-/**
-* Get styles from an element
-* @param element Element to get the styles from
-* @param properties Styles to get
-* @param computed Get the computed styles? _(defaults to `false`)_
-* @returns Style values
-*/
-function getStyles(element, properties, computed) {
-	const styles = {};
-	if (!(isHTMLOrSVGElement(element) && Array.isArray(properties))) return styles;
-	const { length } = properties;
-	for (let index = 0; index < length; index += 1) {
-		const property = properties[index];
-		if (typeof property === "string") styles[property] = getStyleValue(element, property, computed === true);
-	}
-	return styles;
-}
-/**
-* Set styles on an element
-* @param element Element to set the styles on
-* @param styles Styles to set
-*/
-function setStyles(element, styles) {
-	setElementValues(element, styles, null, null, updateStyleProperty);
+function setStyles(element, styles) {
+	setElementValues(element, styles, null, null, updateStyleProperty);
 }
 /**
 * Toggle styles for an element
@@ -527,27 +581,52 @@ function updateStyleProperty(element, key, value) {
 		this.style[property] = "";
 	}, false, false);
 }
+//#endregion
+//#region src/models/style.model.ts
+const CSS_TABELA = "tabela";
+const CSS_TABELA_CELL = "tabela__cell";
+const CSS_TABELA_CELL_BODY = "tabela__cell--body";
+const CSS_TABELA_CELL_FOOTER = "tabela__cell--footer";
+const CSS_TABELA_FAKER = "tabela__faker";
+const CSS_TABELA_HEADING = "tabela__heading";
+const CSS_TABELA_HEADING_CONTENT = "tabela__heading__content";
+const CSS_TABELA_HEADING_SORTER = "tabela__heading__sorter";
+const CSS_TABELA_ROW = "tabela__row";
+const CSS_TABELA_ROW_BODY = "tabela__row--body";
+const CSS_TABELA_ROW_FOOTER = "tabela__row--footer";
+const CSS_TABELA_ROW_GROUP = "tabela__row--group tabela__group";
+const CSS_TABELA_ROW_HEADER = "tabela__row--header";
+const CSS_TABELA_ROW_SELECTED = "tabela__row--selected";
+const CSS_TABELA_ROWGROUP = "tabela__rowgroup";
+const CSS_TABELA_ROWGROUP_BODY = "tabela__rowgroup--body";
+const CSS_TABELA_ROWGROUP_FOOTER = "tabela__rowgroup--footer";
+const CSS_TABELA_ROWGROUP_HEADER = "tabela__rowgroup--header";
+const CSS_TABELA_SELECTION = "tabela__selection";
+const CSS_TABELA_TABLE = "tabela__table";
+//#endregion
+//#region src/helpers/dom.helpers.ts
 function createCell(width, body) {
 	const cell = createElement("div", {
-		className: "tabela__cell",
+		className: CSS_TABELA_CELL,
 		role: "cell"
 	}, {}, { width: `${width}px` });
-	if (body ?? true) cell.classList.add("tabela__cell--body");
+	if (body ?? true) cell.classList.add(CSS_TABELA_CELL_BODY);
 	return cell;
 }
 function createElement(tagName, properties, attributes, style) {
 	const element = document.createElement(tagName);
-	const keys = Object.keys(properties);
-	for (const key of keys) element[key] = properties[key];
-	setAttributes(element, attributes);
-	setStyles(element, style);
+	const props = properties ?? {};
+	const keys = Object.keys(props);
+	for (const key of keys) element[key] = props[key];
+	setAttributes(element, attributes ?? {});
+	setStyles(element, style ?? {});
 	return element;
 }
 function createRowGroup(withRow) {
 	const group = createElement("div", {
-		className: "tabela__rowgroup",
+		className: CSS_TABELA_ROWGROUP,
 		role: "rowgroup"
-	}, {}, {});
+	});
 	if (!(withRow ?? true)) return group;
 	const row = createRow();
 	group.append(row);
@@ -558,12 +637,14 @@ function createRowGroup(withRow) {
 }
 function createRow() {
 	return createElement("div", {
-		className: "tabela__row",
+		className: CSS_TABELA_ROW,
 		role: "row"
-	}, {}, {});
+	}, {}, { height: "32px" });
 }
+//#endregion
+//#region src/components/body.component.ts
 function createFaker() {
-	return createElement("div", { className: "tabela__faker" }, {}, {});
+	return createElement("div", { className: CSS_TABELA_FAKER });
 }
 var BodyComponent = class {
 	elements = {
@@ -573,7 +654,7 @@ var BodyComponent = class {
 	constructor() {
 		const group = createRowGroup(false);
 		this.elements.group = group;
-		group.className += " tabela__rowgroup--body";
+		group.className += ` ${CSS_TABELA_ROWGROUP_BODY}`;
 		group.tabIndex = 0;
 		group.setAttribute("data-event", "body");
 		group.append(this.elements.faker);
@@ -583,6 +664,8 @@ var BodyComponent = class {
 		this.elements.group = void 0;
 	}
 };
+//#endregion
+//#region src/components/footer.component.ts
 var FooterComponent = class {
 	elements;
 	constructor() {
@@ -592,8 +675,8 @@ var FooterComponent = class {
 			row,
 			cells: []
 		};
-		group.className += " tabela__rowgroup--footer";
-		row.className += " tabela__row--footer";
+		group.className += ` ${CSS_TABELA_ROWGROUP_FOOTER}`;
+		row.className += ` ${CSS_TABELA_ROW_FOOTER}`;
 	}
 	destroy() {
 		this.elements.cells.length = 0;
@@ -607,13 +690,15 @@ var FooterComponent = class {
 		elements.row.innerHTML = "";
 		for (let index = 0; index < length; index += 1) {
 			const cell = createCell(columns[index].options.width ?? 4, false);
-			cell.className += " tabela__cell--footer";
+			cell.className += ` ${CSS_TABELA_CELL_FOOTER}`;
 			cell.innerHTML = "&nbsp;";
 			elements.cells.push(cell);
 			elements.row.append(cell);
 		}
 	}
 };
+//#endregion
+//#region src/components/header.component.ts
 var HeaderComponent = class {
 	elements;
 	constructor() {
@@ -622,8 +707,8 @@ var HeaderComponent = class {
 			group,
 			row
 		};
-		group.className += " tabela__rowgroup--header";
-		row.className += " tabela__row--header";
+		group.className += ` ${CSS_TABELA_ROWGROUP_HEADER}`;
+		row.className += ` ${CSS_TABELA_ROW_HEADER}`;
 	}
 	destroy() {
 		this.elements.group = void 0;
@@ -634,16 +719,18 @@ var HeaderComponent = class {
 		this.elements.row.append(...columns.map((column) => column.elements.wrapper));
 	}
 };
+//#endregion
+//#region src/components/column.component.ts
 var ColumnComponent = class {
 	elements;
 	options;
-	constructor(options) {
-		const width = Number.parseInt(getComputedStyle(document.body).fontSize, 10) * (options.width ?? options.title.length * 1.5);
+	constructor(column) {
+		const width = Number.parseInt(getComputedStyle(document.body).fontSize, 10) * (column.width ?? column.title.length * 1.5);
 		this.options = {
-			...options,
+			...column,
 			width
 		};
-		this.elements = createHeading(options.field, options.title, width);
+		this.elements = createHeading(this.options.field, this.options.title, width);
 	}
 	destroy() {
 		this.elements.content.remove();
@@ -655,17 +742,17 @@ var ColumnComponent = class {
 };
 function createHeading(field, title, width) {
 	const wrapper = createElement("div", {
-		className: "tabela__heading",
+		className: CSS_TABELA_HEADING,
 		role: "columnheader"
 	}, {
 		"data-event": "heading",
 		"data-field": field
 	}, { width: `${width}px` });
 	const content = createElement("div", {
-		className: "tabela__heading__content",
+		className: CSS_TABELA_HEADING_CONTENT,
 		textContent: title
-	}, {}, {});
-	const sorter = createElement("div", { className: "tabela__heading__sorter" }, {}, {});
+	});
+	const sorter = createElement("div", { className: CSS_TABELA_HEADING_SORTER });
 	wrapper.append(content, sorter);
 	return {
 		content,
@@ -673,6 +760,8 @@ function createHeading(field, title, width) {
 		wrapper
 	};
 }
+//#endregion
+//#region src/managers/column.manager.ts
 var ColumnManager = class {
 	items = [];
 	constructor(state) {
@@ -685,6 +774,9 @@ var ColumnManager = class {
 		this.items = void 0;
 		this.state = void 0;
 	}
+	get(field) {
+		return this.items.find((item) => item.options.field === field);
+	}
 	remove(value) {
 		const { items, state } = this;
 		const { components, managers } = state;
@@ -710,6 +802,31 @@ var ColumnManager = class {
 		footer.update(items);
 	}
 };
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/array/chunk.mjs
+/**
+* Chunk an array into smaller arrays
+* @param array Array to chunk
+* @param size Size of each chunk _(minimum is `1`, maximum is `5000`; defaults to `5000`)_
+* @returns Array of arrays
+*/
+function chunk(array, size) {
+	if (!Array.isArray(array)) return [];
+	if (array.length === 0) return [];
+	const { length } = array;
+	const actualSize = typeof size === "number" && size > 0 && size <= MAX_SIZE ? size : MAX_SIZE;
+	if (length <= actualSize) return [array];
+	const chunks = [];
+	let index = 0;
+	while (index < length) {
+		chunks.push(array.slice(index, index + actualSize));
+		index += actualSize;
+	}
+	return chunks;
+}
+const MAX_SIZE = 5e3;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/array/callbacks.mjs
 function getArrayCallback(value) {
 	switch (typeof value) {
 		case "function": return value;
@@ -725,6 +842,8 @@ function getArrayCallbacks(bool, key, value) {
 		value: getArrayCallback(value)
 	};
 }
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/array/find.mjs
 function findValues(type, array, parameters, mapper) {
 	const result = {
 		matched: [],
@@ -767,133 +886,14 @@ function getParameters(original) {
 		value: length === 1 && typeof original[0] !== "function" ? original[0] : original[1]
 	};
 }
-var UNIQUE_THRESHOLD = 100;
-function filter(array, ...parameters) {
-	return findValues("all", array, parameters).matched;
-}
-filter.remove = removeFiltered;
-function removeFiltered(array, ...parameters) {
-	return findValues("all", array, parameters).notMatched;
-}
-/**
-* Is the value a constructor function?
-* @param value Value to check
-* @returns `true` if the value is a constructor function, otherwise `false`
-*/
-function isConstructor(value) {
-	return typeof value === "function" && value.prototype?.constructor === value;
-}
-/**
-* Is the value a key?
-* @param value Value to check
-* @returns `true` if the value is a `Key` _(`number` or `string`)_, otherwise `false`
-*/
-function isKey(value) {
-	return typeof value === "number" || typeof value === "string";
-}
-/**
-* Is the value a number?
-* @param value Value to check
-* @returns `true` if the value is a `number`, otherwise `false`
-*/
-function isNumber(value) {
-	return typeof value === "number" && !Number.isNaN(value);
-}
-/**
-* Is the value a plain object?
-* @param value Value to check
-* @returns `true` if the value is a plain object, otherwise `false`
-*/
-function isPlainObject(value) {
-	if (value === null || typeof value !== "object") return false;
-	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
-	const prototype = Object.getPrototypeOf(value);
-	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
-}
-/**
-* Is the value a typed array?
-* @param value Value to check
-* @returns `true` if the value is a typed array, otherwise `false`
-*/
-function isTypedArray(value) {
-	TYPED_ARRAYS ??= new Set([
-		Int8Array,
-		Uint8Array,
-		Uint8ClampedArray,
-		Int16Array,
-		Uint16Array,
-		Int32Array,
-		Uint32Array,
-		Float32Array,
-		Float64Array,
-		BigInt64Array,
-		BigUint64Array
-	]);
-	return TYPED_ARRAYS.has(value?.constructor);
-}
-var TYPED_ARRAYS;
-/**
-* Chunk an array into smaller arrays
-* @param array Array to chunk
-* @param size Size of each chunk _(minimum is `1`, maximum is `5000`; defaults to `5000`)_
-* @returns Array of arrays
-*/
-function chunk(array, size) {
-	if (!Array.isArray(array)) return [];
-	if (array.length === 0) return [];
-	const { length } = array;
-	const actualSize = typeof size === "number" && size > 0 && size <= MAX_SIZE ? size : MAX_SIZE;
-	if (length <= actualSize) return [array];
-	const chunks = [];
-	let index = 0;
-	while (index < length) {
-		chunks.push(array.slice(index, index + actualSize));
-		index += actualSize;
-	}
-	return chunks;
-}
-var MAX_SIZE = 5e3;
-function compact(array, strict) {
-	if (!Array.isArray(array)) return [];
-	if (strict === true) return array.filter(Boolean);
-	const { length } = array;
-	const compacted = [];
-	for (let index = 0; index < length; index += 1) {
-		const item = array[index];
-		if (item != null) compacted.push(item);
-	}
-	return compacted;
-}
-function insertChunkedValues(type, array, items, start, deleteCount) {
-	const actualDeleteCount = deleteCount < 0 ? 0 : deleteCount;
-	const actualStart = Math.min(Math.max(0, start), array.length);
-	const chunked = chunk(items);
-	const lastIndex = chunked.length - 1;
-	let index = Number(chunked.length);
-	let returned;
-	while (index > 0) {
-		index -= 1;
-		const spliced = array.splice(actualStart, index === lastIndex ? actualDeleteCount : 0, ...chunked[index]);
-		if (returned == null) returned = spliced;
-		else returned.push(...spliced);
-	}
-	if (type === "insert") return array;
-	return type === "splice" ? returned : array.length;
-}
-function insertValues(type, array, items, start, deleteCount) {
-	const spliceArray = type === "insert" || type === "splice";
-	if (!Array.isArray(array) || typeof start !== "number" || !Array.isArray(items) || items.length === 0) return spliceArray ? [] : 0;
-	return insertChunkedValues(type, array, items, start, spliceArray ? deleteCount : 0);
-}
-/**
-* Push items into an array _(at the end)_
-* @param array Original array
-* @param pushed Pushed items
-* @returns New length of the array
-*/
-function push(array, pushed) {
-	return insertValues("push", array, pushed, array.length, 0);
+const UNIQUE_THRESHOLD = 100;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/array/select.mjs
+function select(array, ...parameters) {
+	return findValues("all", array, parameters, parameters.pop()).matched;
 }
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/math/aggregate.mjs
 function aggregate(type, array, key) {
 	const length = Array.isArray(array) ? array.length : 0;
 	if (length === 0) return {
@@ -932,43 +932,14 @@ function getAggregated(type, array, key) {
 	const aggregated = aggregate(type, array, key);
 	return aggregated.count > 0 ? aggregated.value : NaN;
 }
-var aggregators = {
+const aggregators = {
 	average: calculateSum,
 	max: (current, value, notNumber) => notNumber || value > current ? value : current,
 	min: (current, value, notNumber) => notNumber || value < current ? value : current,
 	sum: calculateSum
 };
-/**
-* Get the string value from any value
-* @param value Original value
-* @returns String representation of the value
-*/
-function getString(value) {
-	if (typeof value === "string") return value;
-	if (value == null) return "";
-	if (typeof value === "function") return getString(value());
-	if (typeof value !== "object") return String(value);
-	const asString = String(value.valueOf?.() ?? value);
-	return asString.startsWith("[object ") ? JSON.stringify(value) : asString;
-}
-/**
-* Join an array of values into a string
-* @param value Array of values
-* @param delimiter Delimiter to use between values
-* @returns Joined string
-*/
-function join(value, delimiter) {
-	return compact(value).map(getString).join(typeof delimiter === "string" ? delimiter : "");
-}
-/**
-* Split a string into words _(and other readable parts)_
-* @param value Original string
-* @returns Array of words found in the string
-*/
-function words(value) {
-	return typeof value === "string" ? value.match(EXPRESSION_WORDS) ?? [] : [];
-}
-var EXPRESSION_WORDS = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/value/handlers.mjs
 function getCompareHandlers(owner, options) {
 	const { get, register, unregister } = getHandlers(owner, options);
 	return {
@@ -1002,6 +973,9 @@ function getHandlers(owner, options) {
 function isConstructable(value) {
 	return typeof value === "object" && value !== null;
 }
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/value/compare.mjs
+const COMPARE_NAME = "compare";
 /**
 * Compare two values _(for sorting purposes)_
 * @param first First value
@@ -1034,7 +1008,7 @@ compare.handlers = getCompareHandlers(compare, {
 	callback: (first, second, compareStrings) => {
 		if (compareStrings) return getString(first).localeCompare(getString(second));
 	},
-	method: "compare"
+	method: COMPARE_NAME
 });
 compare.register = registerComparator;
 compare.unregister = unregisterComparator;
@@ -1056,7 +1030,7 @@ function unregisterComparator(constructor) {
 function compareNumbers(first, second) {
 	const firstNumber = Number(first);
 	const secondNumber = Number(second);
-	if (firstNumber === secondNumber) return 0;
+	if (Object.is(firstNumber, secondNumber)) return 0;
 	return firstNumber > secondNumber ? 1 : -1;
 }
 function compareSymbols(first, second) {
@@ -1072,12 +1046,14 @@ function getComparisonParts(value) {
 	if (Array.isArray(value)) return value;
 	return typeof value === "object" ? [value] : words(getString(value));
 }
-var comparators$1 = {
+const comparators$1 = {
 	bigint: compareNumbers,
 	boolean: compareNumbers,
 	number: compareNumbers,
 	symbol: compareSymbols
 };
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/array/sort.mjs
 function getCallback(value, key, forObject) {
 	if (key != null) return;
 	if (forObject && typeof value.value === "function") return value.value;
@@ -1110,7 +1086,7 @@ function getSorter(value, modifier) {
 function sort(array, first, second) {
 	if (!Array.isArray(array)) return [];
 	if (array.length < 2) return array;
-	const modifier = (first === true || second === true ? "desc" : "asc") === "asc" ? 1 : -1;
+	const modifier = (first === true || second === true ? "descending" : "ascending") === "ascending" ? 1 : -1;
 	const sorters = (Array.isArray(first) ? first : [first]).map((item) => getSorter(item, modifier)).filter((sorter) => sorter != null).filter((current, index, filtered) => filtered.findIndex((next) => next.identifier === current.identifier) === index);
 	const { length } = sorters;
 	if (length === 0) return array.sort((firstItem, secondItem) => compare(firstItem, secondItem) * modifier);
@@ -1135,6 +1111,8 @@ function sort(array, first, second) {
 		return 0;
 	});
 }
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/array/to-map.mjs
 function getMapValues(array, first, second, arrays) {
 	if (!Array.isArray(array)) return /* @__PURE__ */ new Map();
 	const { length } = array;
@@ -1159,15 +1137,346 @@ toMap.arrays = toMapArrays;
 function toMapArrays(array, first, second) {
 	return getMapValues(array, first, second, true);
 }
-/**
-* Is the value `undefined`, `null`, or a whitespace-only string?
-* @param value Value to check
-* @returns `true` if the value is nullable or a whitespace-only string, otherwise `false`
-*/
-function isNullableOrWhitespace(value) {
-	return value == null || EXPRESSION_WHITESPACE.test(getString(value));
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/array/group.mjs
+function groupValues(array, key, value, arrays) {
+	if (!Array.isArray(array) || array.length === 0) return {};
+	const { length } = array;
+	const callbacks = getArrayCallbacks(void 0, key, value);
+	const record = {};
+	for (let index = 0; index < length; index += 1) {
+		const item = array[index];
+		const keyed = callbacks?.keyed?.(item, index, array) ?? index;
+		const valued = callbacks?.value?.(item, index, array) ?? item;
+		if (arrays) {
+			const existing = record[keyed];
+			if (existing == null) record[keyed] = [valued];
+			else existing.push(valued);
+		} else record[keyed] = valued;
+	}
+	return record;
+}
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/array/to-record.mjs
+function toRecord(array, first, second) {
+	return groupValues(array, first, second, false);
+}
+toRecord.arrays = toRecordArrays;
+function toRecordArrays(array, first, second) {
+	return groupValues(array, first, second, true);
+}
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/function/timer.mjs
+function getInterval(value) {
+	return typeof value === "number" && value > 0 ? value : 0;
+}
+function getTimer(type, callback, time) {
+	const interval = getInterval(time);
+	function run(now) {
+		start ??= now;
+		if (interval === 0 || now - start >= interval - OFFSET) {
+			if (throttle) start = now;
+			callback(...args);
+		} else frame = requestAnimationFrame(run);
+	}
+	const throttle = type === TIMER_THROTTLE;
+	let args;
+	let frame;
+	let start;
+	const timer = (...parameters) => {
+		timer.cancel();
+		args = parameters;
+		frame = requestAnimationFrame(run);
+	};
+	timer.cancel = () => {
+		cancelAnimationFrame(frame);
+	};
+	return timer;
+}
+const OFFSET = 5;
+const TIMER_THROTTLE = "throttle";
+const TIMER_WAIT = "wait";
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/promise/models.mjs
+const PROMISE_ABORT_EVENT = "abort";
+const PROMISE_ABORT_OPTIONS = { once: true };
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/promise/helpers.mjs
+function getNumberOrDefault(value) {
+	return typeof value === "number" && value > 0 ? value : 0;
+}
+function getPromiseOptions(input) {
+	if (typeof input === "number") return { time: getNumberOrDefault(input) };
+	if (input instanceof AbortSignal) return {
+		signal: input,
+		time: 0
+	};
+	const options = typeof input === "object" && input !== null ? input : {};
+	return {
+		signal: options.signal instanceof AbortSignal ? options.signal : void 0,
+		time: getNumberOrDefault(options.time)
+	};
+}
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/promise/misc.mjs
+function settlePromise(aborter, settler, value, signal) {
+	signal?.removeEventListener(PROMISE_ABORT_EVENT, aborter);
+	settler(value);
+}
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/promise/delay.mjs
+function delay(options) {
+	const { signal, time } = getPromiseOptions(options);
+	if (signal?.aborted ?? false) return Promise.reject(signal.reason);
+	function abort() {
+		timer.cancel();
+		rejector(signal.reason);
+	}
+	const timer = getTimer(TIMER_WAIT, () => {
+		settlePromise(abort, resolver, void 0, signal);
+	}, time);
+	signal?.addEventListener(PROMISE_ABORT_EVENT, abort, PROMISE_ABORT_OPTIONS);
+	let rejector;
+	let resolver;
+	return new Promise((resolve, reject) => {
+		rejector = reject;
+		resolver = resolve;
+		if (time === 0) settlePromise(abort, resolve, void 0, signal);
+		else timer();
+	});
+}
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/value/misc.mjs
+function findKey(needle, haystack) {
+	const keys = Object.keys(haystack);
+	const index = keys.map((key) => key.toLowerCase()).indexOf(needle.toLowerCase());
+	return index > -1 ? keys[index] : needle;
+}
+function getNestedValue(data, path, ignoreCase) {
+	if (typeof data !== "object" || data === null || typeof path !== "string" || path.trim().length === 0) return {
+		exists: false,
+		value: void 0
+	};
+	const shouldIgnoreCase = ignoreCase === true;
+	const paths = getPaths(path, shouldIgnoreCase);
+	if (typeof paths === "string") return handleValue(data, paths, null, true, shouldIgnoreCase);
+	const { length } = paths;
+	let current = data;
+	for (let index = 0; index < length; index += 1) {
+		const part = paths[index];
+		const handled = handleValue(current, part, null, true, shouldIgnoreCase);
+		if (!handled.exists) return handled;
+		current = handled.value;
+	}
+	return {
+		exists: true,
+		value: current
+	};
+}
+function getPaths(path, lowercase) {
+	const normalized = lowercase ? path.toLowerCase() : path;
+	if (!EXPRESSION_NESTED.test(normalized)) return normalized;
+	return normalized.replace(EXPRESSION_BRACKET, ".$1").replace(EXPRESSION_DOTS, "").split(".");
+}
+function handleValue(data, path, value, get, ignoreCase) {
+	if (typeof data === "object" && data !== null && !ignoreKey(path)) {
+		const key = ignoreCase ? findKey(path, data) : path;
+		if (get) return {
+			exists: key in data,
+			value: data[key]
+		};
+		data[key] = typeof value === "function" ? value(data[key]) : value;
+	}
+	if (get) return {
+		exists: false,
+		value: void 0
+	};
+}
+const EXPRESSION_BRACKET = /\[(\w+)\]/g;
+const EXPRESSION_DOTS = /^\.|\.$/g;
+const EXPRESSION_NESTED = /\.|\[\w+\]/;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/value/get.mjs
+function getValue(data, path, ignoreCase) {
+	return getNestedValue(data, path, ignoreCase === true).value;
+}
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/value/has.mjs
+function hasValue(data, path, ignoreCase) {
+	return getNestedValue(data, path, ignoreCase === true).exists;
+}
+hasValue.get = getWithHasValue;
+function getWithHasValue(data, path, ignoreCase) {
+	return getNestedValue(data, path, ignoreCase === true);
+}
+//#endregion
+//#region src/components/group.component.ts
+var GroupComponent = class {
+	element;
+	expanded = true;
+	filtered = 0;
+	key;
+	selected = 0;
+	total = 0;
+	value;
+	constructor(label, value) {
+		this.label = label;
+		const stringified = getString(value);
+		this.key = `group:${stringified}`;
+		this.value = {
+			stringified,
+			original: value
+		};
+	}
+};
+function removeGroup(group) {
+	if (group.element == null) return;
+	group.element.innerHTML = "";
+	group.element.remove();
+}
+function renderGroup(state, component) {
+	component.element ??= createElement("div", {
+		className: `${CSS_TABELA_ROW} ${CSS_TABELA_ROW_GROUP}`,
+		innerHTML: `<div class="tabela__cell tabela__cell--group" role="cell">
+	<button class="tabela__button tabela__button--group" data-event="group" data-key="tabela_${state.id}_${component.key}" type="button">
+		<span aria-hidden="true"></span>
+		<span>Open/close</span>
+	</button>
+	<p>${component.label}</p>
+	<span class="tabela__group__total">${component.total}</span>
+	<span class="tabela__group__selected">${component.selected === 0 ? "" : component.selected}</span>
+</div>`,
+		role: "row"
+	}, {}, { height: `${state.options.rowHeight}px` });
+}
+function updateGroup(state, component) {
+	if (component.element == null) return;
+	const selected = component.element.querySelector(".tabela__group__selected");
+	const total = component.element.querySelector(".tabela__group__total");
+	if (selected != null) selected.textContent = component.selected === 0 ? "" : String(component.selected);
+	if (total != null) total.textContent = String(component.total);
+}
+//#endregion
+//#region src/managers/sort.manager.ts
+var SortManager = class {
+	handlers = Object.freeze({
+		add: (field, direction) => this.add(field, direction),
+		flip: (field) => this.flip(field),
+		clear: () => this.clear(),
+		remove: (field) => this.remove(field),
+		set: (items) => this.set(items)
+	});
+	items = [];
+	constructor(state) {
+		this.state = state;
+	}
+	add(field, direction) {
+		if (this.items.findIndex((item) => item.key === field) > -1) return;
+		this.items.push({
+			key: field,
+			direction: direction ?? "ascending"
+		});
+		this.sort();
+	}
+	addOrSet(event, field) {
+		if (event.ctrlKey || event.metaKey) this.add(field);
+		else this.set([{
+			field,
+			direction: "ascending"
+		}]);
+	}
+	clear() {
+		if (this.items.length > 0) {
+			this.items.length = 0;
+			this.sort();
+		}
+	}
+	destroy() {
+		this.handlers = void 0;
+		this.items = void 0;
+		this.state = void 0;
+	}
+	flip(field) {
+		const item = this.items.find((item) => item.key === field);
+		if (item == null) return;
+		item.direction = item.direction === "ascending" ? "descending" : "ascending";
+		this.sort();
+	}
+	remove(field) {
+		const index = this.items.findIndex((item) => item.key === field);
+		if (index > -1) {
+			this.items.splice(index, 1);
+			this.sort();
+		}
+	}
+	removeOrClear(event, field) {
+		if (event.ctrlKey || event.metaKey) this.remove(field);
+		else this.clear();
+	}
+	set(items) {
+		this.items.splice(0, this.items.length, ...items.map((item) => ({
+			key: item.field,
+			direction: item.direction
+		})));
+		this.sort();
+	}
+	sort() {
+		const { items, state } = this;
+		const { length } = state.managers.column.items;
+		for (let index = 0; index < length; index += 1) {
+			const column = state.managers.column.items[index];
+			const sorterIndex = items.findIndex((item) => item.key === column.options.field);
+			const sorterItem = items[sorterIndex];
+			setAttributes(column.elements.wrapper, {
+				"aria-sort": sorterItem == null ? "none" : items.length > 1 ? "other" : sorterItem.direction,
+				"data-sort-direction": sorterItem == null ? void 0 : sorterItem.direction
+			});
+			setAttribute(column.elements.sorter, "data-sort-position", sorterIndex > -1 && items.length > 1 ? sorterIndex + 1 : void 0);
+		}
+		state.managers.data.state.items.active = items.length === 0 ? void 0 : getSortedItems(state, items);
+		state.managers.render.update(true, true);
+	}
+	toggle(event, field, direction) {
+		switch (direction) {
+			case "ascending":
+				this.flip(field);
+				return;
+			case "descending":
+				this.removeOrClear(event, field);
+				return;
+			default:
+				this.addOrSet(event, field);
+				return;
+		}
+	}
+};
+function getSortedItems(state, sorters) {
+	const data = state.managers.data.state.items.active?.map((key) => key instanceof GroupComponent ? key : state.managers.data.state.values.mapped.get(key)) ?? state.managers.data.state.values.array.slice();
+	if (!state.managers.group.enabled) return sort(data, sorters).map((item) => getValue(item, state.key));
+	return sortWithGroups(state, data, sorters).map((item) => item instanceof GroupComponent ? item : getValue(item, state.key));
+}
+function sortWithGroups(state, data, sorters) {
+	const { length } = sorters;
+	return data.sort((first, second) => {
+		const firstValue = first instanceof GroupComponent ? first.value.stringified : getValue(first, state.managers.group.field);
+		const secondValue = second instanceof GroupComponent ? second.value.stringified : getValue(second, state.managers.group.field);
+		const firstOrder = state.managers.group.order[firstValue];
+		const secondOrder = state.managers.group.order[secondValue];
+		const groupComparison = compare(firstOrder, secondOrder);
+		if (groupComparison !== 0) return groupComparison;
+		const firstIsGroup = first instanceof GroupComponent;
+		const secondIsGroup = second instanceof GroupComponent;
+		if (firstIsGroup || secondIsGroup) return firstIsGroup && secondIsGroup ? 0 : firstIsGroup ? -1 : 1;
+		for (let index = 0; index < length; index += 1) {
+			const sorter = sorters[index];
+			const comparison = compare(getValue(first, sorter.key), getValue(second, sorter.key));
+			if (comparison !== 0) return comparison * (sorter.direction === "ascending" ? 1 : -1);
+		}
+		return 0;
+	});
 }
-var EXPRESSION_WHITESPACE = /^\s*$/;
+//#endregion
+//#region src/managers/data.manager.ts
 var DataManager = class {
 	handlers = Object.freeze({
 		add: (data) => void this.add(data, true),
@@ -1177,90 +1486,185 @@ var DataManager = class {
 		synchronize: (data, remove) => void this.synchronize(data, remove),
 		update: (data) => void this.update(data)
 	});
-	values = {
-		keys: { original: [] },
-		objects: {
-			mapped: /* @__PURE__ */ new Map(),
-			array: []
-		}
-	};
+	state;
+	get items() {
+		return this.state.items.active ?? this.state.items.original;
+	}
 	get size() {
-		return this.values.keys.active?.length ?? this.values.keys.original.length;
+		return this.items.length;
 	}
 	constructor(state) {
-		this.state = state;
+		this.state = {
+			...state,
+			items: { original: [] },
+			values: {
+				array: [],
+				mapped: /* @__PURE__ */ new Map()
+			}
+		};
 	}
 	async add(data, render) {
-		const { state, values } = this;
-		push(values.objects.array, data);
-		values.objects.mapped = toMap(values.objects.array, state.key);
-		if (render) this.render();
+		const { state } = this;
+		const groups = [];
+		const updates = [];
+		let groupColumn;
+		let { length } = data;
+		for (let index = 0; index < length; index += 1) {
+			const item = data[index];
+			const key = getValue(item, state.key);
+			if (state.values.mapped.has(key)) {
+				updates.push(item);
+				continue;
+			}
+			state.values.array.push(item);
+			state.values.mapped.set(key, item);
+			if (!state.managers.group.enabled) continue;
+			const groupValue = getValue(item, state.managers.group.field);
+			let group = state.managers.group.get(groupValue);
+			if (group == null) {
+				groupColumn ??= state.managers.column.get(state.managers.group.field);
+				group = new GroupComponent(`${groupColumn?.options.title ?? state.managers.group.field}: ${groupValue}`, groupValue);
+				state.values.array.push(group);
+				state.managers.group.add(group);
+			}
+			if (!group.expanded) state.managers.group.collapsed.add(key);
+			group.total += 1;
+			groups.push(group);
+		}
+		length = groups.length;
+		for (let index = 0; index < length; index += 1) updateGroup(state, groups[index]);
+		if (updates.length > 0) this.update(updates);
+		else if (render) this.render();
 	}
 	clear() {
-		if (this.values.objects.array.length > 0) this.set([]);
+		if (this.state.values.array.length > 0) this.removeItems([], true, true);
 	}
 	destroy() {
-		const { values } = this;
-		values.objects.mapped.clear();
-		values.keys.active = void 0;
-		values.keys.original.length = 0;
-		values.objects.array.length = 0;
+		const { state } = this;
+		state.values.mapped.clear();
+		state.items.active = void 0;
+		state.items.original.length = 0;
+		state.values.array.length = 0;
 		this.handlers = void 0;
 		this.state = void 0;
-		this.values = void 0;
 	}
 	get(active) {
-		const { values } = this;
-		return active ?? false ? values.keys.active?.map((key) => values.objects.mapped.get(key)) ?? [] : values.objects.array;
+		const { state } = this;
+		return active ?? false ? select(state.items.active ?? [], (key) => !(key instanceof GroupComponent), (key) => state.values.mapped.get(key)) : state.values.array.filter((item) => !(item instanceof GroupComponent));
 	}
-	getIndex(key) {
-		const { values } = this;
-		return (values.keys.active ?? values.keys.original).indexOf(key);
+	getIndex(item) {
+		if (item instanceof GroupComponent) return this.items.indexOf(item);
+		return this.items.findIndex((value) => value instanceof GroupComponent ? value.key === item : value === item);
 	}
 	async remove(items, render) {
-		const { state, values } = this;
-		const keys = items.map((value) => isPlainObject(value) ? value[state.key] : value).filter((key) => values.objects.mapped.has(key));
+		const { state } = this;
+		const keys = items.map((value) => isPlainObject(value) ? getValue(value, state.key) : value);
 		const { length } = keys;
-		if (length === 0) return;
-		for (let keyIndex = 0; keyIndex < length; keyIndex += 1) {
-			const key = keys[keyIndex];
-			values.objects.mapped.delete(key);
-			const arrayIndex = values.objects.array.findIndex((object) => object[state.key] === key);
-			if (arrayIndex > -1) values.objects.array.splice(arrayIndex, 1);
-			values.keys.original.splice(values.keys.original.indexOf(key), 1);
-			state.managers.row.remove(key);
+		if (length > 0) return this.removeItems(keys, false, render === true);
+	}
+	async removeItems(items, clear, render) {
+		const { state } = this;
+		if (clear) {
+			state.items.active = void 0;
+			state.items.original = [];
+			state.values.array = [];
+			state.values.mapped.clear();
+			state.managers.row.clear();
+			if (state.managers.group.enabled) state.managers.group.clear();
+			return this.render();
 		}
-		if (render) this.render();
+		const groups = [];
+		const chunked = chunk(items);
+		const chunkedLength = chunked.length;
+		for (let chunkedIndex = 0; chunkedIndex < chunkedLength; chunkedIndex += 1) {
+			const chunk = chunked[chunkedIndex];
+			const chunkLength = chunk.length;
+			for (let itemIndex = 0; itemIndex < chunkLength; itemIndex += 1) {
+				const item = chunk[itemIndex];
+				const dataIndex = state.items.original.indexOf(item);
+				let dataValue;
+				[dataValue] = state.values.array.splice(dataIndex, 1);
+				state.items.original.splice(dataIndex, 1);
+				state.managers.row.remove(item);
+				state.values.mapped.delete(item);
+				if (!state.managers.group.enabled || item instanceof GroupComponent) continue;
+				state.managers.group.collapsed.delete(item);
+				const groupKey = getValue(dataValue, state.managers.group.field);
+				const group = state.managers.group.get(groupKey);
+				if (group == null) continue;
+				group.total -= 1;
+				if (group.total > 0) {
+					groups.push(group);
+					continue;
+				}
+				let groupIndex = groups.indexOf(group);
+				if (groupIndex > -1) groups.splice(groupIndex, 1);
+				groupIndex = state.values.array.indexOf(group);
+				if (groupIndex > -1) {
+					state.items.original.splice(groupIndex, 1);
+					state.values.array.splice(groupIndex, 1);
+				}
+				state.managers.group.remove(group);
+				if (items.length >= 1e4) await delay(25);
+			}
+		}
+		const { length } = groups;
+		for (let index = 0; index < length; index += 1) updateGroup(state, groups[index]);
+		if (render) return this.render();
 	}
 	render() {
-		const { state, values } = this;
-		values.keys.original = sort(values.objects.array.map((item) => item[state.key]));
+		const { state } = this;
+		if (state.managers.group.enabled) sortWithGroups(state, state.values.array, [{
+			direction: "ascending",
+			key: state.key
+		}]);
+		else sort(state.values.array, [{
+			direction: "ascending",
+			key: state.key
+		}]);
+		state.items.original = state.values.array.map((item) => item instanceof GroupComponent ? item : getValue(item, state.key));
+		state.values.mapped = toMap(state.values.array.filter((item) => !(item instanceof GroupComponent)), (item) => getValue(item, state.key));
 		if (Object.keys(state.managers.filter.items).length > 0) state.managers.filter.filter();
 		else if (state.managers.sort.items.length > 0) state.managers.sort.sort();
-		else state.managers.render.update(true);
+		else state.managers.render.update(true, true);
 	}
 	set(data) {
-		const { state, values } = this;
-		values.objects.mapped = toMap(data, state.key);
-		values.objects.array = data;
+		const { state } = this;
+		const array = data.slice();
+		if (state.managers.group.enabled) {
+			const column = state.managers.column.get(state.managers.group.field);
+			const grouped = toRecord.arrays(data, state.managers.group.field);
+			const entries = Object.entries(grouped);
+			const { length } = entries;
+			const groups = [];
+			for (let index = 0; index < length; index += 1) {
+				const [value, items] = entries[index];
+				const group = new GroupComponent(`${column?.options.title ?? state.managers.group.field}: ${value}`, value);
+				group.total = items.length;
+				groups.push(group);
+				array.push(group);
+			}
+			state.managers.group.set(groups);
+		}
+		state.values.array = array;
 		this.render();
 	}
 	async synchronize(data, remove) {
-		const { state, values } = this;
+		const { state } = this;
 		const add = [];
 		const updated = [];
 		const keys = /* @__PURE__ */ new Set([]);
 		const { length } = data;
 		for (let index = 0; index < length; index += 1) {
 			const object = data[index];
-			const key = object[state.key];
-			if (values.objects.mapped.has(key)) updated.push(object);
+			const key = getValue(object, state.key);
+			if (state.values.mapped.has(key)) updated.push(object);
 			else add.push(object);
 			keys.add(key);
 		}
 		if (keys.size === 0) return;
 		if (remove ?? false) {
-			const toRemove = values.keys.original.filter((key) => !keys.has(key));
+			const toRemove = state.items.original.filter((key) => !(key instanceof GroupComponent) && !keys.has(key));
 			if (toRemove.length > 0) await this.remove(toRemove, false);
 		}
 		await this.update(updated);
@@ -1268,14 +1672,14 @@ var DataManager = class {
 		if (add.length > 0 || (remove ?? false)) this.render();
 	}
 	async update(data) {
-		const { state, values } = this;
+		const { state } = this;
 		const { length } = data;
 		for (let index = 0; index < length; index += 1) {
 			const object = data[index];
-			const key = object[state.key];
-			const value = values.objects.mapped.get(key);
+			const key = getValue(object, state.key);
+			const value = state.values.mapped.get(key);
 			if (value != null) {
-				values.objects.mapped.set(key, {
+				state.values.mapped.set(key, {
 					...value,
 					...object
 				});
@@ -1284,6 +1688,8 @@ var DataManager = class {
 		}
 	}
 };
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/event/delegation.mjs
 function addDelegatedHandler(doc, type, name, passive) {
 	if (DELEGATED.has(name)) return;
 	DELEGATED.add(name);
@@ -1335,11 +1741,11 @@ function removeDelegatedListener(target, name, listener) {
 	if (handlers.size === 0) target[name] = void 0;
 	return true;
 }
-var DELEGATED = /* @__PURE__ */ new Set();
-var EVENT_PREFIX = "@";
-var EVENT_SUFFIX_ACTIVE = ":active";
-var EVENT_SUFFIX_PASSIVE = ":passive";
-var EVENT_TYPES = new Set([
+const DELEGATED = /* @__PURE__ */ new Set();
+const EVENT_PREFIX = "@";
+const EVENT_SUFFIX_ACTIVE = ":active";
+const EVENT_SUFFIX_PASSIVE = ":passive";
+const EVENT_TYPES = new Set([
 	"beforeinput",
 	"click",
 	"dblclick",
@@ -1363,12 +1769,16 @@ var EVENT_TYPES = new Set([
 	"touchmove",
 	"touchstart"
 ]);
-var HANDLER_ACTIVE = delegatedEventHandler.bind(false);
-var HANDLER_PASSIVE = delegatedEventHandler.bind(true);
+const HANDLER_ACTIVE = delegatedEventHandler.bind(false);
+const HANDLER_PASSIVE = delegatedEventHandler.bind(true);
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/function/misc.mjs
 /**
 * A function that does nothing, which can be useful, I guess…
 */
 function noop() {}
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/event/index.mjs
 function createEventOptions(options) {
 	return {
 		capture: getBoolean(options?.capture),
@@ -1408,6 +1818,8 @@ function on(target, type, listener, options) {
 		target.removeEventListener(type, listener, extended);
 	};
 }
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/find/relative.mjs
 function findAncestor(origin, selector) {
 	const element = getElement(origin);
 	if (element == null || selector == null) return null;
@@ -1428,243 +1840,59 @@ function getElement(origin) {
 	if (origin instanceof Element) return origin;
 	return origin instanceof Event && origin.target instanceof Element ? origin.target : void 0;
 }
+//#endregion
+//#region src/managers/event.manager.ts
 var EventManager = class {
 	constructor(state) {
 		this.state = state;
-		mapped$1.set(state.element, this);
-	}
-	destroy() {
-		mapped$1.delete(this.state.element);
-		this.state = void 0;
-	}
-	onSort(event, target) {
-		const direction = target.getAttribute("data-sort-direction");
-		const field = target.getAttribute("data-field");
-		if (field != null) this.state.managers.sort.toggle(event, field, direction);
-	}
-};
-function onClick(event) {
-	const target = findAncestor(event, "[data-event]");
-	const table = findAncestor(event, ".tabela");
-	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) return;
-	const manager = mapped$1.get(table);
-	if (manager == null) return;
-	switch (target?.getAttribute("data-event")) {
-		case "heading":
-			manager.onSort(event, target);
-			break;
-		case "row":
-			manager.state.managers.selection.handle(event, target);
-			break;
-		default: break;
-	}
-}
-function onKeydown(event) {
-	const target = findAncestor(event, "[data-event]");
-	const table = findAncestor(event, ".tabela");
-	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) return;
-	const manager = mapped$1.get(table);
-	if (manager == null) return;
-	switch (target?.getAttribute("data-event")) {
-		case "body":
-			manager.state.managers.navigation.handle(event);
-			break;
-		default: break;
-	}
-}
-const mapped$1 = /* @__PURE__ */ new WeakMap();
-on(document, "click", onClick);
-on(document, "keydown", onKeydown, { passive: false });
-/**
-* Clamp a number between a minimum and maximum value
-* @param value Value to clamp
-* @param minimum Minimum value
-* @param maximum Maximum value
-* @param loop If `true`, the value will loop around when smaller than the minimum or larger than the maximum _(defaults to `false`)_
-* @returns Clamped value
-*/
-function clamp(value, minimum, maximum, loop) {
-	if (![
-		value,
-		minimum,
-		maximum
-	].every(isNumber)) return NaN;
-	if (value < minimum) return loop === true ? maximum : minimum;
-	return value > maximum ? loop === true ? minimum : maximum : value;
-}
-/**
-* Get the number value from an unknown value _(based on Lodash)_
-* @param value Original value
-* @returns Original value as a number, or `NaN` if the value is unable to be parsed
-*/
-function getNumber(value) {
-	if (typeof value === "number") return value;
-	if (typeof value === "bigint" || typeof value === "boolean") return Number(value);
-	if (value == null || typeof value === "symbol") return NaN;
-	if (typeof value === "function") return getNumber(value());
-	let parsed = value.valueOf();
-	if (typeof parsed === "object") parsed = parsed.toString();
-	if (typeof parsed !== "string") return getNumber(parsed);
-	const trimmed = parsed.trim();
-	if (trimmed.length === 0) return NaN;
-	if (EXPRESSION_ZEROISH.test(parsed)) return 0;
-	const isBinary = EXPRESSION_BINARY.test(trimmed);
-	if (isBinary || EXPRESSION_OCTAL.test(trimmed)) return Number.parseInt(trimmed.slice(2), isBinary ? 2 : OCTAL_VALUE);
-	return Number(EXPRESSION_HEX.test(trimmed) ? trimmed : trimmed.replace(EXPRESSION_UNDERSCORE, ""));
-}
-var EXPRESSION_BINARY = /^0b[01]+$/i;
-var EXPRESSION_HEX = /^0x[0-9a-f]+$/i;
-var EXPRESSION_OCTAL = /^0o[0-7]+$/i;
-var EXPRESSION_UNDERSCORE = /_/g;
-var EXPRESSION_ZEROISH = /^\s*0+\s*$/;
-var OCTAL_VALUE = 8;
-function getSizedMaximum(first, second) {
-	let actual;
-	if (typeof first === "number") actual = first;
-	else actual = typeof second === "number" ? second : MAXIMUM_DEFAULT;
-	return clamp(actual, 1, MAXIMUM_ABSOLUTE);
-}
-var MAXIMUM_ABSOLUTE = 16777216;
-var MAXIMUM_DEFAULT = 1048576;
-/**
-* A Map with a maximum size
-*
-* Behavior is similar to a _LRU_-cache, where the least recently used entries are removed
-*/
-var SizedMap = class extends Map {
-	/**
-	* The maximum size of the Map
-	*/
-	#maximumSize;
-	/**
-	* Is the Map full?
-	*/
-	get full() {
-		return this.size >= this.#maximumSize;
-	}
-	get maximum() {
-		return this.#maximumSize;
-	}
-	constructor(first, second) {
-		const maximum = getSizedMaximum(first, second);
-		super();
-		this.#maximumSize = maximum;
-		if (Array.isArray(first)) {
-			const { length } = first;
-			if (length <= maximum) for (let index = 0; index < length; index += 1) this.set(...first[index]);
-			else for (let index = 0; index < maximum; index += 1) this.set(...first[length - maximum + index]);
-		}
-	}
-	/**
-	* @inheritdoc
-	*/
-	get(key) {
-		const value = super.get(key);
-		if (value !== void 0 || this.has(key)) this.set(key, value);
-		return value;
-	}
-	/**
-	* @inheritdoc
-	*/
-	set(key, value) {
-		if (this.has(key)) this.delete(key);
-		else if (this.size >= this.#maximumSize) this.delete(this.keys().next().value);
-		return super.set(key, value);
-	}
-};
-var Memoized = class {
-	#state;
-	/**
-	* Maximum cache size
-	*/
-	get maximum() {
-		return this.#state.cache?.maximum ?? NaN;
-	}
-	/**
-	* Current cache size
-	*/
-	get size() {
-		return this.#state.cache?.size ?? NaN;
-	}
-	constructor(callback, options) {
-		const cache = new SizedMap(options.cacheSize);
-		const getter = (...parameters) => {
-			const key = options.cacheKey?.(...parameters) ?? (parameters.length === 1 ? parameters[0] : join(parameters.map(getString), "_"));
-			if (cache.has(key)) return cache.get(key);
-			const value = callback(...parameters);
-			cache.set(key, value);
-			return value;
-		};
-		this.#state = {
-			cache,
-			getter
-		};
-	}
-	/**
-	* Clear the cache
-	*/
-	clear() {
-		this.#state.cache?.clear();
-	}
-	/**
-	* Delete a result from the cache
-	* @param key Key to delete
-	* @returns `true` if the key existed and was removed, otherwise `false`
-	*/
-	delete(key) {
-		return this.#state.cache?.delete(key) ?? false;
-	}
-	/**
-	* Destroy the instance _(clearing its cache and removing its callback)_
-	*/
-	destroy() {
-		this.#state.cache?.clear();
-		this.#state.cache = void 0;
-		this.#state.getter = void 0;
-	}
-	/**
-	* Get a result from the cache
-	* @param key Key to get
-	* @returns Cached result or `undefined` if it does not exist
-	*/
-	get(key) {
-		return this.#state.cache?.get(key);
+		mapped$1.set(state.element, this);
 	}
-	/**
-	* Does the result exist?
-	* @param key Key to check
-	* @returns `true` if the result exists, otherwise `false`
-	*/
-	has(key) {
-		return this.#state.cache?.has(key) ?? false;
+	destroy() {
+		mapped$1.delete(this.state.element);
+		this.state = void 0;
 	}
-	/**
-	* Run the callback with the provided parameters
-	* @param parameters Parameters to pass to the callback
-	* @returns Cached or computed _(then cached)_ result
-	*/
-	run(...parameters) {
-		if (this.#state.cache == null || this.#state.getter == null) throw new Error("The Memoized instance has been destroyed");
-		return this.#state.getter(...parameters);
+	onSort(event, target) {
+		const direction = target.getAttribute("data-sort-direction");
+		const field = target.getAttribute("data-field");
+		if (field != null) this.state.managers.sort.toggle(event, field, direction);
 	}
 };
-function getMemoizationOptions(input) {
-	const { cacheKey, cacheSize } = isPlainObject(input) ? input : {};
-	return {
-		cacheKey: typeof cacheKey === "function" ? cacheKey : void 0,
-		cacheSize: typeof cacheSize === "number" && cacheSize > 0 ? cacheSize : DEFAULT_CACHE_SIZE
-	};
+function onClick(event) {
+	const target = findAncestor(event, "[data-event]");
+	const table = findAncestor(event, ".tabela__table");
+	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) return;
+	const manager = mapped$1.get(table);
+	if (manager == null) return;
+	switch (target?.getAttribute("data-event")) {
+		case "group":
+			manager.state.managers.group.handle(target);
+			break;
+		case "heading":
+			manager.onSort(event, target);
+			break;
+		case "row":
+			manager.state.managers.selection.handle(event, target);
+			break;
+		default: break;
+	}
 }
-/**
-* Memoize a function, caching and retrieving results based on the first parameter
-* @param callback Callback to memoize
-* @param options Memoization options
-* @returns Memoized instance
-*/
-function memoize(callback, options) {
-	return new Memoized(callback, getMemoizationOptions(options));
+function onKeydown(event) {
+	const target = findAncestor(event, "[data-event]");
+	const table = findAncestor(event, ".tabela__table");
+	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) return;
+	const manager = mapped$1.get(table);
+	if (manager == null) return;
+	if (event.key === " ") {
+		event.preventDefault();
+		return;
+	}
+	manager.state.managers.navigation.handle(event);
 }
-var DEFAULT_CACHE_SIZE = 1024;
+const mapped$1 = /* @__PURE__ */ new WeakMap();
+on(document, "click", onClick);
+on(document, "keydown", onKeydown, { passive: false });
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/string/match.mjs
 /**
 * Check if a string ends with a specified substring
 * @param haystack String to look in
@@ -1673,7 +1901,7 @@ var DEFAULT_CACHE_SIZE = 1024;
 * @returns `true` if the string ends with the given substring, otherwise `false`
 */
 function endsWith(haystack, needle, ignoreCase) {
-	return match("endsWith", haystack, needle, ignoreCase === true);
+	return match(MATCH_ENDS_WITH, haystack, needle, ignoreCase === true);
 }
 /**
 * Check if a string includes a specified substring
@@ -1683,7 +1911,7 @@ function endsWith(haystack, needle, ignoreCase) {
 * @returns `true` if the string includes the given substring, otherwise `false`
 */
 function includes(haystack, needle, ignoreCase) {
-	return match("includes", haystack, needle, ignoreCase === true);
+	return match(MATCH_INCLUDES, haystack, needle, ignoreCase === true);
 }
 function match(type, haystack, needle, ignoreCase) {
 	if (typeof haystack !== "string" || typeof needle !== "string") return false;
@@ -1701,9 +1929,14 @@ function matchCallback(haystack, needle, ignoreCase) {
 * @returns `true` if the string starts with the given substring, otherwise `false`
 */
 function startsWith(haystack, needle, ignoreCase) {
-	return match("startsWith", haystack, needle, ignoreCase === true);
-}
-var matchMemoizers = {};
+	return match(MATCH_STARTS_WITH, haystack, needle, ignoreCase === true);
+}
+const MATCH_ENDS_WITH = "endsWith";
+const MATCH_INCLUDES = "includes";
+const MATCH_STARTS_WITH = "startsWith";
+const matchMemoizers = {};
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/value/equal.mjs
 function equal(first, second, options) {
 	return equalValue(first, second, getEqualOptions(options));
 }
@@ -1800,9 +2033,9 @@ function equalValue(first, second, options) {
 		case first instanceof ArrayBuffer && second instanceof ArrayBuffer: return equalArrayBuffer(first, second, options);
 		case first instanceof Date && second instanceof Date: return Object.is(Number(first), Number(second));
 		case first instanceof DataView && second instanceof DataView: return equalDataView(first, second, options);
-		case first instanceof Error && second instanceof Error: return equalProperties(first, second, ["name", "message"], options);
+		case first instanceof Error && second instanceof Error: return equalProperties(first, second, ERROR_PROPERTIES, options);
 		case first instanceof Map && second instanceof Map: return equalMap(first, second, options);
-		case first instanceof RegExp && second instanceof RegExp: return equalProperties(first, second, ["source", "flags"], options);
+		case first instanceof RegExp && second instanceof RegExp: return equalProperties(first, second, EXPRESSION_PROPERTIES, options);
 		case first instanceof Set && second instanceof Set: return equalSet(first, second, options);
 		case Array.isArray(first) && Array.isArray(second): return equalArray(first, second, options);
 		case isPlainObject(first) && isPlainObject(second): return equalPlainObject(first, second, options);
@@ -1869,8 +2102,12 @@ function getEqualOptions(input) {
 	options.relaxedNullish = input.relaxedNullish === true;
 	return options;
 }
-var ARRAY_PEEK_PERCENTAGE = 10;
-var ARRAY_THRESHOLD = 100;
+const ARRAY_PEEK_PERCENTAGE = 10;
+const ARRAY_THRESHOLD = 100;
+const ERROR_PROPERTIES = ["name", "message"];
+const EXPRESSION_PROPERTIES = ["source", "flags"];
+//#endregion
+//#region src/managers/filter.manager.ts
 var FilterManager = class {
 	handlers = Object.freeze({
 		add: (item) => this.add(item),
@@ -1884,7 +2121,7 @@ var FilterManager = class {
 	}
 	add(item) {
 		if (this.items[item.field] == null) this.items[item.field] = [];
-		else if (this.items[item.field].findIndex((existing) => equal(existing, item)) !== -1) return;
+		else if (this.items[item.field].findIndex((existing) => equal(existing, item)) > -1) return;
 		this.items[item.field].push(item);
 		this.filter();
 	}
@@ -1903,10 +2140,14 @@ var FilterManager = class {
 		const { state } = this;
 		const filtered = [];
 		const filters = Object.entries(this.items);
-		const keysLength = state.managers.data.values.keys.original.length;
-		rowLoop: for (let keyIndex = 0; keyIndex < keysLength; keyIndex += 1) {
-			const key = state.managers.data.values.keys.original[keyIndex];
-			const row = state.managers.data.values.objects.mapped.get(key);
+		const itemsLength = state.managers.data.state.items.original.length;
+		rowLoop: for (let itemIndex = 0; itemIndex < itemsLength; itemIndex += 1) {
+			const item = state.managers.data.state.items.original[itemIndex];
+			if (item instanceof GroupComponent) {
+				filtered.push(item);
+				continue;
+			}
+			const row = state.managers.data.state.values.mapped.get(item);
 			if (row == null) continue;
 			filterLoop: for (let filterIndex = 0; filterIndex < filters.length; filterIndex += 1) {
 				const [field, items] = filters[filterIndex];
@@ -1917,16 +2158,23 @@ var FilterManager = class {
 				}
 				continue rowLoop;
 			}
-			filtered.push(key);
+			filtered.push(item);
 		}
-		state.managers.data.values.keys.active = filtered;
+		state.managers.data.state.items.active = filtered;
 		if (state.managers.sort.items.length > 0) state.managers.sort.sort();
 		else state.managers.render.update(true, true);
 	}
 	remove(value) {
 		if (typeof value === "string") {
 			if (this.items[value] == null) return;
-			this.items = {};
+			const keyed = {};
+			const filters = Object.keys(this.items);
+			const { length } = filters;
+			for (let index = 0; index < length; index += 1) {
+				const field = filters[index];
+				if (field !== value) keyed[field] = this.items[field];
+			}
+			this.items = keyed;
 		} else {
 			const { field } = value;
 			if (this.items[field] == null) return;
@@ -1959,12 +2207,83 @@ const comparators = {
 	"starts-with": (row, filter) => startsWith(getString(row), getString(filter), true)
 };
 const equalizer = equal.initialize({ ignoreCase: true });
+//#endregion
+//#region src/managers/group.manager.ts
+var GroupManager = class {
+	collapsed = /* @__PURE__ */ new Set();
+	enabled = false;
+	field;
+	handlers = Object.freeze({ set: (group) => {
+		if (group === this.field) return;
+		this.enabled = !isNullableOrWhitespace(group);
+		this.field = group ?? "";
+		this.state.managers.data.set(this.state.managers.data.get());
+	} });
+	items = [];
+	order = {};
+	constructor(state) {
+		this.state = state;
+		if (isNullableOrWhitespace(state.options.grouping)) return;
+		this.enabled = true;
+		this.field = state.options.grouping;
+	}
+	add(group) {
+		this.set([...this.items, group]);
+	}
+	clear() {
+		const groups = this.items.splice(0);
+		const { length } = groups;
+		for (let index = 0; index < length; index += 1) this.remove(groups[index]);
+	}
+	destroy() {
+		const groups = this.items.splice(0);
+		const { length } = groups;
+		for (let index = 0; index < length; index += 1) removeGroup(groups[index]);
+		this.collapsed.clear();
+		this.handlers = void 0;
+		this.state = void 0;
+	}
+	get(value) {
+		const asString = getString(value);
+		return this.items.find((item) => item.value.stringified === asString);
+	}
+	handle(button) {
+		const value = button.dataset.key?.replace(`tabela_${this.state.id}_group:`, "");
+		const group = this.get(value);
+		if (group == null) return;
+		const { collapsed, items, state } = this;
+		group.expanded = !group.expanded;
+		const index = items.indexOf(group);
+		let first = state.managers.data.state.items.original.indexOf(items[index]) + 1;
+		const last = items[index + 1] == null ? state.managers.data.state.items.original.length - 1 : state.managers.data.state.items.original.indexOf(items[index + 1]) - 1;
+		for (; first <= last; first += 1) {
+			const key = state.managers.data.state.items.original[first];
+			if (group.expanded) collapsed.delete(key);
+			else collapsed.add(key);
+		}
+		if (Object.keys(state.managers.filter.items).length > 0) state.managers.filter.filter();
+		else if (state.managers.sort.items.length > 0) state.managers.sort.sort();
+		else state.managers.render.update(true, true);
+	}
+	remove(group) {
+		removeGroup(group);
+		this.set(this.items.filter((item) => item !== group));
+	}
+	set(items) {
+		this.items = sort(items, (item) => item.label);
+		this.order = toRecord(items, (group) => group.value.stringified, (_, index) => index);
+	}
+};
+//#endregion
+//#region src/helpers/misc.helpers.ts
 function getKey(value) {
 	if (typeof value === "number") return value;
 	if (typeof value !== "string") return;
 	return integerExpression.test(value) ? Number.parseInt(value, 10) : value;
 }
 const integerExpression = /^\d+$/;
+//#endregion
+//#region src/managers/navigation.manager.ts
 var NavigationManager = class {
 	active;
 	constructor(state) {
@@ -1978,28 +2297,28 @@ var NavigationManager = class {
 		event.preventDefault();
 		const { components, id, managers } = this.state;
 		const activeDescendant = components.body.elements.group.getAttribute("aria-activedescendant");
-		const keys = managers.data.values.keys.active ?? managers.data.values.keys.original;
-		const { length } = keys;
+		const { items } = managers.data;
+		const { length } = items;
 		let next;
 		if (isNullableOrWhitespace(activeDescendant)) next = getDefaultIndex(event.key, length);
-		else next = getIndex(event, activeDescendant, id, keys);
-		if (next != null) this.setActive(keys.at(next));
+		else next = getIndex(this.state, event, activeDescendant, id);
+		if (next != null) this.setActive(items.at(next));
 	}
-	setActive(key, scroll) {
-		const { components, managers, options } = this.state;
-		this.active = key;
+	setActive(item, scroll) {
+		const { components, id, managers, options } = this.state;
+		this.active = item;
 		const active = components.body.elements.group.querySelectorAll("[data-active=\"true\"]");
 		for (const item of active) item.setAttribute("data-active", "false");
-		const row = managers.row.get(key);
-		if (row != null) {
-			row.element?.setAttribute("data-active", "true");
-			if (scroll ?? true) if (row.element == null) components.body.elements.group.scrollTo({
-				top: managers.data.getIndex(key) * options.rowHeight,
+		const component = item instanceof GroupComponent ? item : managers.row.get(item, false);
+		if (component != null) {
+			component.element?.setAttribute("data-active", "true");
+			if (scroll ?? true) if (component.element == null) components.body.elements.group.scrollTo({
+				top: managers.data.getIndex(item) * options.rowHeight,
 				behavior: "smooth"
 			});
-			else row.element.scrollIntoView({ block: "nearest" });
+			else component.element.scrollIntoView({ block: "nearest" });
 		}
-		components.body.elements.group.setAttribute("aria-activedescendant", row == null ? "" : `tabela_${this.state.id}_row_${key}`);
+		components.body.elements.group.setAttribute("aria-activedescendant", component == null ? "" : `tabela_${id}_${component.key}`);
 	}
 };
 function getDefaultIndex(key, max) {
@@ -2010,11 +2329,11 @@ function getDefaultIndex(key, max) {
 		default: return 0;
 	}
 }
-function getIndex(event, active, id, keys) {
-	const key = getKey(active.replace(`tabela_${id}_row_`, ""));
+function getIndex(state, event, active, id) {
+	const key = getKey(active.replace(`tabela_${id}_`, ""));
 	if (key == null) return;
-	if (absoluteKeys.has(event.key)) return event.key === "Home" ? 0 : keys.length - 1;
-	return clamp(keys.indexOf(key) + getOffset(event.key), 0, keys.length - 1, true);
+	if (absoluteKeys.has(event.key)) return event.key === "Home" ? 0 : state.managers.data.size - 1;
+	return clamp(state.managers.data.getIndex(key) + getOffset(event.key), 0, state.managers.data.size - 1, true);
 }
 function getOffset(key) {
 	switch (key) {
@@ -2034,6 +2353,8 @@ const allKeys = new Set([
 	...arrowKeys,
 	...pageKeys
 ]);
+//#endregion
+//#region src/components/row.component.ts
 function removeRow(pool, row) {
 	if (row.element != null) {
 		row.element.innerHTML = "";
@@ -2054,20 +2375,20 @@ function renderRow(state, row) {
 		"data-active": String(state.managers.navigation.active === row.key),
 		"data-event": "row",
 		"data-key": key,
-		id: `tabela_${state.id}_row_${key}`
+		id: `tabela_${state.id}_${key}`
 	});
-	element.classList.add("tabela__row--body");
-	if (selected) element.classList.add("tabela__row--selected");
-	else element.classList.remove("tabela__row--selected");
+	element.classList.add(CSS_TABELA_ROW_BODY);
+	if (selected) element.classList.add(CSS_TABELA_ROW_SELECTED);
+	else element.classList.remove(CSS_TABELA_ROW_SELECTED);
 	const columns = state.managers.column.items;
 	const { length } = columns;
-	const data = state.managers.data.values.objects.mapped.get(row.key);
+	const data = state.managers.data.state.values.mapped.get(row.key);
 	if (data == null) return;
 	for (let index = 0; index < length; index += 1) {
 		const { options } = columns[index];
 		state.managers.render.pool.cells[options.field] ??= [];
 		const cell = state.managers.render.pool.cells[columns[index].options.field].shift() ?? createCell(options.width);
-		cell.textContent = String(data[options.field]);
+		cell.textContent = String(getValue(data, options.field));
 		row.cells[options.field] = cell;
 		element.append(cell);
 	}
@@ -2079,16 +2400,21 @@ var RowComponent = class {
 		this.key = key;
 	}
 };
-function getRange(down) {
-	const { components, managers, options } = this.state;
-	const { clientHeight, scrollTop } = components.body.elements.group;
-	const first = Math.floor(scrollTop / options.rowHeight);
-	const last = Math.min((managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1, Math.ceil((scrollTop + clientHeight) / options.rowHeight) - 1);
-	const before = Math.ceil(clientHeight / options.rowHeight) * (down ? 1 : 2);
-	const after = Math.ceil(clientHeight / options.rowHeight) * (down ? 2 : 1);
-	const start = Math.max(0, first - before);
+//#endregion
+//#region src/managers/render.manager.ts
+function getRange(state, down) {
+	const { element, managers, options } = state;
+	const { clientHeight, scrollTop } = element;
+	const { items } = managers.data;
+	const firstIndex = Math.floor(scrollTop / options.rowHeight);
+	const lastIndex = items.length - managers.group.collapsed.size - 1;
+	const last = Math.min(lastIndex, Math.ceil((scrollTop + clientHeight) / options.rowHeight) - 1);
+	const visible = clientHeight / options.rowHeight;
+	const before = Math.ceil(visible) * (down ? 1 : 2);
+	const after = Math.ceil(visible) * (down ? 2 : 1);
+	const start = Math.max(0, firstIndex - before);
 	return {
-		end: Math.min((managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1, last + after),
+		end: Math.min(lastIndex, last + after),
 		start
 	};
 }
@@ -2096,7 +2422,7 @@ function onScroll() {
 	const { state } = this;
 	if (!state.active) {
 		requestAnimationFrame(() => {
-			const top = state.components.body.elements.group.scrollTop;
+			const top = state.element.scrollTop;
 			this.update(top > state.top);
 			state.active = false;
 			state.top = top;
@@ -2114,7 +2440,7 @@ var RenderManager = class {
 	state;
 	visible = /* @__PURE__ */ new Map();
 	constructor(state) {
-		this.listener = on(state.components.body.elements.group, "scroll", onScroll.bind(this));
+		this.listener = on(state.element, "scroll", onScroll.bind(this));
 		this.state = {
 			...state,
 			active: false,
@@ -2125,6 +2451,11 @@ var RenderManager = class {
 		const { listener, pool, visible } = this;
 		listener();
 		visible.clear();
+		const cells = Object.values(pool.cells).flat();
+		let { length } = cells;
+		for (let index = 0; index < length; index += 1) cells[index].remove();
+		length = pool.rows.length;
+		for (let index = 0; index < length; index += 1) pool.rows[index].remove();
 		pool.cells = {};
 		pool.rows = [];
 		this.fragment = void 0;
@@ -2138,7 +2469,8 @@ var RenderManager = class {
 		const { length } = fields;
 		for (let index = 0; index < length; index += 1) delete pool.cells[fields[index]];
 		for (const [, key] of visible) {
-			const row = state.managers.row.get(key);
+			if (key instanceof GroupComponent) continue;
+			const row = state.managers.row.get(key, false);
 			if (row == null || row.element == null) continue;
 			for (let index = 0; index < length; index += 1) {
 				row.cells[fields[index]].innerHTML = "";
@@ -2155,53 +2487,81 @@ var RenderManager = class {
 	update(down, rerender) {
 		const { state, pool, visible } = this;
 		const { components, managers, options } = state;
-		components.body.elements.faker.style.height = `${managers.data.size * options.rowHeight}px`;
+		components.body.elements.faker.style.height = `${(managers.data.size - managers.group.collapsed.size) * options.rowHeight}px`;
 		const indices = /* @__PURE__ */ new Set();
-		const range = getRange.call(this, down);
+		const range = getRange(state, down);
 		for (let index = range.start; index <= range.end; index += 1) indices.add(index);
 		let remove = rerender ?? false;
 		for (const [index, key] of visible) {
-			const row = managers.row.get(key);
-			if (remove || row == null || !indices.has(index)) {
+			if (key instanceof GroupComponent) {
+				if (remove || !indices.has(index)) {
+					visible.delete(index);
+					key.element?.remove();
+				}
+				continue;
+			}
+			const row = managers.row.get(key, false);
+			if (remove || row == null || !indices.has(index) || managers.group.collapsed.has(key)) {
 				visible.delete(index);
 				if (row != null) removeRow(pool, row);
 			}
 		}
 		const fragment = this.getFragment();
-		const keys = managers.data.values.keys.active ?? managers.data.values.keys.original;
+		const { items } = managers.data;
 		let count = 0;
-		for (let index = range.start; index <= range.end; index += 1) {
+		let offset = 0;
+		for (let index = range.start; index <= range.end + offset; index += 1) {
 			if (visible.has(index)) continue;
-			const key = keys[index];
-			const row = managers.row.get(key);
+			const item = items[index];
+			if (item instanceof GroupComponent) {
+				count += 1;
+				renderGroup(state, item);
+				visible.set(index, item);
+				if (item.element != null) {
+					item.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
+					fragment.append(item.element);
+				}
+				continue;
+			}
+			const row = managers.row.get(item, true);
 			if (row == null) continue;
+			if (managers.group.collapsed.has(item)) {
+				offset += 1;
+				continue;
+			}
 			count += 1;
 			renderRow(state, row);
-			visible.set(index, key);
+			visible.set(index, item);
 			if (row.element != null) {
-				row.element.style.transform = `translateY(${index * options.rowHeight}px)`;
+				row.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
 				fragment.append(row.element);
 			}
 		}
 		if (count > 0) components.body.elements.group[down ? "append" : "prepend"](fragment);
 	}
 };
+//#endregion
+//#region src/managers/row.manager.ts
 var RowManager = class {
 	components = /* @__PURE__ */ new Map();
 	constructor(state) {
 		this.state = state;
 	}
+	clear() {
+		const { components } = this;
+		const rows = [...components.values()];
+		const { length } = rows;
+		for (let index = 0; index < length; index += 1) this.removeRow(rows[index]);
+		components.clear();
+	}
 	destroy() {
-		const components = [...this.components.values()];
-		const { length } = components;
-		for (let index = 0; index < length; index += 1) removeRow(this.state.managers.render.pool, components[index]);
-		this.components.clear();
+		this.clear();
 		this.components = void 0;
 		this.state = void 0;
 	}
-	get(key) {
+	get(key, create) {
 		let row = this.components.get(key);
-		if (row == null) {
+		if (row == null && create) {
 			row = new RowComponent(key);
 			this.components.set(key, row);
 		}
@@ -2212,191 +2572,31 @@ var RowManager = class {
 	}
 	remove(key) {
 		const row = this.components.get(key);
-		if (row != null) {
-			removeRow(this.state.managers.render.pool, row);
-			this.components.delete(key);
-		}
+		if (row != null) this.removeRow(row);
+	}
+	removeRow(row) {
+		if (row.element != null) removeRow(this.state.managers.render.pool, row);
+		this.components.delete(row.key);
 	}
 	update(key) {
 		const row = this.components.get(key);
 		if (row != null) renderRow(this.state, row);
 	}
 };
-function isInert(item) {
-	return (item.element.inert ?? false) || EXPRESSION_TRUEISH.test(item.element.getAttribute(ATTRIBUTE_INERT)) || item.element.parentElement != null && isInert({
-		element: item.element.parentElement,
-		tabIndex: TABINDEX_DEFAULT
-	});
-}
-var ATTRIBUTE_INERT = "inert";
-var EXPRESSION_TRUEISH = /^(|true)$/i;
-[
-	"[contenteditable]:not([contenteditable=\"false\"])",
-	"[tabindex]:not(slot)",
-	"a[href]",
-	"audio[controls]",
-	"button",
-	"details",
-	"details > summary:first-of-type",
-	"input",
-	"select",
-	"textarea",
-	"video[controls]"
-].map((selector) => `${selector}:not([inert])`).join(",");
-var TABINDEX_DEFAULT = -1;
-function handleElement(element, depth) {
-	if (depth === 0) {
-		const removable = element.querySelectorAll(REMOVE_SELECTOR);
-		for (const item of removable) item.remove();
-	}
-	sanitizeAttributes(element, [...element.attributes]);
-}
-/**
-* Is the element clobbered?
-*
-* Thanks, DOMPurify _(https://github.com/cure53/DOMPurify)_
-*/
-function isClobbered(value) {
-	return value instanceof HTMLFormElement && (typeof value.nodeName !== "string" || typeof value.textContent !== "string" || typeof value.removeChild !== "function" || !(value.attributes instanceof NamedNodeMap) || typeof value.removeAttribute !== "function" || typeof value.setAttribute !== "function" || typeof value.namespaceURI !== "string" || typeof value.insertBefore !== "function" || typeof value.hasChildNodes !== "function");
-}
-function removeNode(node) {
-	if (typeof node.remove === "function") node.remove();
-}
-function sanitizeAttributes(element, attributes) {
-	const { length } = attributes;
-	for (let index = 0; index < length; index += 1) {
-		const { name, value } = attributes[index];
-		if (_isBadAttribute(name, value, false) || _isEmptyNonBooleanAttribute(name, value, false)) element.removeAttribute(name);
-		else if (_isInvalidBooleanAttribute(name, value, false)) setAttribute(element, name, true);
-	}
-}
-function sanitizeNodes(nodes, depth) {
-	const actual = nodes.filter((node) => node instanceof Node);
-	let { length } = nodes;
-	for (let index = 0; index < length; index += 1) {
-		const node = actual[index];
-		let remove = isClobbered(node);
-		if (!remove) switch (node.nodeType) {
-			case Node.ELEMENT_NODE:
-				handleElement(node, depth);
-				break;
-			case Node.COMMENT_NODE:
-				remove = COMMENT_HARMFUL.test(node.data);
-				break;
-			case Node.DOCUMENT_TYPE_NODE:
-			case Node.PROCESSING_INSTRUCTION_NODE:
-				remove = true;
-				break;
-		}
-		if (remove) {
-			removeNode(node);
-			actual.splice(index, 1);
-			index -= 1;
-			length -= 1;
-			continue;
-		}
-		if (node.hasChildNodes()) sanitizeNodes([...node.childNodes], depth + 1);
-	}
-	return nodes;
-}
-var COMMENT_HARMFUL = /<[/\w]/g;
-var REMOVE_SELECTOR = "script, toretto-temporary";
-function createHtml(value) {
-	const parsed = getParser().parseFromString(getHtml(value), PARSE_TYPE_HTML);
-	parsed.body.normalize();
-	sanitizeNodes([parsed.body], 0);
-	return parsed.body.innerHTML;
-}
-function createTemplate(value, options) {
-	const template = document.createElement(TEMPLATE_TAG);
-	template.innerHTML = createHtml(value);
-	if (typeof value === "string" && options.cache) templates[value] = template;
-	return template;
-}
-function getHtml(value) {
-	return `${TEMPORARY_ELEMENT}${typeof value === "string" ? value : value.innerHTML}${TEMPORARY_ELEMENT}`;
-}
-function getNodes(value, options) {
-	if (typeof value !== "string" && !(value instanceof HTMLTemplateElement)) return [];
-	const template = getTemplate(value, options);
-	return template == null ? [] : [...template.content.cloneNode(true).childNodes];
-}
-function getOptions(input) {
-	const options = isPlainObject$1(input) ? input : {};
-	options.cache = typeof options.cache === "boolean" ? options.cache : true;
-	return options;
-}
-function getParser() {
-	parser ??= new DOMParser();
-	return parser;
-}
-function getTemplate(value, options) {
-	if (value instanceof HTMLTemplateElement) return createTemplate(value, options);
-	if (value.trim().length === 0) return;
-	let template = templates[value];
-	if (template != null) return template;
-	const element = EXPRESSION_ID.test(value) ? document.querySelector(`#${value}`) : null;
-	return createTemplate(element instanceof HTMLTemplateElement ? element : value, options);
-}
-var html = ((value, options) => {
-	return getNodes(value, getOptions(options));
-});
-html.clear = () => {
-	templates = {};
-};
-html.remove = (template) => {
-	if (typeof template !== "string" || templates[template] == null) return;
-	const keys = Object.keys(templates);
-	const { length } = keys;
-	const updated = {};
-	for (let index = 0; index < length; index += 1) {
-		const key = keys[index];
-		if (key !== template) updated[key] = templates[key];
-	}
-	templates = updated;
-};
-var EXPRESSION_ID = /^[a-z][\w-]*$/i;
-var PARSE_TYPE_HTML = "text/html";
-var TEMPLATE_TAG = "template";
-var TEMPORARY_ELEMENT = "<toretto-temporary></toretto-temporary>";
-var parser;
-var templates = {};
-function getSupport() {
-	if (window == null || navigator == null) return false;
-	if ("matchMedia" in window) {
-		const media = matchMedia?.("(pointer: coarse)");
-		if (typeof media?.matches === "boolean" && media.matches) return true;
-	}
-	if ("ontouchstart" in window) return true;
-	if (typeof navigator.maxTouchPoints === "number" && navigator.maxTouchPoints > 0) return true;
-	if (typeof navigator.msMaxTouchPoints === "number" && navigator.msMaxTouchPoints > 0) return true;
-	return false;
-}
-(() => {
-	let support = getSupport();
-	const instance = Object.create({
-		get() {
-			return support;
-		},
-		update() {
-			support = getSupport();
-			return support;
-		}
-	});
-	Object.defineProperty(instance, "value", { get() {
-		return support;
-	} });
-	return instance;
-})();
-const dragStyling = toggleStyles(document.body, {
+//#endregion
+//#region src/helpers/style.helper.ts
+const preventSelection = toggleStyles(document.body, {
 	userSelect: "none",
 	webkitUserSelect: "none"
 });
+//#endregion
+//#region src/managers/selection.manager.ts
 var SelectionManager = class {
 	handlers = Object.freeze({
+		add: (keys) => this.add(keys),
 		clear: () => this.clear(),
-		deselect: (keys) => this.deselect(keys),
-		select: (keys) => this.select(keys),
+		remove: (keys) => this.remove(keys),
+		set: (keys) => this.set(keys),
 		toggle: () => this.toggle()
 	});
 	items = /* @__PURE__ */ new Set();
@@ -2405,21 +2605,24 @@ var SelectionManager = class {
 		this.state = state;
 		mapped.set(state.element, this);
 	}
+	add(keys) {
+		const { length } = keys;
+		let update = false;
+		for (let index = 0; index < length; index += 1) {
+			const key = keys[index];
+			if (!this.items.has(key)) {
+				this.items.add(key);
+				update = true;
+			}
+		}
+		if (update) this.update([]);
+	}
 	clear() {
 		if (this.items.size === 0) return;
 		const removed = [...this.items];
 		this.items.clear();
 		this.update(removed);
 	}
-	deselect(keys) {
-		const { length } = keys;
-		const removed = [];
-		for (let index = 0; index < length; index += 1) {
-			const key = keys[index];
-			if (this.items.delete(key)) removed.push(key);
-		}
-		if (removed.length > 0) this.update(removed);
-	}
 	destroy() {
 		mapped.delete(this.state.element);
 		this.handlers = void 0;
@@ -2439,8 +2642,8 @@ var SelectionManager = class {
 		this.last = key;
 		this.state.managers.navigation.setActive(key, false);
 		if (event.ctrlKey || event.metaKey) {
-			if (items.has(key)) this.deselect([key]);
-			else this.select([key]);
+			if (items.has(key)) this.remove([key]);
+			else this.add([key]);
 			return;
 		}
 		this.set([key]);
@@ -2451,29 +2654,29 @@ var SelectionManager = class {
 		const fromKey = keyed ? from : getKey(from.getAttribute("data-key"));
 		const toKey = keyed ? to : getKey(to.getAttribute("data-key"));
 		if (fromKey === toKey) return;
-		const keys = state.managers.data.values.keys.active ?? state.managers.data.values.keys.original;
+		const { items } = state.managers.data;
 		const fromIndex = state.managers.data.getIndex(fromKey);
 		const toIndex = state.managers.data.getIndex(toKey);
 		if (fromIndex === -1 || toIndex === -1) return;
 		const [start, end] = fromIndex < toIndex ? [fromIndex, toIndex] : [toIndex, fromIndex];
 		const selected = [];
-		for (let index = start; index <= end; index += 1) selected.push(keys[index]);
-		if (keyed) this.select(selected);
+		for (let index = start; index <= end; index += 1) {
+			const item = items[index];
+			if (!(item instanceof GroupComponent)) selected.push(item);
+		}
+		if (keyed) this.add(selected);
 		else this.set(selected);
 		this.last = toKey;
 		this.state.managers.navigation.setActive(toKey, false);
 	}
-	select(keys) {
+	remove(keys) {
 		const { length } = keys;
-		let update = false;
+		const removed = [];
 		for (let index = 0; index < length; index += 1) {
 			const key = keys[index];
-			if (!this.items.has(key)) {
-				this.items.add(key);
-				update = true;
-			}
+			if (this.items.delete(key)) removed.push(key);
 		}
-		if (update) this.update([]);
+		if (removed.length > 0) this.update(removed);
 	}
 	set(keys) {
 		const { items } = this;
@@ -2485,11 +2688,12 @@ var SelectionManager = class {
 	}
 	toggle() {
 		const { items, state } = this;
-		const all = state.managers.data.values.keys.active ?? state.managers.data.values.keys.original;
-		if (items.size === all.length) this.clear();
-		else this.select(all);
+		const data = state.managers.data.items;
+		if (items.size === data.length - state.managers.group.items.length) this.clear();
+		else this.set(data.filter((key) => !(key instanceof GroupComponent)));
 	}
 	update(removed) {
+		const { state } = this;
 		const items = [...removed.map((key) => ({
 			key,
 			removed: true
@@ -2497,28 +2701,28 @@ var SelectionManager = class {
 			key,
 			removed: false
 		}))];
-		const { length } = items;
+		let { length } = items;
 		for (let index = 0; index < length; index += 1) {
 			const { key, removed } = items[index];
-			const row = this.state.managers.row.get(key);
-			if (row == null || row.element == null) continue;
-			setAttribute(row.element, "aria-selected", String(!removed));
-			if (removed) row.element.classList.remove("tabela__row--selected");
-			else row.element.classList.add("tabela__row--selected");
+			const element = state.managers.row.get(key, false)?.element;
+			if (element == null) continue;
+			setAttribute(element, "aria-selected", String(!removed));
+			if (removed) element.classList.remove(CSS_TABELA_ROW_SELECTED);
+			else element.classList.add(CSS_TABELA_ROW_SELECTED);
 		}
 	}
 };
 function getPlaceholder() {
-	placeholder ??= createElement("div", { className: "tabela__selection--placeholder" }, {}, {});
+	placeholder ??= createElement("div", { className: CSS_TABELA_SELECTION }, {}, {});
 	return placeholder;
 }
 function onMouseDown(event) {
 	if (shifted) {
-		const row = findAncestor(event.target, ".tabela__row--body");
+		const row = findAncestor(event.target, `.${CSS_TABELA_ROW_BODY}`);
 		if (!(row instanceof HTMLElement)) return;
 		startElement = row;
 		startPosition = getPosition(event);
-		dragStyling.set();
+		preventSelection.set();
 	}
 }
 function onMouseMove(event) {
@@ -2539,14 +2743,14 @@ function onMouseUp(event) {
 	if (startElement == null) return;
 	if (!event.shiftKey) {
 		shifted = false;
-		dragStyling.remove();
+		preventSelection.remove();
 	}
 	getPlaceholder().remove();
 	const row = findAncestor(event.target, ".tabela__row--body");
 	if (row instanceof HTMLElement) {
 		endElement = row;
-		const endTable = findAncestor(endElement, ".tabela");
-		const startTable = findAncestor(startElement, ".tabela");
+		const endTable = findAncestor(endElement, ".tabela__table");
+		const startTable = findAncestor(startElement, ".tabela__table");
 		if (startTable != null && startTable === endTable) mapped.get(startTable)?.range(startElement, endElement);
 	}
 	endElement = void 0;
@@ -2573,120 +2777,179 @@ on(document, "keyup", onShiftUp);
 on(document, "mousedown", onMouseDown);
 on(document, "mousemove", onMouseMove);
 on(document, "mouseup", onMouseUp);
-var SortManager = class {
-	handlers = Object.freeze({
-		add: (field, direction) => this.add(field, direction),
-		flip: (field) => this.flip(field),
-		clear: () => this.clear(),
-		remove: (field) => this.remove(field),
-		set: (items) => this.set(items)
-	});
-	items = [];
+//#endregion
+//#region src/managers/style.manager.ts
+var StyleManager = class {
 	constructor(state) {
 		this.state = state;
-	}
-	add(field, direction) {
-		if (this.items.findIndex((item) => item.key === field) > -1) return;
-		this.items.push({
-			key: field,
-			direction: direction ?? "ascending"
-		});
-		this.sort();
-	}
-	addOrSet(event, field) {
-		if (event.ctrlKey || event.metaKey) this.add(field);
-		else this.set([{
-			field,
-			direction: "ascending"
-		}]);
-	}
-	clear() {
-		if (this.items.length > 0) {
-			this.items.length = 0;
-			this.sort();
-		}
-	}
-	destroy() {
-		this.handlers = void 0;
-		this.items = void 0;
-		this.state = void 0;
-	}
-	flip(field) {
-		const item = this.items.find((item) => item.key === field);
-		if (item == null) return;
-		item.direction = item.direction === "ascending" ? "descending" : "ascending";
-		this.sort();
-	}
-	remove(field) {
-		const index = this.items.findIndex((item) => item.key === field);
-		if (index > -1) {
-			this.items.splice(index, 1);
-			this.sort();
-		}
-	}
-	removeOrClear(event, field) {
-		if (event.ctrlKey || event.metaKey) this.remove(field);
-		else this.clear();
-	}
-	set(items) {
-		this.items.splice(0, this.items.length, ...items.map((item) => ({
-			key: item.field,
-			direction: item.direction
-		})));
-		this.sort();
-	}
-	sort() {
-		const { items, state } = this;
-		const { length } = state.managers.column.items;
-		for (let index = 0; index < length; index += 1) {
-			const column = state.managers.column.items[index];
-			const sorterIndex = items.findIndex((item) => item.key === column.options.field);
-			const sorterItem = items[sorterIndex];
-			setAttributes(column.elements.wrapper, {
-				"aria-sort": sorterItem == null ? "none" : items.length > 1 ? "other" : sorterItem.direction,
-				"data-sort-direction": sorterItem == null ? void 0 : sorterItem.direction
-			});
-			setAttribute(column.elements.sorter, "data-sort-position", sorterIndex > -1 && items.length > 1 ? sorterIndex + 1 : void 0);
-		}
-		state.managers.data.values.keys.active = items.length === 0 ? void 0 : sort(state.managers.data.values.keys.active?.map((key) => state.managers.data.values.objects.mapped.get(key)) ?? state.managers.data.values.objects.array, items).map((row) => row[state.key]);
-		state.managers.render.update(true, true);
-	}
-	toggle(event, field, direction) {
-		switch (direction) {
-			case "ascending":
-				this.flip(field);
-				return;
-			case "descending":
-				this.removeOrClear(event, field);
-				return;
-			default:
-				this.addOrSet(event, field);
-				return;
-		}
+		if (appended) return;
+		appended = true;
+		const style = document.createElement("style");
+		style.textContent = styling;
+		document.head.appendChild(style);
 	}
 };
+const styling = `/** Table */
+
+:where(.tabela) {
+	flex: 1;
+	position: relative;
+	background-color: var(--oui-absolute);
+	border: 1px solid grey;
+}
+
+:where(.tabela__table) {
+	min-height: 24em;
+	display: flex;
+	flex-flow: column nowrap;
+	flex: 1;
+	overflow: auto;
+	position: absolute;
+	inset: 0;
+}
+
+/** Row group */
+
+:where(.tabela__rowgroup--header),
+:where(.tabela__rowgroup--footer) {
+	background-color: white;
+	position: sticky;
+	left: 0;
+	z-index: 10;
+}
+
+:where(.tabela__rowgroup--header) {
+	top: 0;
+}
+
+:where(.tabela__rowgroup--footer) {
+	bottom: 0;
+}
+
+:where(.tabela__rowgroup--body) {
+	display: flex;
+	flex-flow: column nowrap;
+	flex: 1;
+}
+
+:where(.tabela__rowgroup--body:focus) {
+	outline: none;
+}
+
+:where(.tabela:has(.tabela__rowgroup--body:focus-visible)) {
+	outline: 2px solid var(--oui-blue-6);
+	outline-offset: 2px;
+}
+
+/** Row */
+
+:where(.tabela__row) {
+	width: 100%;
+	display: flex;
+	flex-flow: row nowrap;
+}
+
+:where(.tabela__row:last-child .tabela__cell) {
+	border-bottom-width: 0;
+}
+
+:where(.tabela__row--body),
+:where(.tabela__row--group) {
+	flex: 1;
+	position: absolute;
+}
+
+:where(.tabela__row--selected) {
+	background-color: var(--oui-blue-1);
+	color: var(--oui-blue-9);
+}
+
+:where(.tabela:has(.tabela__rowgroup--body:focus-visible) .tabela__row[data-active="true"]) {
+	outline: 2px solid var(--oui-blue-6);
+	outline-offset: 2px;
+}
+
+/** Cells */
+
+:where(.tabela__cell),
+:where(.tabela__heading) {
+	padding: 0.5em;
+	border-color: gray;
+	border-style: solid;
+	border-width: 0 1px 1px 0;
+	line-height: 1;
+}
+
+:where(.tabela__row .tabela__cell:last-child),
+:where(.tabela__row .tabela__heading:last-child) {
+	flex: 1;
+	border-right-width: 0;
+}
+
+:where(.tabela__cell) {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+:where(.tabela__cell--footer) {
+	border-top-width: 1px;
+	border-bottom-width: 0;
+}
+
+:where(.tabela__cell--group) {
+	padding: 0;
+	display: flex;
+	flex-flow: row nowrap;
+	align-items: center;
+	gap: 0.5em;
+}
+
+:where(.tabela__cell--group .tabela__button) {
+	margin: 0 0 0 .25rem;
+}
+
+/** Misc. */
+
+:where(.tabela__button) {
+	font-size: .75rem;
+	font-weight: bold;
+}
+
+:where(.tabela__selection) {
+	background-color: color-mix(in oklch, var(--oui-blue-6), transparent);
+	border: 1px solid var(--oui-blue-6);
+	border-radius: .25rem;
+	position: fixed;
+	z-index: 1000;
+}
+`.replace(/^\s+|\s+|\s+$/g, " ");
+let appended = false;
+//#endregion
+//#region src/tabela.ts
 var Tabela = class {
-	#components = {
-		header: void 0,
-		body: void 0,
-		footer: void 0
-	};
+	#components;
 	#element;
 	#id = getId();
+	#table;
 	#key;
 	#managers = {
 		column: void 0,
 		data: void 0,
 		event: void 0,
 		filter: void 0,
+		group: void 0,
 		navigation: void 0,
 		render: void 0,
 		row: void 0,
 		selection: void 0,
-		sort: void 0
+		sort: void 0,
+		style: void 0
 	};
+	#state;
 	data;
 	filter;
+	group;
 	selection;
 	sort;
 	get key() {
@@ -2695,34 +2958,42 @@ var Tabela = class {
 	constructor(element, options) {
 		this.#element = element;
 		element.innerHTML = "";
-		element.role = "table";
-		element.classList.add("tabela");
-		element.setAttribute("aria-label", options.label);
+		element.classList.add(CSS_TABELA);
+		this.#table = createElement("div", {
+			className: CSS_TABELA_TABLE,
+			role: "table"
+		}, { "aria-label": options.label });
 		this.#key = options.key;
-		this.#components.header = new HeaderComponent();
-		this.#components.body = new BodyComponent();
-		this.#components.footer = new FooterComponent();
-		const state = {
-			element,
+		this.#components = {
+			body: new BodyComponent(),
+			footer: new FooterComponent(),
+			header: new HeaderComponent()
+		};
+		this.#state = {
 			options,
 			components: this.#components,
+			element: this.#table,
 			id: this.#id,
 			key: this.#key,
 			managers: this.#managers
 		};
-		this.#managers.column = new ColumnManager(state);
-		this.#managers.data = new DataManager(state);
-		this.#managers.event = new EventManager(state);
-		this.#managers.filter = new FilterManager(state);
-		this.#managers.navigation = new NavigationManager(state);
-		this.#managers.render = new RenderManager(state);
-		this.#managers.row = new RowManager(state);
-		this.#managers.selection = new SelectionManager(state);
-		this.#managers.sort = new SortManager(state);
-		element.append(this.#components.header.elements.group, this.#components.body.elements.group, this.#components.footer.elements.group);
+		this.#managers.column = new ColumnManager(this.#state);
+		this.#managers.data = new DataManager(this.#state);
+		this.#managers.event = new EventManager(this.#state);
+		this.#managers.filter = new FilterManager(this.#state);
+		this.#managers.group = new GroupManager(this.#state);
+		this.#managers.navigation = new NavigationManager(this.#state);
+		this.#managers.render = new RenderManager(this.#state);
+		this.#managers.row = new RowManager(this.#state);
+		this.#managers.selection = new SelectionManager(this.#state);
+		this.#managers.sort = new SortManager(this.#state);
+		this.#managers.style = new StyleManager(this.#state);
+		this.#table.append(this.#components.header.elements.group, this.#components.body.elements.group, this.#components.footer.elements.group);
+		element.append(this.#table);
 		this.#managers.data.set(options.data);
 		this.data = this.#managers.data.handlers;
 		this.filter = this.#managers.filter.handlers;
+		this.group = this.#managers.group.handlers;
 		this.selection = this.#managers.selection.handlers;
 		this.sort = this.#managers.sort.handlers;
 	}
@@ -2730,6 +3001,7 @@ var Tabela = class {
 		const components = this.#components;
 		const managers = this.#managers;
 		const element = this.#element;
+		const table = this.#table;
 		components.body.destroy();
 		components.footer.destroy();
 		components.header.destroy();
@@ -2737,16 +3009,24 @@ var Tabela = class {
 		managers.data.destroy();
 		managers.event.destroy();
 		managers.filter.destroy();
+		managers.group.destroy();
+		managers.navigation.destroy();
 		managers.render.destroy();
 		managers.row.destroy();
 		managers.selection.destroy();
 		managers.sort.destroy();
 		element.innerHTML = "";
-		element.role = "";
-		element.classList.remove("tabela");
-		element.removeAttribute("aria-label");
-		element.removeAttribute("role");
+		table.innerHTML = "";
+		table.role = "";
+		element.classList.remove(CSS_TABELA);
+		table.removeAttribute("aria-label");
+		table.removeAttribute("role");
+		this.#state.components = void 0;
+		this.#state.managers = void 0;
+		this.#state.element = void 0;
+		this.#state.options = void 0;
 		this.#element = void 0;
+		this.#table = void 0;
 	}
 };
 function getId() {
@@ -2754,7 +3034,10 @@ function getId() {
 	return id;
 }
 let id = 0;
+//#endregion
+//#region src/index.ts
 function tabela(element, options) {
 	return new Tabela(element, options);
 }
+//#endregion
 export { tabela };