@public-ui/hydrate 2.0.0-rc.10 → 2.0.0-rc.11

package/dist/index.js

@@ -7082,7 +7082,7 @@ function transformOptions(options) {
   return options;
 }
 
-function noop$1() {}
+function noop() {}
 function bindMemberFunctions(inst) {
   const mems = Object.getOwnPropertyNames(Object.getPrototypeOf(inst));
   mems.forEach(mem => {
@@ -7210,7 +7210,7 @@ class I18n extends EventEmitter {
       });
     }
     this.format = this.options.interpolation.format;
-    if (!callback) callback = noop$1;
+    if (!callback) callback = noop;
     if (this.options.fallbackLng && !this.services.languageDetector && !this.options.lng) {
       const codes = this.services.languageUtils.getFallbackCodes(this.options.fallbackLng);
       if (codes.length > 0 && codes[0] !== 'dev') this.options.lng = codes[0];
@@ -7252,7 +7252,7 @@ class I18n extends EventEmitter {
     return deferred;
   }
   loadResources(language) {
-    let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop$1;
+    let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
     let usedCallback = callback;
     const usedLng = typeof language === 'string' ? language : this.language;
     if (typeof language === 'function') usedCallback = language;
@@ -7289,7 +7289,7 @@ class I18n extends EventEmitter {
     const deferred = defer();
     if (!lngs) lngs = this.languages;
     if (!ns) ns = this.options.ns;
-    if (!callback) callback = noop$1;
+    if (!callback) callback = noop;
     this.services.backendConnector.reload(lngs, ns, err => {
       deferred.resolve();
       callback(err);
@@ -7507,7 +7507,7 @@ class I18n extends EventEmitter {
   }
   cloneInstance() {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop$1;
+    let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
     const forkResourceStore = options.forkResourceStore;
     if (forkResourceStore) delete options.forkResourceStore;
     const mergedOptions = {
@@ -7564,7 +7564,7 @@ instance.createInstance = I18n.createInstance;
 
 class I18nextService {
   constructor() { }
-  static async getInstance(lng, translations) {
+  static async createInstance(lng, translations) {
     if (Array.isArray(translations)) {
       translations = new Set(translations);
     }
@@ -7572,9 +7572,15 @@ class I18nextService {
       translations = new Set([translations]);
     }
     I18nextService.instance = new I18nextService();
-    await instance.init({
-      lng,
-    });
+    if (!instance.isInitialized) {
+      await instance.init({
+        ns: [I18nextService.namespace],
+        lng,
+      });
+    }
+    else {
+      await instance.loadNamespaces(I18nextService.namespace);
+    }
     if (translations !== undefined) {
       translations.forEach((t) => t((l, t) => {
         I18nextService.instance.addResourceBundle(l, t);
@@ -7584,20 +7590,21 @@ class I18nextService {
     return this.instance;
   }
   static addResourceBundle(lng, translationMap) {
-    instance.addResourceBundle(lng, 'translation', translationMap, true);
+    instance.addResourceBundle(lng, I18nextService.namespace, translationMap, true);
   }
   addResourceBundle(lng, translationMap) {
     I18nextService.addResourceBundle(lng, translationMap);
   }
   translate(key, options) {
-    return instance.t(key, Object.assign({ count: options === null || options === void 0 ? void 0 : options.count }, options === null || options === void 0 ? void 0 : options.placeholders));
+    return instance.t(key, Object.assign({ ns: I18nextService.namespace, count: options === null || options === void 0 ? void 0 : options.count }, options === null || options === void 0 ? void 0 : options.placeholders));
   }
 }
+I18nextService.namespace = 'KoliBri';
 
 const register = async (themes, loaders, options) => {
   var _a, _b;
   if (STORE.I18n === undefined) {
-    const i18n = await I18nextService.getInstance((_b = (_a = options === null || options === void 0 ? void 0 : options.translation) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'de', options === null || options === void 0 ? void 0 : options.translations);
+    const i18n = await I18nextService.createInstance((_b = (_a = options === null || options === void 0 ? void 0 : options.translation) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'de', options === null || options === void 0 ? void 0 : options.translations);
     Object.defineProperty(STORE, 'I18n', {
       value: i18n,
       writable: false,
@@ -7850,7 +7857,7 @@ const initKoliBri = () => {
 	|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
 	|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
 	\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
-	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.0-rc.10
+	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.0-rc.11
 		`, {
       forceLog: true,
     });
@@ -9108,614 +9115,6 @@ rgbaConvert.css = css_1;
 rgbaConvert.hex = hex_1;
 rgbaConvert.num = num_1;
 
-function isFunction$1(value) {
-    return typeof value === 'function';
-}
-
-function createErrorClass(createImpl) {
-    const _super = (instance) => {
-        Error.call(instance);
-        instance.stack = new Error().stack;
-    };
-    const ctorFunc = createImpl(_super);
-    ctorFunc.prototype = Object.create(Error.prototype);
-    ctorFunc.prototype.constructor = ctorFunc;
-    return ctorFunc;
-}
-
-const UnsubscriptionError = createErrorClass((_super) => function UnsubscriptionErrorImpl(errors) {
-    _super(this);
-    this.message = errors
-        ? `${errors.length} errors occurred during unsubscription:
-${errors.map((err, i) => `${i + 1}) ${err.toString()}`).join('\n  ')}`
-        : '';
-    this.name = 'UnsubscriptionError';
-    this.errors = errors;
-});
-
-function arrRemove(arr, item) {
-    if (arr) {
-        const index = arr.indexOf(item);
-        0 <= index && arr.splice(index, 1);
-    }
-}
-
-class Subscription {
-    constructor(initialTeardown) {
-        this.initialTeardown = initialTeardown;
-        this.closed = false;
-        this._parentage = null;
-        this._finalizers = null;
-    }
-    unsubscribe() {
-        let errors;
-        if (!this.closed) {
-            this.closed = true;
-            const { _parentage } = this;
-            if (_parentage) {
-                this._parentage = null;
-                if (Array.isArray(_parentage)) {
-                    for (const parent of _parentage) {
-                        parent.remove(this);
-                    }
-                }
-                else {
-                    _parentage.remove(this);
-                }
-            }
-            const { initialTeardown: initialFinalizer } = this;
-            if (isFunction$1(initialFinalizer)) {
-                try {
-                    initialFinalizer();
-                }
-                catch (e) {
-                    errors = e instanceof UnsubscriptionError ? e.errors : [e];
-                }
-            }
-            const { _finalizers } = this;
-            if (_finalizers) {
-                this._finalizers = null;
-                for (const finalizer of _finalizers) {
-                    try {
-                        execFinalizer(finalizer);
-                    }
-                    catch (err) {
-                        errors = errors !== null && errors !== void 0 ? errors : [];
-                        if (err instanceof UnsubscriptionError) {
-                            errors = [...errors, ...err.errors];
-                        }
-                        else {
-                            errors.push(err);
-                        }
-                    }
-                }
-            }
-            if (errors) {
-                throw new UnsubscriptionError(errors);
-            }
-        }
-    }
-    add(teardown) {
-        var _a;
-        if (teardown && teardown !== this) {
-            if (this.closed) {
-                execFinalizer(teardown);
-            }
-            else {
-                if (teardown instanceof Subscription) {
-                    if (teardown.closed || teardown._hasParent(this)) {
-                        return;
-                    }
-                    teardown._addParent(this);
-                }
-                (this._finalizers = (_a = this._finalizers) !== null && _a !== void 0 ? _a : []).push(teardown);
-            }
-        }
-    }
-    _hasParent(parent) {
-        const { _parentage } = this;
-        return _parentage === parent || (Array.isArray(_parentage) && _parentage.includes(parent));
-    }
-    _addParent(parent) {
-        const { _parentage } = this;
-        this._parentage = Array.isArray(_parentage) ? (_parentage.push(parent), _parentage) : _parentage ? [_parentage, parent] : parent;
-    }
-    _removeParent(parent) {
-        const { _parentage } = this;
-        if (_parentage === parent) {
-            this._parentage = null;
-        }
-        else if (Array.isArray(_parentage)) {
-            arrRemove(_parentage, parent);
-        }
-    }
-    remove(teardown) {
-        const { _finalizers } = this;
-        _finalizers && arrRemove(_finalizers, teardown);
-        if (teardown instanceof Subscription) {
-            teardown._removeParent(this);
-        }
-    }
-}
-Subscription.EMPTY = (() => {
-    const empty = new Subscription();
-    empty.closed = true;
-    return empty;
-})();
-const EMPTY_SUBSCRIPTION = Subscription.EMPTY;
-function isSubscription(value) {
-    return (value instanceof Subscription ||
-        (value && 'closed' in value && isFunction$1(value.remove) && isFunction$1(value.add) && isFunction$1(value.unsubscribe)));
-}
-function execFinalizer(finalizer) {
-    if (isFunction$1(finalizer)) {
-        finalizer();
-    }
-    else {
-        finalizer.unsubscribe();
-    }
-}
-
-const config$1 = {
-    onUnhandledError: null,
-    onStoppedNotification: null,
-    Promise: undefined,
-    useDeprecatedSynchronousErrorHandling: false,
-    useDeprecatedNextContext: false,
-};
-
-const timeoutProvider = {
-    setTimeout(handler, timeout, ...args) {
-        const { delegate } = timeoutProvider;
-        if (delegate === null || delegate === void 0 ? void 0 : delegate.setTimeout) {
-            return delegate.setTimeout(handler, timeout, ...args);
-        }
-        return setTimeout(handler, timeout, ...args);
-    },
-    clearTimeout(handle) {
-        const { delegate } = timeoutProvider;
-        return ((delegate === null || delegate === void 0 ? void 0 : delegate.clearTimeout) || clearTimeout)(handle);
-    },
-    delegate: undefined,
-};
-
-function reportUnhandledError(err) {
-    timeoutProvider.setTimeout(() => {
-        const { onUnhandledError } = config$1;
-        if (onUnhandledError) {
-            onUnhandledError(err);
-        }
-        else {
-            throw err;
-        }
-    });
-}
-
-function noop() { }
-
-const COMPLETE_NOTIFICATION = (() => createNotification('C', undefined, undefined))();
-function errorNotification(error) {
-    return createNotification('E', undefined, error);
-}
-function nextNotification(value) {
-    return createNotification('N', value, undefined);
-}
-function createNotification(kind, value, error) {
-    return {
-        kind,
-        value,
-        error,
-    };
-}
-
-function errorContext(cb) {
-    {
-        cb();
-    }
-}
-
-class Subscriber extends Subscription {
-    constructor(destination) {
-        super();
-        this.isStopped = false;
-        if (destination) {
-            this.destination = destination;
-            if (isSubscription(destination)) {
-                destination.add(this);
-            }
-        }
-        else {
-            this.destination = EMPTY_OBSERVER;
-        }
-    }
-    static create(next, error, complete) {
-        return new SafeSubscriber(next, error, complete);
-    }
-    next(value) {
-        if (this.isStopped) {
-            handleStoppedNotification(nextNotification(value), this);
-        }
-        else {
-            this._next(value);
-        }
-    }
-    error(err) {
-        if (this.isStopped) {
-            handleStoppedNotification(errorNotification(err), this);
-        }
-        else {
-            this.isStopped = true;
-            this._error(err);
-        }
-    }
-    complete() {
-        if (this.isStopped) {
-            handleStoppedNotification(COMPLETE_NOTIFICATION, this);
-        }
-        else {
-            this.isStopped = true;
-            this._complete();
-        }
-    }
-    unsubscribe() {
-        if (!this.closed) {
-            this.isStopped = true;
-            super.unsubscribe();
-            this.destination = null;
-        }
-    }
-    _next(value) {
-        this.destination.next(value);
-    }
-    _error(err) {
-        try {
-            this.destination.error(err);
-        }
-        finally {
-            this.unsubscribe();
-        }
-    }
-    _complete() {
-        try {
-            this.destination.complete();
-        }
-        finally {
-            this.unsubscribe();
-        }
-    }
-}
-const _bind = Function.prototype.bind;
-function bind(fn, thisArg) {
-    return _bind.call(fn, thisArg);
-}
-class ConsumerObserver {
-    constructor(partialObserver) {
-        this.partialObserver = partialObserver;
-    }
-    next(value) {
-        const { partialObserver } = this;
-        if (partialObserver.next) {
-            try {
-                partialObserver.next(value);
-            }
-            catch (error) {
-                handleUnhandledError(error);
-            }
-        }
-    }
-    error(err) {
-        const { partialObserver } = this;
-        if (partialObserver.error) {
-            try {
-                partialObserver.error(err);
-            }
-            catch (error) {
-                handleUnhandledError(error);
-            }
-        }
-        else {
-            handleUnhandledError(err);
-        }
-    }
-    complete() {
-        const { partialObserver } = this;
-        if (partialObserver.complete) {
-            try {
-                partialObserver.complete();
-            }
-            catch (error) {
-                handleUnhandledError(error);
-            }
-        }
-    }
-}
-class SafeSubscriber extends Subscriber {
-    constructor(observerOrNext, error, complete) {
-        super();
-        let partialObserver;
-        if (isFunction$1(observerOrNext) || !observerOrNext) {
-            partialObserver = {
-                next: (observerOrNext !== null && observerOrNext !== void 0 ? observerOrNext : undefined),
-                error: error !== null && error !== void 0 ? error : undefined,
-                complete: complete !== null && complete !== void 0 ? complete : undefined,
-            };
-        }
-        else {
-            let context;
-            if (this && config$1.useDeprecatedNextContext) {
-                context = Object.create(observerOrNext);
-                context.unsubscribe = () => this.unsubscribe();
-                partialObserver = {
-                    next: observerOrNext.next && bind(observerOrNext.next, context),
-                    error: observerOrNext.error && bind(observerOrNext.error, context),
-                    complete: observerOrNext.complete && bind(observerOrNext.complete, context),
-                };
-            }
-            else {
-                partialObserver = observerOrNext;
-            }
-        }
-        this.destination = new ConsumerObserver(partialObserver);
-    }
-}
-function handleUnhandledError(error) {
-    {
-        reportUnhandledError(error);
-    }
-}
-function defaultErrorHandler(err) {
-    throw err;
-}
-function handleStoppedNotification(notification, subscriber) {
-    const { onStoppedNotification } = config$1;
-    onStoppedNotification && timeoutProvider.setTimeout(() => onStoppedNotification(notification, subscriber));
-}
-const EMPTY_OBSERVER = {
-    closed: true,
-    next: noop,
-    error: defaultErrorHandler,
-    complete: noop,
-};
-
-const observable = (() => (typeof Symbol === 'function' && Symbol.observable) || '@@observable')();
-
-function identity(x) {
-    return x;
-}
-
-function pipeFromArray(fns) {
-    if (fns.length === 0) {
-        return identity;
-    }
-    if (fns.length === 1) {
-        return fns[0];
-    }
-    return function piped(input) {
-        return fns.reduce((prev, fn) => fn(prev), input);
-    };
-}
-
-class Observable {
-    constructor(subscribe) {
-        if (subscribe) {
-            this._subscribe = subscribe;
-        }
-    }
-    lift(operator) {
-        const observable = new Observable();
-        observable.source = this;
-        observable.operator = operator;
-        return observable;
-    }
-    subscribe(observerOrNext, error, complete) {
-        const subscriber = isSubscriber(observerOrNext) ? observerOrNext : new SafeSubscriber(observerOrNext, error, complete);
-        errorContext(() => {
-            const { operator, source } = this;
-            subscriber.add(operator
-                ?
-                    operator.call(subscriber, source)
-                : source
-                    ?
-                        this._subscribe(subscriber)
-                    :
-                        this._trySubscribe(subscriber));
-        });
-        return subscriber;
-    }
-    _trySubscribe(sink) {
-        try {
-            return this._subscribe(sink);
-        }
-        catch (err) {
-            sink.error(err);
-        }
-    }
-    forEach(next, promiseCtor) {
-        promiseCtor = getPromiseCtor(promiseCtor);
-        return new promiseCtor((resolve, reject) => {
-            const subscriber = new SafeSubscriber({
-                next: (value) => {
-                    try {
-                        next(value);
-                    }
-                    catch (err) {
-                        reject(err);
-                        subscriber.unsubscribe();
-                    }
-                },
-                error: reject,
-                complete: resolve,
-            });
-            this.subscribe(subscriber);
-        });
-    }
-    _subscribe(subscriber) {
-        var _a;
-        return (_a = this.source) === null || _a === void 0 ? void 0 : _a.subscribe(subscriber);
-    }
-    [observable]() {
-        return this;
-    }
-    pipe(...operations) {
-        return pipeFromArray(operations)(this);
-    }
-    toPromise(promiseCtor) {
-        promiseCtor = getPromiseCtor(promiseCtor);
-        return new promiseCtor((resolve, reject) => {
-            let value;
-            this.subscribe((x) => (value = x), (err) => reject(err), () => resolve(value));
-        });
-    }
-}
-Observable.create = (subscribe) => {
-    return new Observable(subscribe);
-};
-function getPromiseCtor(promiseCtor) {
-    var _a;
-    return (_a = promiseCtor !== null && promiseCtor !== void 0 ? promiseCtor : config$1.Promise) !== null && _a !== void 0 ? _a : Promise;
-}
-function isObserver(value) {
-    return value && isFunction$1(value.next) && isFunction$1(value.error) && isFunction$1(value.complete);
-}
-function isSubscriber(value) {
-    return (value && value instanceof Subscriber) || (isObserver(value) && isSubscription(value));
-}
-
-const ObjectUnsubscribedError = createErrorClass((_super) => function ObjectUnsubscribedErrorImpl() {
-    _super(this);
-    this.name = 'ObjectUnsubscribedError';
-    this.message = 'object unsubscribed';
-});
-
-class Subject extends Observable {
-    constructor() {
-        super();
-        this.closed = false;
-        this.currentObservers = null;
-        this.observers = [];
-        this.isStopped = false;
-        this.hasError = false;
-        this.thrownError = null;
-    }
-    lift(operator) {
-        const subject = new AnonymousSubject(this, this);
-        subject.operator = operator;
-        return subject;
-    }
-    _throwIfClosed() {
-        if (this.closed) {
-            throw new ObjectUnsubscribedError();
-        }
-    }
-    next(value) {
-        errorContext(() => {
-            this._throwIfClosed();
-            if (!this.isStopped) {
-                if (!this.currentObservers) {
-                    this.currentObservers = Array.from(this.observers);
-                }
-                for (const observer of this.currentObservers) {
-                    observer.next(value);
-                }
-            }
-        });
-    }
-    error(err) {
-        errorContext(() => {
-            this._throwIfClosed();
-            if (!this.isStopped) {
-                this.hasError = this.isStopped = true;
-                this.thrownError = err;
-                const { observers } = this;
-                while (observers.length) {
-                    observers.shift().error(err);
-                }
-            }
-        });
-    }
-    complete() {
-        errorContext(() => {
-            this._throwIfClosed();
-            if (!this.isStopped) {
-                this.isStopped = true;
-                const { observers } = this;
-                while (observers.length) {
-                    observers.shift().complete();
-                }
-            }
-        });
-    }
-    unsubscribe() {
-        this.isStopped = this.closed = true;
-        this.observers = this.currentObservers = null;
-    }
-    get observed() {
-        var _a;
-        return ((_a = this.observers) === null || _a === void 0 ? void 0 : _a.length) > 0;
-    }
-    _trySubscribe(subscriber) {
-        this._throwIfClosed();
-        return super._trySubscribe(subscriber);
-    }
-    _subscribe(subscriber) {
-        this._throwIfClosed();
-        this._checkFinalizedStatuses(subscriber);
-        return this._innerSubscribe(subscriber);
-    }
-    _innerSubscribe(subscriber) {
-        const { hasError, isStopped, observers } = this;
-        if (hasError || isStopped) {
-            return EMPTY_SUBSCRIPTION;
-        }
-        this.currentObservers = null;
-        observers.push(subscriber);
-        return new Subscription(() => {
-            this.currentObservers = null;
-            arrRemove(observers, subscriber);
-        });
-    }
-    _checkFinalizedStatuses(subscriber) {
-        const { hasError, thrownError, isStopped } = this;
-        if (hasError) {
-            subscriber.error(thrownError);
-        }
-        else if (isStopped) {
-            subscriber.complete();
-        }
-    }
-    asObservable() {
-        const observable = new Observable();
-        observable.source = this;
-        return observable;
-    }
-}
-Subject.create = (destination, source) => {
-    return new AnonymousSubject(destination, source);
-};
-class AnonymousSubject extends Subject {
-    constructor(destination, source) {
-        super();
-        this.destination = destination;
-        this.source = source;
-    }
-    next(value) {
-        var _a, _b;
-        (_b = (_a = this.destination) === null || _a === void 0 ? void 0 : _a.next) === null || _b === void 0 ? void 0 : _b.call(_a, value);
-    }
-    error(err) {
-        var _a, _b;
-        (_b = (_a = this.destination) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.call(_a, err);
-    }
-    complete() {
-        var _a, _b;
-        (_b = (_a = this.destination) === null || _a === void 0 ? void 0 : _a.complete) === null || _b === void 0 ? void 0 : _b.call(_a);
-    }
-    _subscribe(subscriber) {
-        var _a, _b;
-        return (_b = (_a = this.source) === null || _a === void 0 ? void 0 : _a.subscribe(subscriber)) !== null && _b !== void 0 ? _b : EMPTY_SUBSCRIPTION;
-    }
-}
-
 var n=.2126,r=.7152,t=.0722,e=1/12.92;function u(n){return Math.pow((n+.055)/1.055,2.4)}function a(a){var i=a[0]/255,c=a[1]/255,o=a[2]/255,s=i<=.03928?i*e:u(i),f=c<=.03928?c*e:u(c),l=o<=.03928?o*e:u(o);return s*n+f*r+l*t}function i$1(n){var r=255;8===(n=n.replace(/^#/,"")).length&&(r=parseInt(n.slice(6,8),16),n=n.substring(0,6)),4===n.length&&(r=parseInt(n.slice(3,4).repeat(2),16),n=n.substring(0,3)),3===n.length&&(n=n[0]+n[0]+n[1]+n[1]+n[2]+n[2]);var t=parseInt(n,16);return [t>>16,t>>8&255,255&t,r]}function c(n,r){return (Math.max(n,r)+.05)/(Math.min(n,r)+.05)}function o(n,r){return c(a(n),a(r))}function s(n,r){return o(i$1(n),i$1(r))}function f(n){return n>=7?"AAA":n>=4.5?"AA":n>=3?"AA Large":"Fail"}
 
 const OBJECT_OBJECT = /\[object Object\]/;
@@ -10042,7 +9441,6 @@ class KoliBriUtils {
 }
 KoliBriUtils.executionLock = false;
 KoliBriUtils.cache = new Map();
-const ariaCurrentSubject = new Subject();
 class KoliBriDevHelper {
 }
 KoliBriDevHelper.patchTheme = patchTheme;
@@ -10323,9 +9721,14 @@ var locale_de = {
   'logo-description': 'Logo {{orgShort}}. Bundesadler mit Flaggenstab und Schriftzug {{orgLong}}',
   'open-link-in-tab': 'Der Link wird in einem neuen Tab geöffnet.',
   'kolibri-logo': 'Logo von KoliBri',
-  'sort-descending': 'Spalte {{column}} absteigend sortiert',
-  'sort-ascending': 'Spalte {{column}} aufsteigend sortiert',
+  'sort-ascending': 'Die Spalte {{column}} ist aufsteigend{{multi}} sortiert.',
+  'sort-descending': 'Die Spalte {{column}} ist absteigend{{multi}} sortiert.',
+  'sort-then-ascending': ', dann die Spalte {{column}} aufsteigend',
+  'sort-then-descending': ', dann die Spalte {{column}} absteigend',
+  'sort-then-last-ascending': ' und dann die Spalte {{column}} aufsteigend',
+  'sort-then-last-descending': ' und dann die Spalte {{column}} absteigend',
   'sort-none': 'Spalte {{column}} nicht sortiert',
+  'table-sort-none': 'Keine Spalte ist sortiert.',
   'table-pagination-label': 'Paginierung für die Tabelle {{label}}',
   'avatar-alt': 'Avatar von {{name}}',
   'toast-close-all': 'Alle schließen',
@@ -10360,9 +9763,14 @@ var locale_en = {
   'logo-description': 'Logo {{orgShort}}. Federal eagle with flag staff and lettering {{orgLong}}',
   'open-link-in-tab': 'The link will open in a new tab.',
   'kolibri-logo': 'KoliBri logo',
-  'sort-descending': 'sorted column {{column}} descending',
-  'sort-ascending': 'sorted column {{column}} ascending',
+  'sort-descending': 'Sorted column {{column}} descending{{multi}}',
+  'sort-ascending': 'Sorted column {{column}} ascending{{multi}}',
+  'sort-then-ascending': ', then column {{column}} acending',
+  'sort-then-descending': ', then column {{column}} descending',
+  'sort-then-last-ascending': ' and then column {{column}} acending',
+  'sort-then-last-descending': ' and then column {{column}} descending',
   'sort-none': 'column {{column}} not sorted',
+  'table-sort-none': 'No column is sorted.',
   'table-pagination-label': 'Pagination for table {{label}}',
   'avatar-alt': 'Avatar of {{name}}',
   'toast-close-all': 'Close all',
@@ -10582,7 +9990,7 @@ class KolAvatarWc {
     };
   }
   render() {
-    return (hAsync(Host, null, hAsync("div", { "aria-label": translate('kol-avatar-alt', { placeholders: { name: this.state._label } }), class: "container", role: "img" }, this.state._src ? (hAsync("img", { alt: "", "aria-hidden": "true", class: "image", src: this.state._src })) : (hAsync("span", { "aria-hidden": "true", class: "initials" }, formatLabelAsInitials(this.state._label))))));
+    return (hAsync(Host, null, hAsync("div", { "aria-label": translate('kol-avatar-alt', { placeholders: { name: this.state._label } }), class: "container", role: "img" }, this.state._src ? (hAsync("img", { alt: "", "aria-hidden": "true", class: "image", src: this.state._src })) : (hAsync("span", { "aria-hidden": "true", class: "initials" }, formatLabelAsInitials(this.state._label.trim()))))));
   }
   validateSrc(value) {
     validateImageSource(this, value);
@@ -11320,6 +10728,9 @@ class KolButton {
     this._value = undefined;
     this._variant = 'normal';
   }
+  async getValue() {
+    return this._value;
+  }
   render() {
     return (hAsync(Host, null, hAsync("kol-button-wc", { ref: this.catchRef, class: {
         button: true,
@@ -11353,7 +10764,8 @@ class KolButton {
       "_tooltipAlign": [1, "_tooltip-align"],
       "_type": [1],
       "_value": [8],
-      "_variant": [1]
+      "_variant": [1],
+      "getValue": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -11429,6 +10841,9 @@ class KolButtonLink {
     this._type = 'button';
     this._value = undefined;
   }
+  async getValue() {
+    return this._value;
+  }
   render() {
     return (hAsync(Host, null, hAsync("kol-button-wc", { ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: "link", _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value }, hAsync("slot", { name: "expert", slot: "expert" }))));
   }
@@ -11456,7 +10871,8 @@ class KolButtonLink {
       "_tabIndex": [2, "_tab-index"],
       "_tooltipAlign": [1, "_tooltip-align"],
       "_type": [1],
-      "_value": [8]
+      "_value": [8],
+      "getValue": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -12359,7 +11775,7 @@ class KolForm {
   }; }
 }
 
-const defaultStyleCss$x = "@layer kol-global {\n\t.sc-kol-heading-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-heading-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-heading-default-h > kol-heading-wc {\n\t\tdisplay: grid;\n\t}\n\n\t.sc-kol-heading-default-h > kol-heading-wc > .overline {\n\t\torder: 1;\n\t}\n\n\t.sc-kol-heading-default-h > kol-heading-wc > .headline {\n\t\torder: 2;\n\t}\n}";
+const defaultStyleCss$x = "@layer kol-global {\n\t.sc-kol-heading-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-heading-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}";
 
 class KolHeading {
   constructor(hostRef) {
@@ -12367,9 +11783,10 @@ class KolHeading {
     this._label = undefined;
     this._level = undefined;
     this._secondaryHeadline = undefined;
+    this._variant = undefined;
   }
   render() {
-    return (hAsync("kol-heading-wc", { _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline }, hAsync("slot", { name: "expert", slot: "expert" })));
+    return (hAsync("kol-heading-wc", { _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline, _variant: this._variant }, hAsync("slot", { name: "expert", slot: "expert" })));
   }
   static get style() { return {
     default: defaultStyleCss$x
@@ -12380,7 +11797,8 @@ class KolHeading {
     "$members$": {
       "_label": [1],
       "_level": [2],
-      "_secondaryHeadline": [1, "_secondary-headline"]
+      "_secondaryHeadline": [1, "_secondary-headline"],
+      "_variant": [1]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -12388,26 +11806,22 @@ class KolHeading {
   }; }
 }
 
+const headingVariantPropTypeOptions = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'strong'];
+const validateHeadingVariant = (component, value) => {
+  watchValidator(component, `_variant`, (value) => typeof value === 'string' && headingVariantPropTypeOptions.includes(value), new Set([`KoliBriHeadingVariant {${headingVariantPropTypeOptions.join(', ')}`]), value);
+};
+
 class KolHeadingWc {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.renderHeadline = (headline, level) => {
-      switch (level) {
-        case 1:
-          return (hAsync("h1", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
-        case 2:
-          return (hAsync("h2", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
-        case 3:
-          return (hAsync("h3", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
-        case 4:
-          return (hAsync("h4", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
-        case 5:
-          return (hAsync("h5", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
-        case 6:
-          return (hAsync("h6", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
-        default:
-          return (hAsync("strong", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
-      }
+      const validHeadline = typeof level === 'number' && level > 0 && level <= 6;
+      const HeadlineTag = validHeadline ? `h${level}` : 'strong';
+      const variant = this._variant || HeadlineTag;
+      return (hAsync(HeadlineTag, { class: {
+          headline: true,
+          [`headline-${variant}`]: true,
+        } }, headline, hAsync("slot", { name: "expert" })));
     };
     this.renderSecondaryHeadline = (headline, level) => {
       switch (level) {
@@ -12430,6 +11844,7 @@ class KolHeadingWc {
     this._label = undefined;
     this._level = 1;
     this._secondaryHeadline = undefined;
+    this._variant = undefined;
     this.state = {
       _label: '',
       _level: 1,
@@ -12444,10 +11859,14 @@ class KolHeadingWc {
   validateSecondaryHeadline(value) {
     watchString(this, '_secondaryHeadline', value);
   }
+  validateVariant(value) {
+    validateHeadingVariant(this, value);
+  }
   componentWillLoad() {
     this.validateLabel(this._label);
     this.validateLevel(this._level);
     this.validateSecondaryHeadline(this._secondaryHeadline);
+    this.validateVariant(this._variant);
   }
   render() {
     return (hAsync(Host, null, typeof this.state._secondaryHeadline === 'string' && this.state._secondaryHeadline.length > 0 ? (hAsync("hgroup", null, this.renderHeadline(this.state._label, this.state._level), this.state._secondaryHeadline && this.renderSecondaryHeadline(this.state._secondaryHeadline, this.state._level + 1))) : (this.renderHeadline(this.state._label, this.state._level))));
@@ -12455,7 +11874,8 @@ class KolHeadingWc {
   static get watchers() { return {
     "_label": ["validateLabel"],
     "_level": ["validateLevel"],
-    "_secondaryHeadline": ["validateSecondaryHeadline"]
+    "_secondaryHeadline": ["validateSecondaryHeadline"],
+    "_variant": ["validateVariant"]
   }; }
   static get cmpMeta() { return {
     "$flags$": 4,
@@ -12464,6 +11884,7 @@ class KolHeadingWc {
       "_label": [1],
       "_level": [2],
       "_secondaryHeadline": [1, "_secondary-headline"],
+      "_variant": [1],
       "state": [32]
     },
     "$listeners$": undefined,
@@ -13112,6 +12533,10 @@ const InternalUnderlinedAccessKey = ({ accessKey, label }) => {
 const defaultStyleCss$t = "@layer kol-global {\n\t.sc-kol-input-checkbox-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-checkbox-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-checkbox-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tlabel {\n\t\tcursor: pointer;\n\t}\n\n\tkol-input {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tjustify-items: left;\n\t}\n\n\tkol-input.default,\n\tkol-input.switch {\n\t\tgrid-template-columns: auto 1fr;\n\t}\n\n\tkol-input .input {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\torder: 1;\n\t}\n\n\tkol-input .input div {\n\t\tdisplay: inline-flex;\n\t}\n\n\tkol-input .input input {\n\t\tmargin: 0;\n\t}\n\n\tkol-input label {\n\t\torder: 2;\n\t}\n\n\tkol-input .hint,\n\tkol-input.error > kol-alert {\n\t\tgrid-column: span 2;\n\t}\n\n\tkol-input kol-alert.error {\n\t\torder: 3;\n\t}\n\n\tkol-input .hint {\n\t\torder: 4;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n\n\tinput {\n\t\tborder-style: solid;\n\t\tborder-width: 2px;\n\t\tline-height: 24px;\n\t}\n\n\tinput[type='checkbox'] {\n\t\tappearance: none;\n\t\tbackground-color: #fff;\n\t\tcursor: pointer;\n\t\ttransition: 0.5s;\n\t}\n\n\tinput[type='checkbox'].kol-disabled:before {\n\t\tcursor: not-allowed;\n\t}\n\n\tinput[type='checkbox']:before {\n\t\tcontent: '';\n\t\tcursor: pointer;\n\t}\n\n\t.default kol-icon {\n\t\tdisplay: none;\n\t}\n\n\tkol-input.required .tooltip-content .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.button {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: var(--a11y-min-size) auto;\n\t\tgrid-template-areas: 'error error' 'input label' 'hint hint';\n\t}\n\n\t.button[tabindex]:focus {\n\t\t\n\t\tcursor: inherit;\n\t}\n\n\t.button input {\n\t\tdisplay: none;\n\t}\n\n\t.button > .error {\n\t\tgrid-area: error;\n\t}\n\n\t.button > label {\n\t\tgrid-area: label;\n\t}\n\n\t.button > .input {\n\t\tgrid-area: input;\n\t}\n\n\t.button > .hint {\n\t\tgrid-area: hint;\n\t}\n\n\t.button .icon {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: var(--a11y-min-size);\n\t\theight: var(--a11y-min-size);\n\t}\n}\n\n@layer kol-component {\n\t.default input[type='checkbox'] {\n\t\theight: 1.5em;\n\t\twidth: 1.5em;\n\t}\n\n\t.default input[type='checkbox']:before {\n\t\tdisplay: block;\n\t\theight: 1.5em;\n\t\tposition: relative;\n\t\twidth: 1.5em;\n\t}\n\n\t.default input[type='checkbox']:checked:before {\n\t\tborder-radius: 1px;\n\t\tborder-style: solid;\n\t\tborder-width: 0 3px 3px 0;\n\t\theight: 0.75em;\n\t\tleft: calc(0.375em - 2px);\n\t\ttransform: rotate(40deg) translate(-50%, -50%);\n\t\ttop: calc(0.7125em - 2px);\n\t\twidth: 0.375em;\n\t}\n\n\t.default input[type='checkbox']:indeterminate:before {\n\t\tbackground-color: #000;\n\t\theight: 0.2em;\n\t\tleft: 0.24em;\n\t\ttop: 0.575em;\n\t\twidth: 0.8em;\n\t}\n}\n\n@layer kol-component {\n\t.switch .input {\n\t\tposition: relative;\n\t}\n\n\t.switch input[type='checkbox'] {\n\t\tdisplay: inline-block;\n\t\theight: 1.7em;\n\t\tmin-width: 3.2em;\n\t\tposition: relative;\n\t\twidth: 3.2em;\n\t}\n\n\t.switch input[type='checkbox']::before {\n\t\tbackground-color: #000;\n\t\theight: 1.2em;\n\t\tleft: calc(0.25em - 2px);\n\t\ttop: calc(0.25em - 2px);\n\t\tposition: absolute;\n\t\ttransition: 0.5s;\n\t\twidth: 1.2em;\n\t}\n\n\t.switch input[type='checkbox']:checked::before {\n\t\ttransform: translateX(1.5em);\n\t}\n\n\t.switch input[type='checkbox']:indeterminate::before {\n\t\ttransform: translateX(0.75em);\n\t}\n\n\t.switch .icon {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 1.2em;\n\t\theight: 1.2em;\n\t\tposition: absolute;\n\t\tz-index: 1;\n\t\ttop: 50%;\n\t\tleft: 4px;\n\t\ttransform: translate(0, -50%);\n\t\ttransition: 0.5s;\n\t\tcolor: #000;\n\t}\n\n\t.switch:has(input:checked) .icon {\n\t\ttransform: translate(1.5em, -50%);\n\t}\n\n\t.switch:has(input:indeterminate) .icon {\n\t\ttransform: translate(0.75em, -50%);\n\t}\n}";
 
 class KolInputCheckbox {
+  async getValue() {
+    var _a;
+    return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.checked;
+  }
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
     const hasExpertSlot = showExpertSlot(this.state._label);
@@ -13125,6 +12550,7 @@ class KolInputCheckbox {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
+      this.ref = ref;
       propagateFocus(this.host, ref);
     };
     this.onChange = (event) => {
@@ -13297,7 +12723,8 @@ class KolInputCheckbox {
       "_touched": [1540],
       "_value": [8],
       "_variant": [1],
-      "state": [32]
+      "state": [32],
+      "getValue": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -13400,6 +12827,10 @@ class InputColorController extends InputIconController {
 const defaultStyleCss$s = "@layer kol-global {\n\t.sc-kol-input-color-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-color-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-color-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\tdiv.input {\n\t\tcursor: pointer;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
 
 class KolInputColor {
+  async getValue() {
+    var _a;
+    return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
+  }
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
     const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
@@ -13555,7 +12986,8 @@ class KolInputColor {
       "_tooltipAlign": [1, "_tooltip-align"],
       "_touched": [1540],
       "_value": [1],
-      "state": [32]
+      "state": [32],
+      "getValue": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -13718,6 +13150,10 @@ InputDateController.DEFAULT_MAX_DATE = new Date(9999, 11, 31, 23, 59, 59);
 const defaultStyleCss$r = "@layer kol-global {\n\t.sc-kol-input-date-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-date-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-date-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\tkol-input-number {\n\t\tdisplay: block;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
 
 class KolInputDate {
+  async getValue() {
+    var _a;
+    return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
+  }
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
     const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
@@ -13928,7 +13364,8 @@ class KolInputDate {
       "_touched": [1540],
       "_type": [1],
       "_value": [1025],
-      "state": [32]
+      "state": [32],
+      "getValue": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -14086,6 +13523,10 @@ class InputEmailController extends InputTextEmailController {
 const defaultStyleCss$q = "@layer kol-global {\n\t.sc-kol-input-email-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-email-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-email-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
 
 class KolInputEmail {
+  async getValue() {
+    var _a;
+    return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
+  }
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
     const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
@@ -14298,7 +13739,8 @@ class KolInputEmail {
       "_tooltipAlign": [1, "_tooltip-align"],
       "_touched": [1540],
       "_value": [1],
-      "state": [32]
+      "state": [32],
+      "getValue": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -14348,6 +13790,10 @@ class InputFileController extends InputIconController {
 const defaultStyleCss$p = "@layer kol-global {\n\t.sc-kol-input-file-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-file-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-file-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\tlabel input[type='file']::-webkit-file-upload-button {\n\t\tdisplay: none;\n\t}\n\n\tlabel input[type='file']:before {\n\t\tcontent: 'Datei auswählen';\n\t}\n\n\tlabel input[multiple]:before {\n\t\tcontent: 'Dateien auswählen';\n\t}\n\n\tdiv.input {\n\t\tcursor: pointer;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
 
 class KolInputFile {
+  async getValue() {
+    var _a;
+    return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.files;
+  }
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
     const hasExpertSlot = showExpertSlot(this.state._label);
@@ -14518,7 +13964,8 @@ class KolInputFile {
       "_tooltipAlign": [1, "_tooltip-align"],
       "_touched": [1540],
       "_value": [1],
-      "state": [32]
+      "state": [32],
+      "getValue": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -14623,6 +14070,10 @@ class InputNumberController extends InputIconController {
 const defaultStyleCss$o = "@layer kol-global {\n\t.sc-kol-input-number-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-number-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-number-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
 
 class KolInputNumber {
+  async getValue() {
+    var _a;
+    return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
+  }
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
     const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
@@ -14834,7 +14285,8 @@ class KolInputNumber {
       "_tooltipAlign": [1, "_tooltip-align"],
       "_touched": [1540],
       "_value": [1032],
-      "state": [32]
+      "state": [32],
+      "getValue": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -14845,6 +14297,10 @@ class KolInputNumber {
 const defaultStyleCss$n = "@layer kol-global {\n\t.sc-kol-input-password-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-password-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-password-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
 
 class KolInputPassword {
+  async getValue() {
+    var _a;
+    return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
+  }
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
     const hasExpertSlot = showExpertSlot(this.state._label);
@@ -15049,7 +14505,8 @@ class KolInputPassword {
       "_tooltipAlign": [1, "_tooltip-align"],
       "_touched": [1540],
       "_value": [1],
-      "state": [32]
+      "state": [32],
+      "getValue": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -15060,6 +14517,9 @@ class KolInputPassword {
 const defaultStyleCss$m = "@layer kol-global {\n\t.sc-kol-input-radio-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-radio-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-radio-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-radio-default-h {\n\t\t--border-width: 2px;\n\t\t--input-size: 1.5em;\n\t}\n\n\tkol-input .icons {\n\t\tdisplay: none;\n\t}\n\n\tlabel {\n\t\tcursor: pointer;\n\t}\n\n\tinput {\n\t\tappearance: none;\n\t\tborder-width: var(--border-width);\n\t\tborder-style: solid;\n\t\tborder-radius: 100%;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\theight: var(--input-size);\n\t\tmargin: 0;\n\t\tmin-height: var(--input-size);\n\t\tmin-width: var(--input-size);\n\t\tpadding: 0;\n\t\twidth: var(--input-size);\n\t}\n\n\tinput:before {\n\t\tborder-radius: 100%;\n\t\tcontent: '';\n\t\tmargin: auto;\n\t\theight: calc(var(--input-size) / 2);\n\t\twidth: calc(var(--input-size) / 2);\n\t}\n\n\tinput:checked:before {\n\t\tbackground-color: #000;\n\t}\n\n\tfieldset {\n\t\tdisplay: flex;\n\t}\n\n\tfieldset.vertical {\n\t\tflex-direction: column;\n\t}\n\n\tfieldset .input-slot {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t}\n\n\t\n\t.required label > span::after {\n\t\tcontent: '';\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
 
 class KolInputRadio {
+  async getValue() {
+    return this.currentValue;
+  }
   render() {
     const { ariaDescribedBy, hasError } = getRenderStates(this.state);
     const hasExpertSlot = showExpertSlot(this.state._label);
@@ -15097,6 +14557,7 @@ class KolInputRadio {
             this.state._on.onChange(event, option.value);
           }
           this.controller.setValue(event, option.value);
+          this.currentValue = option.value;
         }
       }
     };
@@ -15185,6 +14646,7 @@ class KolInputRadio {
   componentWillLoad() {
     this._alert = this._alert === true;
     this._touched = this._touched === true;
+    this.currentValue = this._value;
     this.controller.componentWillLoad(this.onChange);
   }
   get host() { return getElement(this); }
@@ -15234,7 +14696,8 @@ class KolInputRadio {
       "_tooltipAlign": [1, "_tooltip-align"],
       "_touched": [1540],
       "_value": [8],
-      "state": [32]
+      "state": [32],
+      "getValue": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -15292,6 +14755,22 @@ class InputRangeController extends InputIconController {
 const defaultStyleCss$l = "@layer kol-global {\n\t.sc-kol-input-range-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-range-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-range-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.inputs-wrapper {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t}\n\n\tinput[type='number'] {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t\twidth: var(--kolibri-input-range--input-number--width);\n\t}\n\n\t\n\tinput[type='range'] {\n\t\tappearance: none;\n\t\tbackground-color: #d3d3d3;\n\t\tborder: 1px solid #000;\n\t\tdisplay: inline-block;\n\t\tflex-grow: 1;\n\t\theight: 0.5rem;\n\t\tline-height: 1.5em;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\twidth: 0; \n\t}\n\n\tinput[type='range']::-webkit-slider-thumb {\n\t\tbox-sizing: border-box;\n\t\tbackground-color: #000;\n\t\theight: 20px;\n\t\twidth: 20px;\n\t\tborder-radius: 20px;\n\t\tcursor: pointer;\n\t\t-webkit-appearance: none;\n\t}\n\n\tinput[type='range']::-moz-range-thumb {\n\t\tbox-sizing: border-box;\n\t\tbackground-color: #000;\n\t\theight: 20px;\n\t\twidth: 20px;\n\t\tborder-radius: 20px;\n\t\tcursor: pointer;\n\t\t-moz-appearance: none;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n\n\n@media (prefers-contrast: more) {\n\t/*!@::-webkit-slider-thumb*/.sc-kol-input-range-default::-webkit-slider-thumb {\n\t\toutline: 1px solid currentColor;\n\t}\n}";
 
 class KolInputRange {
+  getSanitizedFloatValue(value) {
+    const floatValue = parseFloat(value);
+    if (this.state._max && floatValue > this.state._max) {
+      return this.state._max;
+    }
+    if (this.state._min && floatValue < this.state._min) {
+      return this.state._min;
+    }
+    return floatValue;
+  }
+  async getValue() {
+    if (this.ref !== undefined) {
+      const value = this.ref.value;
+      return this.getSanitizedFloatValue(value);
+    }
+  }
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
     const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
@@ -15319,14 +14798,11 @@ class KolInputRange {
     };
     this.onChange = (event) => {
       var _a, _b;
-      let value = parseFloat(event.target.value);
-      if (this.state._max && value > this.state._max)
-        value = this.state._max;
-      if (this.state._min && value < this.state._min)
-        value = this.state._min;
-      this.validateValue(value);
+      const value = event.target.value;
+      const floatValue = this.getSanitizedFloatValue(value);
+      this.validateValue(floatValue);
       if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onChange) === 'function') {
-        (_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onChange(event, value);
+        (_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onChange(event, floatValue);
       }
     };
     this.onKeyUp = (event) => {
@@ -15492,7 +14968,8 @@ class KolInputRange {
       "_tooltipAlign": [1, "_tooltip-align"],
       "_touched": [1540],
       "_value": [2],
-      "state": [32]
+      "state": [32],
+      "getValue": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -15508,6 +14985,10 @@ const defaultStyleCss$k = "@layer kol-global {\n\t.sc-kol-input-text-default-h {
 
 featureHint(`[KolInputText] Pre- und post-Label für Währung usw.`);
 class KolInputText {
+  async getValue() {
+    var _a;
+    return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
+  }
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
     const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
@@ -15739,7 +15220,8 @@ class KolInputText {
       "_touched": [1540],
       "_type": [1],
       "_value": [1025],
-      "state": [32]
+      "state": [32],
+      "getValue": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -15857,12 +15339,12 @@ class KolLink {
       propagateFocus(this.host, ref);
     };
     this._accessKey = undefined;
+    this._ariaCurrentValue = undefined;
     this._download = undefined;
     this._hideLabel = false;
     this._href = undefined;
     this._icons = undefined;
     this._label = undefined;
-    this._listenAriaCurrent = undefined;
     this._on = undefined;
     this._role = undefined;
     this._tabIndex = undefined;
@@ -15871,7 +15353,7 @@ class KolLink {
     this._tooltipAlign = 'right';
   }
   render() {
-    return (hAsync(Host, null, hAsync("kol-link-wc", { ref: this.catchRef, _accessKey: this._accessKey, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _listenAriaCurrent: this._listenAriaCurrent, _on: this._on, _role: this._role, _tabIndex: this._tabIndex, _target: this._target, _targetDescription: this._targetDescription, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { name: "expert", slot: "expert" }))));
+    return (hAsync(Host, null, hAsync("kol-link-wc", { ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: this._role, _tabIndex: this._tabIndex, _target: this._target, _targetDescription: this._targetDescription, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { name: "expert", slot: "expert" }))));
   }
   get host() { return getElement(this); }
   static get style() { return {
@@ -15882,12 +15364,12 @@ class KolLink {
     "$tagName$": "kol-link",
     "$members$": {
       "_accessKey": [1, "_access-key"],
+      "_ariaCurrentValue": [1, "_aria-current-value"],
       "_download": [1],
       "_hideLabel": [4, "_hide-label"],
       "_href": [1],
       "_icons": [1],
       "_label": [1],
-      "_listenAriaCurrent": [8, "_listen-aria-current"],
       "_on": [16],
       "_role": [1],
       "_tabIndex": [2, "_tab-index"],
@@ -15910,13 +15392,13 @@ class KolLinkButton {
       propagateFocus(this.host, ref);
     };
     this._accessKey = undefined;
+    this._ariaCurrentValue = undefined;
     this._customClass = undefined;
     this._download = undefined;
     this._hideLabel = false;
     this._href = undefined;
     this._icons = undefined;
     this._label = undefined;
-    this._listenAriaCurrent = undefined;
     this._on = undefined;
     this._role = undefined;
     this._tabIndex = undefined;
@@ -15930,7 +15412,7 @@ class KolLinkButton {
         button: true,
         [this._variant]: this._variant !== 'custom',
         [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-      }, _accessKey: this._accessKey, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _listenAriaCurrent: this._listenAriaCurrent, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _targetDescription: this._targetDescription, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { name: "expert", slot: "expert" }))));
+      }, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _targetDescription: this._targetDescription, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { name: "expert", slot: "expert" }))));
   }
   get host() { return getElement(this); }
   static get style() { return {
@@ -15941,13 +15423,13 @@ class KolLinkButton {
     "$tagName$": "kol-link-button",
     "$members$": {
       "_accessKey": [1, "_access-key"],
+      "_ariaCurrentValue": [1, "_aria-current-value"],
       "_customClass": [1, "_custom-class"],
       "_download": [1],
       "_hideLabel": [4, "_hide-label"],
       "_href": [1],
       "_icons": [1],
       "_label": [1],
-      "_listenAriaCurrent": [8, "_listen-aria-current"],
       "_on": [16],
       "_role": [1],
       "_tabIndex": [2, "_tab-index"],
@@ -16071,17 +15553,6 @@ class KolLinkGroup {
   }; }
 }
 
-const ariaCurrentPropTypeOptions = ['date', 'location', 'page', 'step', 'time', true, false];
-const validate = (component, propName, value) => {
-  watchValidator(component, propName, (value) => (typeof value === 'string' || typeof value === 'boolean') && ariaCurrentPropTypeOptions.includes(value), new Set([`String {${ariaCurrentPropTypeOptions.filter((option) => typeof option === 'string').join(', ')}`, 'true', 'false']), value);
-};
-const validateAriaCurrent = (component, value) => {
-  validate(component, '_ariaCurrent', value);
-};
-const validateListenAriaCurrent = (component, value) => {
-  validate(component, '_listenAriaCurrent', value);
-};
-
 const validateDownload = (component, value) => {
   watchString(component, '_download', value);
 };
@@ -16100,6 +15571,22 @@ const validateLinkTarget = (component, value) => {
   watchString(component, '_target', value);
 };
 
+let currentLocation;
+const onLocationChange = (callback, eager = true) => {
+  if (eager && typeof currentLocation === 'string') {
+    callback(currentLocation);
+  }
+  return () => {
+  };
+};
+
+const ariaCurrentValuePropTypeOptions = ['date', 'location', 'page', 'step', 'time', 'true', 'false'];
+const validateAriaCurrentValue = (component, value) => {
+  watchValidator(component, `_ariaCurrentValue`, (value) => typeof value === 'string' && ariaCurrentValuePropTypeOptions.includes(value), new Set([`AriaCurrentValue {${ariaCurrentValuePropTypeOptions.join(', ')}`]), value, {
+    defaultValue: 'page',
+  });
+};
+
 class KolLinkWc {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -16129,28 +15616,13 @@ class KolLinkWc {
       }
       return { isExternal, tagAttrs };
     };
-    this.unsubscribeAriaCurrentSubject = ariaCurrentSubject.subscribe((event) => {
-      try {
-        if (this.state._listenAriaCurrent && this.state._listenAriaCurrent === event.ariaCurrent) {
-          if (this.state._href === event.href) {
-            this.validateAriaCurrent(event.ariaCurrent);
-          }
-          else {
-            this.validateAriaCurrent(false);
-          }
-        }
-      }
-      catch (e) {
-        devWarning(`The aria-current event is not valid.`);
-      }
-    });
     this._accessKey = undefined;
+    this._ariaCurrentValue = undefined;
     this._download = undefined;
     this._hideLabel = false;
     this._href = undefined;
     this._icons = undefined;
     this._label = undefined;
-    this._listenAriaCurrent = undefined;
     this._on = undefined;
     this._role = undefined;
     this._tabIndex = undefined;
@@ -16160,6 +15632,7 @@ class KolLinkWc {
     this.state = {
       _href: '…',
       _icons: {},
+      _ariaCurrentValue: 'page',
     };
   }
   render() {
@@ -16173,8 +15646,8 @@ class KolLinkWc {
   validateAccessKey(value) {
     validateAccessKey(this, value);
   }
-  validateAriaCurrent(value) {
-    validateAriaCurrent(this, value);
+  validateAriaCurrentValue(value) {
+    validateAriaCurrentValue(this, value);
   }
   validateDownload(value) {
     validateDownload(this, value);
@@ -16191,9 +15664,6 @@ class KolLinkWc {
   validateLabel(value) {
     validateLabelWithExpertSlot(this, value);
   }
-  validateListenAriaCurrent(value) {
-    validateListenAriaCurrent(this, value);
-  }
   validateOn(value) {
     validateLinkCallbacks(this, value);
   }
@@ -16214,31 +15684,36 @@ class KolLinkWc {
   }
   componentWillLoad() {
     this.validateAccessKey(this._accessKey);
+    this.validateAriaCurrentValue(this._ariaCurrentValue);
     this.validateDownload(this._download);
     this.validateHideLabel(this._hideLabel);
     this.validateHref(this._href);
     this.validateIcons(this._icons);
     this.validateLabel(this._label);
-    this.validateListenAriaCurrent(this._listenAriaCurrent);
     this.validateOn(this._on);
     this.validateRole(this._role);
     this.validateTabIndex(this._tabIndex);
     this.validateTarget(this._target);
     this.validateTargetDescription(this._targetDescription);
     this.validateTooltipAlign(this._tooltipAlign);
+    this.unsubscribeOnLocationChange = onLocationChange((location) => {
+      this.state._ariaCurrent = location === this.state._href ? this.state._ariaCurrentValue : undefined;
+    });
   }
   disconnectedCallback() {
-    this.unsubscribeAriaCurrentSubject.unsubscribe();
+    if (this.unsubscribeOnLocationChange) {
+      this.unsubscribeOnLocationChange();
+    }
   }
   get host() { return getElement(this); }
   static get watchers() { return {
     "_accessKey": ["validateAccessKey"],
+    "_ariaCurrentValue": ["validateAriaCurrentValue"],
     "_download": ["validateDownload"],
     "_hideLabel": ["validateHideLabel"],
     "_href": ["validateHref"],
     "_icons": ["validateIcons"],
     "_label": ["validateLabel"],
-    "_listenAriaCurrent": ["validateListenAriaCurrent"],
     "_on": ["validateOn"],
     "_role": ["validateRole"],
     "_tabIndex": ["validateTabIndex"],
@@ -16251,12 +15726,12 @@ class KolLinkWc {
     "$tagName$": "kol-link-wc",
     "$members$": {
       "_accessKey": [1, "_access-key"],
+      "_ariaCurrentValue": [1, "_aria-current-value"],
       "_download": [1],
       "_hideLabel": [4, "_hide-label"],
       "_href": [1],
       "_icons": [1],
       "_label": [1],
-      "_listenAriaCurrent": [8, "_listen-aria-current"],
       "_on": [16],
       "_role": [1],
       "_tabIndex": [2, "_tab-index"],
@@ -16637,7 +16112,6 @@ class KolNav {
         return this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation);
       })));
     };
-    this._ariaCurrentValue = false;
     this._collapsible = true;
     this._hasCompactButton = false;
     this._hideLabel = false;
@@ -16645,7 +16119,6 @@ class KolNav {
     this._links = undefined;
     this._orientation = 'vertical';
     this.state = {
-      _ariaCurrentValue: false,
       _collapsible: true,
       _hasCompactButton: false,
       _hideLabel: false,
@@ -16687,9 +16160,6 @@ class KolNav {
         },
       }, _tooltipAlign: "right", _variant: "ghost" }))))));
   }
-  validateAriaCurrentValue(value) {
-    watchValidator(this, '_ariaCurrentValue', (value) => value === true || value === 'date' || value === 'location' || value === 'page' || value === 'step' || value === 'time', new Set(['boolean', 'String {data, location, page, step, time}']), value);
-  }
   validateCollapsible(value) {
     validateCollapsible(this, value);
   }
@@ -16717,7 +16187,6 @@ class KolNav {
     });
   }
   componentWillLoad() {
-    this.validateAriaCurrentValue(this._ariaCurrentValue);
     this.validateCollapsible(this._collapsible);
     this.validateHideLabel(this._hideLabel);
     this.validateHasCompactButton(this._hasCompactButton);
@@ -16729,7 +16198,6 @@ class KolNav {
     removeNavLabel(this.state._label);
   }
   static get watchers() { return {
-    "_ariaCurrentValue": ["validateAriaCurrentValue"],
     "_collapsible": ["validateCollapsible"],
     "_hasCompactButton": ["validateHasCompactButton"],
     "_hideLabel": ["validateHideLabel"],
@@ -16744,7 +16212,6 @@ class KolNav {
     "$flags$": 41,
     "$tagName$": "kol-nav",
     "$members$": {
-      "_ariaCurrentValue": [8, "_aria-current-value"],
       "_collapsible": [4],
       "_hasCompactButton": [4, "_has-compact-button"],
       "_hideLabel": [4, "_hide-label"],
@@ -18916,6 +18383,9 @@ const isSelected = (valueList, optionValue) => {
   return Array.isArray(valueList) && valueList.includes(optionValue);
 };
 class KolSelect {
+  async getValue() {
+    return this._value;
+  }
   renderOptgroup(optgroup, preKey) {
     var _a;
     return (hAsync("optgroup", { disabled: optgroup.disabled, label: optgroup.label }, (_a = optgroup.options) === null || _a === void 0 ? void 0 : _a.map((option, index) => {
@@ -19114,7 +18584,8 @@ class KolSelect {
       "_tooltipAlign": [1, "_tooltip-align"],
       "_touched": [1540],
       "_value": [1025],
-      "state": [32]
+      "state": [32],
+      "getValue": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -31716,6 +31187,7 @@ class KolTable {
     registerInstance(this, hostRef);
     this.horizontal = true;
     this.sortDirections = new Map();
+    this.sortData = [];
     this.showPagination = false;
     this.pageStartSlice = 0;
     this.pageEndSlice = 10;
@@ -31757,8 +31229,42 @@ class KolTable {
       }
     };
     this.updateSortedData = (cell = this.sortedColumnHead) => {
+      if (this.disableSort) {
+        setState(this, '_sortedData', this.state._data);
+        return;
+      }
       let sortedData = this.state._data;
-      if (typeof this.sortFunction === 'function') {
+      if (this.sortData.length > 0) {
+        sortedData = this.state._data.sort((a, b) => {
+          for (let index = 0; index < this.sortData.length; index++) {
+            const data = this.sortData[index];
+            const result = data.compareFn(a, b);
+            if (result !== 0) {
+              return data.direction === 'ASC' ? result : -result;
+            }
+          }
+          return 0;
+        });
+        if (this.sortData.length === 1) {
+          this.ariaLive = translate(`kol-sort-${this.sortData[0].direction === 'ASC' ? 'ascending' : 'descending'}`, {
+            placeholders: { column: this.sortData[0].label, multi: '' },
+          });
+        }
+        else {
+          let sortText = '';
+          for (let index = 1; index < this.sortData.length - 1; index++) {
+            const data = this.sortData[index];
+            sortText += translate(`kol-sort-then-${data.direction === 'ASC' ? 'ascending' : 'descending'}`, { placeholders: { column: data.label } });
+          }
+          sortText += translate(`kol-sort-then-last-${this.sortData[this.sortData.length - 1].direction === 'ASC' ? 'ascending' : 'descending'}`, {
+            placeholders: { column: this.sortData[this.sortData.length - 1].label },
+          });
+          this.ariaLive = translate(`kol-sort-${this.sortData[0].direction === 'ASC' ? 'ascending' : 'descending'}`, {
+            placeholders: { column: this.sortData[0].label, multi: sortText },
+          });
+        }
+      }
+      else if (typeof this.sortFunction === 'function') {
         switch (this.sortDirections.get(this.sortFunction)) {
           case 'ASC':
             sortedData = this.sortFunction([...this.state._data]);
@@ -31777,6 +31283,9 @@ class KolTable {
             this.ariaLive = translate('kol-sort-none', { placeholders: { column: cell.label } });
         }
       }
+      else {
+        this.ariaLive = translate('kol-table-sort-none');
+      }
       setState(this, '_sortedData', sortedData);
     };
     this.renderTableRow = (row, rowIndex) => {
@@ -31786,42 +31295,47 @@ class KolTable {
       if (cell.asTd === false) {
         const headerCell = cell;
         let sortDirection = undefined;
+        let shortSortDirection = 'NOS';
         let sortButtonIcon = 'codicon codicon-fold';
-        if (!this.disableSort && headerCell.key === this.sortedColumnHead.key) {
-          switch (this.sortedColumnHead.sortDirection) {
-            case 'ASC':
-              sortButtonIcon = 'codicon codicon-chevron-up';
-              sortDirection = 'ascending';
-              break;
-            case 'DESC':
-              sortButtonIcon = 'codicon codicon-chevron-down';
-              sortDirection = 'descending';
-              break;
+        if (!this.disableSort) {
+          if (headerCell.key) {
+            const data = this.sortData.find((value) => value.key === headerCell.key);
+            if (data) {
+              shortSortDirection = data.direction;
+              switch (data.direction) {
+                case 'ASC':
+                  sortButtonIcon = 'codicon codicon-chevron-up';
+                  sortDirection = 'ascending';
+                  break;
+                case 'DESC':
+                  sortButtonIcon = 'codicon codicon-chevron-down';
+                  sortDirection = 'descending';
+                  break;
+              }
+            }
+          }
+          if (headerCell.key === this.sortedColumnHead.key) {
+            shortSortDirection = this.sortedColumnHead.sortDirection;
+            switch (this.sortedColumnHead.sortDirection) {
+              case 'ASC':
+                sortButtonIcon = 'codicon codicon-chevron-up';
+                sortDirection = 'ascending';
+                break;
+              case 'DESC':
+                sortButtonIcon = 'codicon codicon-chevron-down';
+                sortDirection = 'descending';
+                break;
+            }
           }
         }
         return (hAsync("th", { key: `tbody-${rowIndex}-${colIndex}-${headerCell.label}`, scope: typeof headerCell.rowSpan === 'number' && headerCell.rowSpan > 1 ? 'rowgroup' : 'row', colSpan: headerCell.colSpan, rowSpan: headerCell.rowSpan, style: {
             textAlign: headerCell.textAlign,
             width: headerCell.width,
-          }, "aria-sort": sortDirection, "data-sort": `sort-${this.sortDirections.get(headerCell.sort)}` }, hAsync("div", { class: "w-full flex gap-1 items-center" }, hAsync("div", { class: {
+          }, "aria-sort": sortDirection, "data-sort": `sort-${shortSortDirection}` }, hAsync("div", { class: "w-full flex gap-1 items-center" }, hAsync("div", { class: {
             'w-full': true,
             [headerCell.textAlign]: typeof headerCell.textAlign === 'string' && headerCell.textAlign.length > 0,
-          }, innerHTML: headerCell.label, style: { textAlign: headerCell.textAlign } }), !this.disableSort && typeof headerCell.sort === 'function' && (hAsync("kol-button", { exportparts: "icon", _icons: sortButtonIcon, _hideLabel: true, _label: translate('kol-change-order', { placeholders: { colLabel: headerCell.label } }), _on: {
-            onClick: () => {
-              if (typeof headerCell.sort === 'function') {
-                this.sortFunction = headerCell.sort;
-                switch (this.sortDirections.get(this.sortFunction)) {
-                  case 'ASC':
-                    this.setSortDirection(this.sortFunction, 'DESC');
-                    break;
-                  case 'DESC':
-                    this.setSortDirection(this.sortFunction, 'NOS');
-                    break;
-                  default:
-                    this.setSortDirection(this.sortFunction, 'ASC');
-                }
-                this.updateSortedData(headerCell);
-              }
-            },
+          }, style: { textAlign: headerCell.textAlign } }, headerCell.label), !this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') && (hAsync("kol-button", { exportparts: "icon", _icons: sortButtonIcon, _hideLabel: true, _label: translate('kol-change-order', { placeholders: { colLabel: headerCell.label } }), _on: {
+            onClick: () => this.changeCellSort(headerCell),
           }, _variant: "ghost" })))));
       }
       else {
@@ -31834,13 +31348,14 @@ class KolTable {
             ? (el) => {
               this.cellRender(cell, el);
             }
-            : undefined, innerHTML: typeof cell.render !== 'function' ? cell.label : '' }));
+            : undefined }, typeof cell.render !== 'function' ? cell.label : ''));
       }
     };
     this.renderFoot = () => {
       const rows = this.createDataField(this.state._dataFoot, this.state._headers, true);
       return hAsync("tfoot", null, rows.map(this.renderTableRow));
     };
+    this._allowMultiSort = undefined;
     this._data = undefined;
     this._dataFoot = undefined;
     this._headers = undefined;
@@ -31848,6 +31363,7 @@ class KolTable {
     this._minWidth = undefined;
     this._pagination = undefined;
     this.state = {
+      _allowMultiSort: false,
       _label: '…',
       _data: [],
       _dataFoot: [],
@@ -31863,6 +31379,11 @@ class KolTable {
       _sortedData: [],
     };
   }
+  validateAllowMultiSort(value) {
+    watchValidator(this, '_allowMultiSort', () => true, new Set(['boolean']), value, {
+      defaultValue: false,
+    });
+  }
   validateData(value) {
     emptyStringByArrayHandler(value, () => {
       objectObjectHandler(value, () => {
@@ -31905,6 +31426,52 @@ class KolTable {
       });
     });
   }
+  changeCellSort(headerCell) {
+    var _a;
+    if (typeof headerCell.compareFn === 'function') {
+      if (!this.state._allowMultiSort && headerCell.key != ((_a = this.sortData[0]) === null || _a === void 0 ? void 0 : _a.key)) {
+        this.sortData = [];
+      }
+      const index = this.sortData.findIndex((value) => value.key === headerCell.key);
+      if (index >= 0) {
+        const settings = this.sortData[index];
+        switch (settings.direction) {
+          case 'ASC':
+            settings.direction = 'DESC';
+            break;
+          case 'DESC':
+            this.sortData.splice(index, 1);
+            break;
+          default:
+            settings.direction = 'ASC';
+            break;
+        }
+      }
+      else if (headerCell.key) {
+        this.sortData.push({
+          label: headerCell.label,
+          key: headerCell.key,
+          compareFn: headerCell.compareFn,
+          direction: 'ASC',
+        });
+      }
+      this.updateSortedData(headerCell);
+    }
+    else if (typeof headerCell.sort === 'function') {
+      this.sortFunction = headerCell.sort;
+      switch (this.sortDirections.get(this.sortFunction)) {
+        case 'ASC':
+          this.setSortDirection(this.sortFunction, 'DESC');
+          break;
+        case 'DESC':
+          this.setSortDirection(this.sortFunction, 'NOS');
+          break;
+        default:
+          this.setSortDirection(this.sortFunction, 'ASC');
+      }
+      this.updateSortedData(headerCell);
+    }
+  }
   validateHeaders(value) {
     emptyStringByArrayHandler(value, () => {
       objectObjectHandler(value, () => {
@@ -31917,21 +31484,34 @@ class KolTable {
           hooks: {
             beforePatch: (nextValue) => {
               var _a, _b, _c, _d;
-              const headers = nextValue;
-              (_a = headers.horizontal) === null || _a === void 0 ? void 0 : _a.forEach((header) => {
-                header.forEach((cell) => {
-                  if (typeof cell.sort === 'function' && typeof cell.sortDirection === 'string') {
-                    this.setSortDirection(cell.sort, cell.sortDirection);
+              const applySort = (headers) => {
+                let hasSortedCells = false;
+                headers.forEach((cell) => {
+                  const key = cell.key;
+                  if (!key) {
+                    return;
                   }
-                });
-              });
-              (_b = headers.vertical) === null || _b === void 0 ? void 0 : _b.forEach((header) => {
-                header.forEach((cell) => {
-                  if (typeof cell.sort === 'function' && typeof cell.sortDirection === 'string') {
-                    this.setSortDirection(cell.sort, cell.sortDirection);
+                  const sortDirection = cell.sortDirection;
+                  if (sortDirection === 'ASC' || sortDirection === 'DESC') {
+                    if (typeof cell.compareFn === 'function') {
+                      if (this.state._allowMultiSort || this.sortData.length === 0) {
+                        this.sortData.push({ label: cell.label, key, compareFn: cell.compareFn, direction: sortDirection });
+                      }
+                      hasSortedCells = true;
+                    }
+                    else if (typeof cell.sort === 'function') {
+                      this.setSortDirection(cell.sort, sortDirection);
+                      setTimeout(() => this.updateSortedData({ key, label: cell.label, sortDirection }));
+                    }
                   }
                 });
-              });
+                if (hasSortedCells) {
+                  setTimeout(() => this.updateSortedData());
+                }
+              };
+              const headers = nextValue;
+              (_a = headers.horizontal) === null || _a === void 0 ? void 0 : _a.forEach(applySort);
+              (_b = headers.vertical) === null || _b === void 0 ? void 0 : _b.forEach(applySort);
               if (headers.horizontal && headers.vertical && ((_c = headers.horizontal) === null || _c === void 0 ? void 0 : _c.length) > 0 && ((_d = headers.vertical) === null || _d === void 0 ? void 0 : _d.length) > 0) {
                 this.disableSort = true;
                 devHint(`Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)`);
@@ -31963,6 +31543,7 @@ class KolTable {
     });
   }
   componentWillLoad() {
+    this.validateAllowMultiSort(this._allowMultiSort);
     this.validateData(this._data);
     this.validateDataFoot(this._dataFoot);
     this.validateHeaders(this._headers);
@@ -32141,7 +31722,7 @@ class KolTable {
           width: col.width,
         }, col.data, this.state._data);
         if (typeof html === 'string') {
-          el.innerHTML = html;
+          el.textContent = html;
         }
       }));
     }
@@ -32150,7 +31731,7 @@ class KolTable {
     var _a, _b;
     const displayedData = this.selectDisplayedData(this.state._sortedData, this.showPagination ? (_b = (_a = this.state._pagination) === null || _a === void 0 ? void 0 : _a._pageSize) !== null && _b !== void 0 ? _b : 10 : this.state._sortedData.length, this.state._pagination._page || 1);
     const dataField = this.createDataField(displayedData, this.state._headers);
-    return (hAsync(Host, null, hAsync("span", { style: { height: '0', width: '0', overflow: 'hidden' }, "aria-live": "assertive" }, this.ariaLive), this.pageEndSlice > 0 && this.showPagination && (hAsync("div", { class: "pagination" }, hAsync("span", null, "Eintr\u00E4ge ", this.pageEndSlice > 0 ? this.pageStartSlice + 1 : 0, " bis ", this.pageEndSlice, " von", ' ', this.state._pagination._max || (Array.isArray(this.state._data) ? this.state._data.length : 0), " angezeigt"), hAsync("div", null, hAsync("kol-pagination", { _boundaryCount: this.state._pagination._boundaryCount, _customClass: this.state._pagination._customClass, _on: this.handlePagination, _page: this.state._pagination._page, _pageSize: this.state._pagination._pageSize, _pageSizeOptions: this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS, _siblingCount: this.state._pagination._siblingCount, _tooltipAlign: "bottom", _max: this.state._pagination._max || this.state._pagination._max || this.state._data.length, _label: translate('kol-table-pagination-label', { placeholders: { label: this.state._label } }) })))), hAsync("div", { class: "table", tabindex: "0" }, hAsync("table", { style: {
+    return (hAsync(Host, null, hAsync("div", { style: { height: '0', width: '0', overflow: 'hidden' }, "aria-live": "assertive" }, this.ariaLive), this.pageEndSlice > 0 && this.showPagination && (hAsync("div", { class: "pagination" }, hAsync("span", null, "Eintr\u00E4ge ", this.pageEndSlice > 0 ? this.pageStartSlice + 1 : 0, " bis ", this.pageEndSlice, " von", ' ', this.state._pagination._max || (Array.isArray(this.state._data) ? this.state._data.length : 0), " angezeigt"), hAsync("div", null, hAsync("kol-pagination", { _boundaryCount: this.state._pagination._boundaryCount, _customClass: this.state._pagination._customClass, _on: this.handlePagination, _page: this.state._pagination._page, _pageSize: this.state._pagination._pageSize, _pageSizeOptions: this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS, _siblingCount: this.state._pagination._siblingCount, _tooltipAlign: "bottom", _max: this.state._pagination._max || this.state._pagination._max || this.state._data.length, _label: translate('kol-table-pagination-label', { placeholders: { label: this.state._label } }) })))), hAsync("div", { class: "table", tabindex: "0" }, hAsync("table", { style: {
         minWidth: this.state._minWidth,
       } }, hAsync("caption", null, this.state._label), Array.isArray(this.state._headers.horizontal) && (hAsync("thead", null, this.state._headers.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, cols.map((col, colIndex) => {
       if (col.asTd === true) {
@@ -32163,13 +31744,31 @@ class KolTable {
             ? (el) => {
               this.cellRender(col, el);
             }
-            : undefined, innerHTML: typeof col.render !== 'function' ? col.label : '' }));
+            : undefined }, typeof col.render !== 'function' ? col.label : ''));
       }
       else {
         const headerCell = col;
         let sortDirection = undefined;
+        let shortSortDirection = 'NOS';
         let sortButtonIcon = 'codicon codicon-fold';
+        if (headerCell.key) {
+          const data = this.sortData.find((value) => value.key === headerCell.key);
+          if (data) {
+            shortSortDirection = data.direction;
+            switch (data.direction) {
+              case 'ASC':
+                sortButtonIcon = 'codicon codicon-chevron-up';
+                sortDirection = 'ascending';
+                break;
+              case 'DESC':
+                sortButtonIcon = 'codicon codicon-chevron-down';
+                sortDirection = 'descending';
+                break;
+            }
+          }
+        }
         if (headerCell.key === this.sortedColumnHead.key) {
+          shortSortDirection = this.sortedColumnHead.sortDirection;
           switch (this.sortedColumnHead.sortDirection) {
             case 'ASC':
               sortButtonIcon = 'codicon codicon-chevron-up';
@@ -32184,33 +31783,19 @@ class KolTable {
         return (hAsync("th", { key: `thead-${rowIndex}-${colIndex}-${headerCell.label}`, scope: typeof headerCell.colSpan === 'number' && headerCell.colSpan > 1 ? 'colgroup' : 'col', colSpan: headerCell.colSpan, rowSpan: headerCell.rowSpan, style: {
             textAlign: col.textAlign,
             width: col.width,
-          }, "aria-sort": sortDirection, "data-sort": sortDirection ? `sort-${this.sortedColumnHead.sortDirection}` : 'sort-NOS' }, hAsync("div", { class: "w-full flex gap-1 items-center" }, hAsync("div", { class: {
+          }, "aria-sort": sortDirection, "data-sort": `sort-${shortSortDirection}` }, hAsync("div", { class: "w-full flex gap-1 items-center" }, hAsync("div", { class: {
             'w-full': true,
             [col.textAlign]: typeof col.textAlign === 'string' && col.textAlign.length > 0,
-          }, innerHTML: col.label, style: {
+          }, style: {
             textAlign: col.textAlign,
-          } }), !this.disableSort && typeof headerCell.sort === 'function' && (hAsync("kol-button", { exportparts: "icon", _icons: sortButtonIcon, _hideLabel: true, _label: translate('kol-change-order', { placeholders: { colLabel: col.label } }), _on: {
-            onClick: () => {
-              if (typeof headerCell.sort === 'function') {
-                this.sortFunction = headerCell.sort;
-                switch (this.sortDirections.get(this.sortFunction)) {
-                  case 'ASC':
-                    this.setSortDirection(this.sortFunction, 'DESC');
-                    break;
-                  case 'DESC':
-                    this.setSortDirection(this.sortFunction, 'NOS');
-                    break;
-                  default:
-                    this.setSortDirection(this.sortFunction, 'ASC');
-                }
-                this.updateSortedData(headerCell);
-              }
-            },
+          } }, col.label), !this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') && (hAsync("kol-button", { exportparts: "icon", _icons: sortButtonIcon, _hideLabel: true, _label: translate('kol-change-order', { placeholders: { colLabel: col.label } }), _on: {
+            onClick: () => this.changeCellSort(headerCell),
           }, _variant: "ghost" })))));
       }
     })))))), hAsync("tbody", null, dataField.map(this.renderTableRow)), this.state._dataFoot.length > 0 ? this.renderFoot() : ''))));
   }
   static get watchers() { return {
+    "_allowMultiSort": ["validateAllowMultiSort"],
     "_data": ["validateData"],
     "_dataFoot": ["validateDataFoot"],
     "_headers": ["validateHeaders"],
@@ -32225,6 +31810,7 @@ class KolTable {
     "$flags$": 41,
     "$tagName$": "kol-table",
     "$members$": {
+      "_allowMultiSort": [4, "_allow-multi-sort"],
       "_data": [1],
       "_dataFoot": [1, "_data-foot"],
       "_headers": [1],
@@ -32608,6 +32194,10 @@ const increaseTextareaHeight = (el) => {
   return nextRows;
 };
 class KolTextarea {
+  async getValue() {
+    var _a;
+    return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
+  }
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
     const hasExpertSlot = showExpertSlot(this.state._label);
@@ -32797,7 +32387,8 @@ class KolTextarea {
       "_tooltipAlign": [1, "_tooltip-align"],
       "_touched": [1540],
       "_value": [1],
-      "state": [32]
+      "state": [32],
+      "getValue": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",