@public-ui/hydrate 4.1.1-rc.2 → 4.1.1

package/dist/index.js

@@ -146,7 +146,7 @@ function _mergeNamespaces(n, m) {
 
 const NAMESPACE = 'kolibri';
 const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
-const Env = /* kolibri */ {"kolibriVersion":"4.1.1-rc.2"};
+const Env = /* kolibri */ {"kolibriVersion":"4.1.1"};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -6924,7 +6924,13 @@ function createPropDefinition(normalize, validate = () => true) {
     return {
         normalize,
         validate,
-        apply(value, callback) {
+        apply(value, callback, defaultValue) {
+            if (value === undefined || value === null) {
+                if (defaultValue !== undefined) {
+                    callback(defaultValue);
+                }
+                return;
+            }
             try {
                 const normalized = this.normalize(value);
                 if (this.validate(normalized)) {
@@ -6941,7 +6947,13 @@ function createDependentPropDefinition(normalize, validate = () => true) {
     return {
         normalize,
         validate,
-        apply(value, callback, deps) {
+        apply(value, callback, deps, defaultValue) {
+            if (value === undefined || value === null) {
+                if (defaultValue !== undefined) {
+                    callback(defaultValue);
+                }
+                return;
+            }
             try {
                 const normalized = this.normalize(value, deps);
                 if (this.validate(normalized, deps)) {
@@ -6964,18 +6976,6 @@ function normalizeString(value) {
     }
     throw new Error(`Invalid string: ${value}`);
 }
-function normalizeInteger(value) {
-    if (typeof value === 'number') {
-        return Number.isInteger(value) ? value : Math.round(value);
-    }
-    if (typeof value === 'string') {
-        const parsed = parseInt(value, 10);
-        if (!isNaN(parsed)) {
-            return parsed;
-        }
-    }
-    throw new Error(`Invalid integer: ${value}`);
-}
 function normalizeNumber(value) {
     if (typeof value === 'number') {
         return value;
@@ -7026,30 +7026,8 @@ function validator(value) {
 }
 const colorProp = createPropDefinition(normalizer, validator);
 
-const countProp = createPropDefinition(normalizeInteger, (v) => v >= 0);
-
 const hrefProp = createPropDefinition(normalizeString, (v) => v.length > 0);
 
-const formatNameAsInitial = (name) => {
-    if (name.length === 0) {
-        return '';
-    }
-    return name[0].toUpperCase();
-};
-const normalizeInitials = (value) => {
-    if (typeof value !== 'string') {
-        throw new Error(`Invalid initials value: ${JSON.stringify(value)}`);
-    }
-    const names = value.trim().split(/\s+/);
-    const first = names[0];
-    const last = names[names.length - 1];
-    if (names.length >= 2 && first && last) {
-        return `${formatNameAsInitial(first)}${formatNameAsInitial(last)}`;
-    }
-    return formatNameAsInitial(value);
-};
-const initialsProp = createPropDefinition(normalizeInitials, (v) => v.length > 0);
-
 const labelProp = createPropDefinition(normalizeString, (v) => v.length >= 2 && v.length <= 80);
 
 const LOADING_OPTIONS = ['eager', 'lazy'];
@@ -7095,9 +7073,10 @@ const QUOTE_VARIANT_SET = new Set(QUOTE_VARIANT_OPTIONS);
 const variantQuoteProp = createPropDefinition((value) => normalizeString(value), (v) => QUOTE_VARIANT_SET.has(v));
 
 class BaseController {
-    constructor(component, props) {
+    constructor(component = {}) {
         this.component = component;
-        this.props = props;
+        this.props = {};
+        this.rawProps = {};
     }
     setProp(key, value) {
         this.props[key] = value;
@@ -7105,19 +7084,33 @@ class BaseController {
     getProps() {
         return this.props;
     }
+    setRawProp(key, value) {
+        this.rawProps[key] = value;
+    }
+    getRawProps() {
+        return this.rawProps;
+    }
     setState(key, value) {
         this.component[key] = value;
     }
 }
 
-class AvatarController extends BaseController {
-    constructor(states) {
-        super(states, {
-            color: { backgroundColor: '#d3d3d3', foregroundColor: '#3f3f3f' },
-            label: '',
-            src: '',
-        });
+const formatNameAsInitial = (name) => {
+    if (name.length === 0) {
+        return '';
     }
+    return name[0].toUpperCase();
+};
+const normalizeInitials = (value) => {
+    const names = value.trim().split(/\s+/);
+    const first = names[0];
+    const last = names[names.length - 1];
+    if (names.length >= 2 && first && last) {
+        return `${formatNameAsInitial(first)}${formatNameAsInitial(last)}`;
+    }
+    return formatNameAsInitial(value);
+};
+class AvatarController extends BaseController {
     componentWillLoad(props) {
         const { color, label, src } = props;
         this.watchColor(color);
@@ -7127,20 +7120,21 @@ class AvatarController extends BaseController {
     watchColor(value) {
         colorProp.apply(value, (v) => {
             this.setProp('color', v);
+        }, {
+            backgroundColor: '#d3d3d3',
+            foregroundColor: '#3f3f3f',
         });
     }
     watchLabel(value) {
         labelProp.apply(value, (v) => {
             this.setProp('label', v);
-        });
-        initialsProp.apply(value, (v) => {
-            this.setState('initials', v);
-        });
+            this.setState('initials', normalizeInitials(v));
+        }, '');
     }
     watchSrc(value) {
         srcProp.apply(value, (v) => {
             this.setProp('src', v);
-        });
+        }, '');
     }
 }
 
@@ -19647,10 +19641,8 @@ const BEM_CLASS_CLICK_BUTTON__LABEL = clickButtonBem('label');
 const ClickButtonFC = ({ label, handleClick, refButton }) => (hAsync("button", { class: BEM_CLASS_CLICK_BUTTON, ref: refButton, onClick: handleClick, onKeyDown: (event) => event.preventDefault() }, hAsync("span", { class: BEM_CLASS_CLICK_BUTTON__LABEL }, label)));
 
 class ClickButtonController extends BaseController {
-    constructor(states = {}) {
-        super(states, {
-            label: '',
-        });
+    constructor() {
+        super(...arguments);
         this.handleClick = () => {
             console.log(this, this.buttonRef, 'button clicked');
         };
@@ -19665,7 +19657,7 @@ class ClickButtonController extends BaseController {
     watchLabel(value) {
         labelProp.apply(value, (v) => {
             this.setProp('label', v);
-        });
+        }, '');
     }
     focus() {
         var _a;
@@ -21234,7 +21226,7 @@ const bem = c();
 const BEM_CLASS_ICON = bem('kol-icon');
 const BEM_CLASS_ICON__ICON = bem('kol-icon', 'icon');
 
-const defaultStyleCss$y = "/* forward the rem function */\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1772813649030\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1772813649030#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1772813649030\") format(\"woff2\"), url(\"kolicons.woff?t=1772813649030\") format(\"woff\"), url(\"kolicons.ttf?t=1772813649030\") format(\"truetype\"), url(\"kolicons.svg?t=1772813649030#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-size: inherit;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  /* :host implicitly inherits font-size, see below */\n  :host {\n    color: inherit;\n    display: contents;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n}";
+const defaultStyleCss$y = "/* forward the rem function */\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773045157587\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773045157587#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773045157587\") format(\"woff2\"), url(\"kolicons.woff?t=1773045157587\") format(\"woff\"), url(\"kolicons.ttf?t=1773045157587\") format(\"truetype\"), url(\"kolicons.svg?t=1773045157587#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-size: inherit;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  /* :host implicitly inherits font-size, see below */\n  :host {\n    color: inherit;\n    display: contents;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n}";
 
 class KolIcon {
     render() {
@@ -21285,15 +21277,6 @@ const ImageFC = (props) => {
 };
 
 class ImageController extends BaseController {
-    constructor(states = {}) {
-        super(states, {
-            alt: '',
-            loading: 'lazy',
-            sizes: '',
-            src: '',
-            srcset: '',
-        });
-    }
     componentWillLoad(props) {
         const { alt, loading, sizes, src, srcset } = props;
         this.watchAlt(alt);
@@ -21305,27 +21288,27 @@ class ImageController extends BaseController {
     watchAlt(value) {
         altProp.apply(value, (v) => {
             this.setProp('alt', v);
-        });
+        }, '');
     }
     watchLoading(value) {
         loadingProp.apply(value, (v) => {
             this.setProp('loading', v);
-        });
+        }, 'lazy');
     }
     watchSizes(value) {
         sizesProp.apply(value, (v) => {
             this.setProp('sizes', v);
-        });
+        }, '');
     }
     watchSrc(value) {
         srcProp.apply(value, (v) => {
             this.setProp('src', v);
-        });
+        }, '');
     }
     watchSrcset(value) {
         srcsetProp.apply(value, (v) => {
             this.setProp('srcset', v);
-        });
+        }, '');
     }
 }
 
@@ -27797,15 +27780,6 @@ const ProgressFC = (props) => {
 };
 
 class ProgressController extends BaseController {
-    constructor(states) {
-        super(states, {
-            label: '',
-            max: 100,
-            unit: '%',
-            value: 0,
-            variant: 'bar',
-        });
-    }
     componentWillLoad(props) {
         const { label, max, unit, value, variant } = props;
         this.watchLabel(label);
@@ -27814,37 +27788,34 @@ class ProgressController extends BaseController {
         this.watchValue(value);
         this.watchVariant(variant);
         this.setState('liveValue', this.getProps().value);
-        this.setState('max', this.getProps().max);
         this.startLiveValueInterval();
     }
     watchLabel(value) {
         labelProp.apply(value, (v) => {
             this.setProp('label', v);
-        });
+        }, '');
     }
     watchMax(value) {
         maxProp.apply(value, (v) => {
             this.setProp('max', v);
-            this.setState('max', v);
-        });
-        this.watchValue(this.getProps().value);
+            this.watchValue(this.getRawProps().value);
+        }, 100);
     }
     watchUnit(value) {
         unitProp.apply(value, (v) => {
             this.setProp('unit', v);
-            this.setState('unit', v);
-        });
+        }, '%');
     }
     watchValue(value) {
+        this.setRawProp('value', value);
         clampedNumberValueProp.apply(value, (v) => {
             this.setProp('value', v);
-        }, { min: 0, max: this.getProps().max });
+        }, { min: 0, max: this.getProps().max }, 0);
     }
     watchVariant(value) {
         variantProgressProp.apply(value, (v) => {
             this.setProp('variant', v);
-            this.setState('variant', v);
-        });
+        }, 'bar');
     }
     startLiveValueInterval() {
         this.interval = setInterval(() => {
@@ -27868,10 +27839,7 @@ class KolProgress {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ctrl = new ProgressController(this);
-        this.unit = '%';
-        this.variant = 'bar';
         this.liveValue = 0;
-        this.max = this._max;
     }
     watchLabel(value) {
         this.ctrl.watchLabel(value);
@@ -27903,7 +27871,7 @@ class KolProgress {
     render() {
         const { label, max, unit, value, variant } = this.ctrl.getProps();
         const { liveValue } = this;
-        return (hAsync(Host, { key: 'c101389f829d2be6f356a198fff8a557d6bcac46' }, hAsync(ProgressFC, { key: '805ea44845b7fb33b5e993b9dd4f5b2848933d7b', label: label, max: max, unit: unit, value: value, variant: variant, liveValue: liveValue })));
+        return (hAsync(Host, { key: '3e780e20fdf0435675aa4139a34784d335b8ca0d' }, hAsync(ProgressFC, { key: '7c57e3c56ada9b13315f48565c9de2efa580b196', label: label, max: max, unit: unit, value: value, variant: variant, liveValue: liveValue })));
     }
     static get watchers() { return {
         "_label": ["watchLabel"],
@@ -27924,10 +27892,7 @@ class KolProgress {
             "_unit": [1],
             "_value": [2],
             "_variant": [1],
-            "unit": [32],
-            "variant": [32],
-            "liveValue": [32],
-            "max": [32]
+            "liveValue": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -27948,14 +27913,6 @@ const QuoteFC = (props) => {
 };
 
 class QuoteController extends BaseController {
-    constructor() {
-        super({}, {
-            href: '',
-            label: '',
-            quote: '',
-            variant: 'inline',
-        });
-    }
     componentWillLoad(props) {
         const { href, label, quote, variant } = props;
         this.watchHref(href);
@@ -27966,22 +27923,22 @@ class QuoteController extends BaseController {
     watchHref(value) {
         hrefProp.apply(value, (v) => {
             this.setProp('href', v);
-        });
+        }, '');
     }
     watchLabel(value) {
         labelProp.apply(value, (v) => {
             this.setProp('label', v);
-        });
+        }, '');
     }
     watchQuote(value) {
         quoteProp.apply(value, (v) => {
             this.setProp('quote', v);
-        });
+        }, '');
     }
     watchVariant(value) {
         variantQuoteProp.apply(value, (v) => {
             this.setProp('variant', v);
-        });
+        }, 'inline');
     }
 }
 
@@ -29112,10 +29069,7 @@ const SkeletonFC = (props) => {
 
 class SkeletonController extends BaseController {
     constructor(states) {
-        super(states, {
-            count: 0,
-            name: '',
-        });
+        super(states);
         this.onKeydown = (event) => {
             if (event.key === 'Escape') {
                 console.log('Show should be toggled');
@@ -29124,9 +29078,8 @@ class SkeletonController extends BaseController {
         };
         this.handleClick = () => {
             Log.debug('Button clicked, count should be increased');
-            const { count } = this.getProps();
+            const { count } = this.component;
             const nextCount = count + 1;
-            this.setProp('count', nextCount);
             this.setState('count', nextCount);
         };
         this.setButtonRef = (element) => {
@@ -29136,30 +29089,16 @@ class SkeletonController extends BaseController {
         this.startLoadedEventInterval();
     }
     componentWillLoad(props) {
-        const { count, name } = props;
-        this.watchCount(count);
+        const { name } = props;
         this.watchName(name);
-        this.watchLabel(this.component.label);
         this.clickButtonCtrl.componentWillLoad({
             label: this.component.label,
         });
     }
-    watchCount(value) {
-        countProp.apply(value, (v) => {
-            this.setProp('count', v);
-            this.setState('count', v);
-        });
-    }
     watchName(value) {
         nameProp.apply(value, (v) => {
             this.setProp('name', v);
-        });
-    }
-    watchLabel(value) {
-        labelProp.apply(value, (v) => {
-            this.setState('label', v);
-            this.clickButtonCtrl.watchLabel(v);
-        });
+        }, '');
     }
     toggle() {
         this.setState('show', !this.component.show);
@@ -29169,7 +29108,7 @@ class SkeletonController extends BaseController {
     }
     startLoadedEventInterval() {
         this.intervalId = setInterval(() => {
-            const { count } = this.getProps();
+            const { count } = this.component;
             this.emitLoaded(count);
         }, 2000);
     }
@@ -29195,9 +29134,9 @@ class KolSkeleton {
         this.loaded = createEvent(this, "loaded");
         this.rendered = createEvent(this, "rendered");
         this.ctrl = new SkeletonController(this);
+        this.count = 0;
         this.label = 'Label';
         this.show = true;
-        this.count = 0;
     }
     async focus() {
         return Promise.resolve(this.ctrl.focus());
@@ -29205,9 +29144,6 @@ class KolSkeleton {
     async toggle() {
         return Promise.resolve(this.ctrl.toggle());
     }
-    watchCount(value) {
-        this.ctrl.watchCount(value);
-    }
     watchName(value) {
         this.ctrl.watchName(value);
     }
@@ -29222,7 +29158,6 @@ class KolSkeleton {
     }
     componentWillLoad() {
         this.ctrl.componentWillLoad({
-            count: this._count,
             name: this._name,
         });
         this.ctrl.setOnLoadedCallback((count) => {
@@ -29238,23 +29173,21 @@ class KolSkeleton {
         this.ctrl.destroy();
     }
     render() {
-        const { count, name } = this.ctrl.getProps();
-        const { label, show } = this;
-        return (hAsync(Host, { key: '6358ec20f7531a0a536b84c0a1dd2f54e6b2bf7a' }, hAsync(SkeletonFC, { key: '715b10c0aa93c24425c55b01a737d1950128225f', count: count, label: label, name: name, handleClick: () => this.ctrl.handleClick(), onLoaded: this.loaded, onRendered: this.rendered, show: show, refButton: (element) => this.ctrl.setButtonRef(element) })));
+        const { name } = this.ctrl.getProps();
+        const { count, label, show } = this;
+        return (hAsync(Host, { key: '5f1160b2f3d269b6db7a26a01c73669d39410cfc' }, hAsync(SkeletonFC, { key: 'dd668006b85713834366c4831105f7f047c6797b', count: count, label: label, name: name, handleClick: () => this.ctrl.handleClick(), onLoaded: this.loaded, onRendered: this.rendered, show: show, refButton: (element) => this.ctrl.setButtonRef(element) })));
     }
     static get watchers() { return {
-        "_count": ["watchCount"],
         "_name": ["watchName"]
     }; }
     static get cmpMeta() { return {
         "$flags$": 265,
         "$tagName$": "kol-skeleton",
         "$members$": {
-            "_count": [8],
             "_name": [1],
+            "count": [32],
             "label": [32],
             "show": [32],
-            "count": [32],
             "focus": [64],
             "toggle": [64]
         },
@@ -30057,6 +29990,7 @@ let KolTableStateless$1 = class KolTableStateless {
     }; }
 };
 
+const RESIZE_DEBOUNCE_DELAY = 150;
 class KolTableStateless {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -30079,6 +30013,7 @@ class KolTableStateless {
         this.maxCols = 0;
         this.fixedOffsets = [];
         this.tableDivElementHasScrollbar = false;
+        this.stickyColsDisabled = false;
         this.renderTableRow = (row, rowIndex, isVertical, isFooter = false) => {
             var _a, _b;
             let key = String(rowIndex);
@@ -30154,6 +30089,7 @@ class KolTableStateless {
     }
     validateFixedCols(value) {
         validateFixedCols(this, value);
+        this.checkAndUpdateStickyState();
     }
     validateHeaderCells(value) {
         validateTableHeaderCells(this, value);
@@ -30172,6 +30108,7 @@ class KolTableStateless {
     }
     validateSelection(value) {
         validateTableSelection(this, value);
+        this.checkAndUpdateStickyState();
     }
     handleKeyDown(event) {
         var _a;
@@ -30197,9 +30134,10 @@ class KolTableStateless {
     }
     componentDidLoad() {
         if (this.tableDivElement && ResizeObserver) {
-            this.tableDivElementResizeObserver = new ResizeObserver(this.checkDivElementScrollbar.bind(this));
+            this.tableDivElementResizeObserver = new ResizeObserver(this.handleResize.bind(this));
             this.tableDivElementResizeObserver.observe(this.tableDivElement);
         }
+        this.checkAndUpdateStickyState();
     }
     handleSettingsChange(event) {
         var _a;
@@ -30212,12 +30150,48 @@ class KolTableStateless {
     disconnectedCallback() {
         var _a;
         (_a = this.tableDivElementResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        clearTimeout(this.resizeDebounceTimeout);
+    }
+    handleResize() {
+        this.checkDivElementScrollbar();
+        clearTimeout(this.resizeDebounceTimeout);
+        this.resizeDebounceTimeout = setTimeout(() => {
+            this.checkAndUpdateStickyState();
+        }, RESIZE_DEBOUNCE_DELAY);
     }
     checkDivElementScrollbar() {
         if (this.tableDivElement) {
             this.tableDivElementHasScrollbar = this.tableDivElement.scrollWidth > this.tableDivElement.clientWidth;
         }
     }
+    calculateFixedColsWidth() {
+        var _a, _b, _c, _d, _e, _f;
+        if (!this._fixedCols)
+            return 0;
+        const primaryHeader = this.getPrimaryHeaders(this.state._headerCells);
+        let totalWidth = 0;
+        for (let i = 0; i < this._fixedCols[0] && i < primaryHeader.length; i++) {
+            totalWidth += (_b = (_a = primaryHeader[i]) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0;
+        }
+        const startRight = this.maxCols - this._fixedCols[1];
+        for (let i = startRight; i < this.maxCols && i < primaryHeader.length; i++) {
+            totalWidth += (_d = (_c = primaryHeader[i]) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : 0;
+        }
+        if (this.state._selection) {
+            const selectionCell = (_e = this.tableDivElement) === null || _e === void 0 ? void 0 : _e.querySelector('.kol-table__cell--selection');
+            totalWidth += (_f = selectionCell === null || selectionCell === void 0 ? void 0 : selectionCell.offsetWidth) !== null && _f !== void 0 ? _f : 0;
+        }
+        return totalWidth;
+    }
+    checkAndUpdateStickyState() {
+        if (!this.tableDivElement || !this._fixedCols) {
+            this.stickyColsDisabled = false;
+            return;
+        }
+        const containerWidth = this.tableDivElement.clientWidth;
+        const fixedColsWidth = this.calculateFixedColsWidth();
+        this.stickyColsDisabled = fixedColsWidth > 0 && fixedColsWidth >= containerWidth;
+    }
     updateDataToKeyMap(data) {
         data.forEach((data) => {
             if (!this.dataToKeyMap.has(data)) {
@@ -30437,7 +30411,7 @@ class KolTableStateless {
         return dataField;
     }
     isFixedCol(index) {
-        if (!this._fixedCols || index === undefined) {
+        if (!this._fixedCols || index === undefined || this.stickyColsDisabled) {
             return undefined;
         }
         if (index < this._fixedCols[0]) {
@@ -30724,12 +30698,12 @@ class KolTableStateless {
         const dataField = this.createDataField(this.state._data, this.state._headerCells);
         this.checkboxRefs = [];
         const horizontalHeaders = this.state._headerCells.horizontal;
-        return (hAsync("div", { key: '1edebcb9f54def1e78b9f5d0c769c1ed96f8193e', class: "kol-table" }, this.state._hasSettingsMenu && hAsync(KolTableSettingsWcTag, { key: '1e4b9861b95aff0f199712033a4ae5939d9c007a', _horizontalHeaderCells: horizontalHeaders !== null && horizontalHeaders !== void 0 ? horizontalHeaders : [] }), hAsync("div", { key: 'db82c1855fdda4d2c65ed50416cf81823db72b3e', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '634d3173c119cf21bbf611deb86f3d4503ece9aa', class: "kol-table__table", style: {
+        return (hAsync("div", { key: '5ddf10f82b6aeef72bae63ff222daac7e9cb76c2', class: "kol-table" }, this.state._hasSettingsMenu && hAsync(KolTableSettingsWcTag, { key: '35dc658b20b20949fb2a2c251243b1868e23fff1', _horizontalHeaderCells: horizontalHeaders !== null && horizontalHeaders !== void 0 ? horizontalHeaders : [] }), hAsync("div", { key: 'da2904a5dacc000f911eaef29cc6f01ba31fb418', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '1529eb6a1d029c1df0942f244b3dac52fc937bbc', class: "kol-table__table", style: {
                 minWidth: this.getTableMinWidth(),
-            } }, hAsync("caption", { key: '33f1bae75a0424ea8c0168b9d1ad0a79b441da33', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(horizontalHeaders) && (hAsync("thead", { key: '217ea984ab0fd2a26cd6b0d156fdeffe8661626b', class: "kol-table__head" }, [
+            } }, hAsync("caption", { key: '1cf7ded256d54d7c7fb05a0366a888f51149dc1c', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(horizontalHeaders) && (hAsync("thead", { key: '4ea94abfaba71e502d3cbcfc5c56ad9945944df2', class: "kol-table__head" }, [
             horizontalHeaders.map((cols, rowIndex) => (hAsync("tr", { class: "kol-table__head-row", key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) && cols.map((cell, colIndex) => this.renderHeadingCell(cell, rowIndex, colIndex, false))))),
             this.renderSpacer('head', horizontalHeaders),
-        ])), hAsync("tbody", { key: '84e65718ccdd6b4bec909fdd5c21c53aa72c1a59', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
+        ])), hAsync("tbody", { key: '956ba95c28f4593fe01d94c6191002d4b105d0f1', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -30756,6 +30730,7 @@ class KolTableStateless {
             "_hasSettingsMenu": [4, "_has-settings-menu"],
             "state": [32],
             "tableDivElementHasScrollbar": [32],
+            "stickyColsDisabled": [32],
             "previousHeaderCells": [32]
         },
         "$listeners$": [[0, "keydown", "handleKeyDown"], [0, "changeheadercells", "handleSettingsChange"]],

package/dist/index.mjs

@@ -144,7 +144,7 @@ function _mergeNamespaces(n, m) {
 
 const NAMESPACE = 'kolibri';
 const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
-const Env = /* kolibri */ {"kolibriVersion":"4.1.1-rc.2"};
+const Env = /* kolibri */ {"kolibriVersion":"4.1.1"};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -6922,7 +6922,13 @@ function createPropDefinition(normalize, validate = () => true) {
     return {
         normalize,
         validate,
-        apply(value, callback) {
+        apply(value, callback, defaultValue) {
+            if (value === undefined || value === null) {
+                if (defaultValue !== undefined) {
+                    callback(defaultValue);
+                }
+                return;
+            }
             try {
                 const normalized = this.normalize(value);
                 if (this.validate(normalized)) {
@@ -6939,7 +6945,13 @@ function createDependentPropDefinition(normalize, validate = () => true) {
     return {
         normalize,
         validate,
-        apply(value, callback, deps) {
+        apply(value, callback, deps, defaultValue) {
+            if (value === undefined || value === null) {
+                if (defaultValue !== undefined) {
+                    callback(defaultValue);
+                }
+                return;
+            }
             try {
                 const normalized = this.normalize(value, deps);
                 if (this.validate(normalized, deps)) {
@@ -6962,18 +6974,6 @@ function normalizeString(value) {
     }
     throw new Error(`Invalid string: ${value}`);
 }
-function normalizeInteger(value) {
-    if (typeof value === 'number') {
-        return Number.isInteger(value) ? value : Math.round(value);
-    }
-    if (typeof value === 'string') {
-        const parsed = parseInt(value, 10);
-        if (!isNaN(parsed)) {
-            return parsed;
-        }
-    }
-    throw new Error(`Invalid integer: ${value}`);
-}
 function normalizeNumber(value) {
     if (typeof value === 'number') {
         return value;
@@ -7024,30 +7024,8 @@ function validator(value) {
 }
 const colorProp = createPropDefinition(normalizer, validator);
 
-const countProp = createPropDefinition(normalizeInteger, (v) => v >= 0);
-
 const hrefProp = createPropDefinition(normalizeString, (v) => v.length > 0);
 
-const formatNameAsInitial = (name) => {
-    if (name.length === 0) {
-        return '';
-    }
-    return name[0].toUpperCase();
-};
-const normalizeInitials = (value) => {
-    if (typeof value !== 'string') {
-        throw new Error(`Invalid initials value: ${JSON.stringify(value)}`);
-    }
-    const names = value.trim().split(/\s+/);
-    const first = names[0];
-    const last = names[names.length - 1];
-    if (names.length >= 2 && first && last) {
-        return `${formatNameAsInitial(first)}${formatNameAsInitial(last)}`;
-    }
-    return formatNameAsInitial(value);
-};
-const initialsProp = createPropDefinition(normalizeInitials, (v) => v.length > 0);
-
 const labelProp = createPropDefinition(normalizeString, (v) => v.length >= 2 && v.length <= 80);
 
 const LOADING_OPTIONS = ['eager', 'lazy'];
@@ -7093,9 +7071,10 @@ const QUOTE_VARIANT_SET = new Set(QUOTE_VARIANT_OPTIONS);
 const variantQuoteProp = createPropDefinition((value) => normalizeString(value), (v) => QUOTE_VARIANT_SET.has(v));
 
 class BaseController {
-    constructor(component, props) {
+    constructor(component = {}) {
         this.component = component;
-        this.props = props;
+        this.props = {};
+        this.rawProps = {};
     }
     setProp(key, value) {
         this.props[key] = value;
@@ -7103,19 +7082,33 @@ class BaseController {
     getProps() {
         return this.props;
     }
+    setRawProp(key, value) {
+        this.rawProps[key] = value;
+    }
+    getRawProps() {
+        return this.rawProps;
+    }
     setState(key, value) {
         this.component[key] = value;
     }
 }
 
-class AvatarController extends BaseController {
-    constructor(states) {
-        super(states, {
-            color: { backgroundColor: '#d3d3d3', foregroundColor: '#3f3f3f' },
-            label: '',
-            src: '',
-        });
+const formatNameAsInitial = (name) => {
+    if (name.length === 0) {
+        return '';
     }
+    return name[0].toUpperCase();
+};
+const normalizeInitials = (value) => {
+    const names = value.trim().split(/\s+/);
+    const first = names[0];
+    const last = names[names.length - 1];
+    if (names.length >= 2 && first && last) {
+        return `${formatNameAsInitial(first)}${formatNameAsInitial(last)}`;
+    }
+    return formatNameAsInitial(value);
+};
+class AvatarController extends BaseController {
     componentWillLoad(props) {
         const { color, label, src } = props;
         this.watchColor(color);
@@ -7125,20 +7118,21 @@ class AvatarController extends BaseController {
     watchColor(value) {
         colorProp.apply(value, (v) => {
             this.setProp('color', v);
+        }, {
+            backgroundColor: '#d3d3d3',
+            foregroundColor: '#3f3f3f',
         });
     }
     watchLabel(value) {
         labelProp.apply(value, (v) => {
             this.setProp('label', v);
-        });
-        initialsProp.apply(value, (v) => {
-            this.setState('initials', v);
-        });
+            this.setState('initials', normalizeInitials(v));
+        }, '');
     }
     watchSrc(value) {
         srcProp.apply(value, (v) => {
             this.setProp('src', v);
-        });
+        }, '');
     }
 }
 
@@ -19645,10 +19639,8 @@ const BEM_CLASS_CLICK_BUTTON__LABEL = clickButtonBem('label');
 const ClickButtonFC = ({ label, handleClick, refButton }) => (hAsync("button", { class: BEM_CLASS_CLICK_BUTTON, ref: refButton, onClick: handleClick, onKeyDown: (event) => event.preventDefault() }, hAsync("span", { class: BEM_CLASS_CLICK_BUTTON__LABEL }, label)));
 
 class ClickButtonController extends BaseController {
-    constructor(states = {}) {
-        super(states, {
-            label: '',
-        });
+    constructor() {
+        super(...arguments);
         this.handleClick = () => {
             console.log(this, this.buttonRef, 'button clicked');
         };
@@ -19663,7 +19655,7 @@ class ClickButtonController extends BaseController {
     watchLabel(value) {
         labelProp.apply(value, (v) => {
             this.setProp('label', v);
-        });
+        }, '');
     }
     focus() {
         var _a;
@@ -21232,7 +21224,7 @@ const bem = c();
 const BEM_CLASS_ICON = bem('kol-icon');
 const BEM_CLASS_ICON__ICON = bem('kol-icon', 'icon');
 
-const defaultStyleCss$y = "/* forward the rem function */\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1772813649030\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1772813649030#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1772813649030\") format(\"woff2\"), url(\"kolicons.woff?t=1772813649030\") format(\"woff\"), url(\"kolicons.ttf?t=1772813649030\") format(\"truetype\"), url(\"kolicons.svg?t=1772813649030#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-size: inherit;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  /* :host implicitly inherits font-size, see below */\n  :host {\n    color: inherit;\n    display: contents;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n}";
+const defaultStyleCss$y = "/* forward the rem function */\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1773045157587\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1773045157587#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773045157587\") format(\"woff2\"), url(\"kolicons.woff?t=1773045157587\") format(\"woff\"), url(\"kolicons.ttf?t=1773045157587\") format(\"truetype\"), url(\"kolicons.svg?t=1773045157587#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n  font-family: \"kolicons\";\n  font-size: inherit;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n  content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n  content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n  content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n  content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n  content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n  content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n  content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n  content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n  content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n  content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n  content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n  content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n  content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n  content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n  content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n  content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n  content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n  content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n  content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n  content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n  content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n  content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n  content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n  content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n  content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n  content: \"\\ea1b\";\n}\n\n@layer kol-component {\n  /* :host implicitly inherits font-size, see below */\n  :host {\n    color: inherit;\n    display: contents;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n}";
 
 class KolIcon {
     render() {
@@ -21283,15 +21275,6 @@ const ImageFC = (props) => {
 };
 
 class ImageController extends BaseController {
-    constructor(states = {}) {
-        super(states, {
-            alt: '',
-            loading: 'lazy',
-            sizes: '',
-            src: '',
-            srcset: '',
-        });
-    }
     componentWillLoad(props) {
         const { alt, loading, sizes, src, srcset } = props;
         this.watchAlt(alt);
@@ -21303,27 +21286,27 @@ class ImageController extends BaseController {
     watchAlt(value) {
         altProp.apply(value, (v) => {
             this.setProp('alt', v);
-        });
+        }, '');
     }
     watchLoading(value) {
         loadingProp.apply(value, (v) => {
             this.setProp('loading', v);
-        });
+        }, 'lazy');
     }
     watchSizes(value) {
         sizesProp.apply(value, (v) => {
             this.setProp('sizes', v);
-        });
+        }, '');
     }
     watchSrc(value) {
         srcProp.apply(value, (v) => {
             this.setProp('src', v);
-        });
+        }, '');
     }
     watchSrcset(value) {
         srcsetProp.apply(value, (v) => {
             this.setProp('srcset', v);
-        });
+        }, '');
     }
 }
 
@@ -27795,15 +27778,6 @@ const ProgressFC = (props) => {
 };
 
 class ProgressController extends BaseController {
-    constructor(states) {
-        super(states, {
-            label: '',
-            max: 100,
-            unit: '%',
-            value: 0,
-            variant: 'bar',
-        });
-    }
     componentWillLoad(props) {
         const { label, max, unit, value, variant } = props;
         this.watchLabel(label);
@@ -27812,37 +27786,34 @@ class ProgressController extends BaseController {
         this.watchValue(value);
         this.watchVariant(variant);
         this.setState('liveValue', this.getProps().value);
-        this.setState('max', this.getProps().max);
         this.startLiveValueInterval();
     }
     watchLabel(value) {
         labelProp.apply(value, (v) => {
             this.setProp('label', v);
-        });
+        }, '');
     }
     watchMax(value) {
         maxProp.apply(value, (v) => {
             this.setProp('max', v);
-            this.setState('max', v);
-        });
-        this.watchValue(this.getProps().value);
+            this.watchValue(this.getRawProps().value);
+        }, 100);
     }
     watchUnit(value) {
         unitProp.apply(value, (v) => {
             this.setProp('unit', v);
-            this.setState('unit', v);
-        });
+        }, '%');
     }
     watchValue(value) {
+        this.setRawProp('value', value);
         clampedNumberValueProp.apply(value, (v) => {
             this.setProp('value', v);
-        }, { min: 0, max: this.getProps().max });
+        }, { min: 0, max: this.getProps().max }, 0);
     }
     watchVariant(value) {
         variantProgressProp.apply(value, (v) => {
             this.setProp('variant', v);
-            this.setState('variant', v);
-        });
+        }, 'bar');
     }
     startLiveValueInterval() {
         this.interval = setInterval(() => {
@@ -27866,10 +27837,7 @@ class KolProgress {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ctrl = new ProgressController(this);
-        this.unit = '%';
-        this.variant = 'bar';
         this.liveValue = 0;
-        this.max = this._max;
     }
     watchLabel(value) {
         this.ctrl.watchLabel(value);
@@ -27901,7 +27869,7 @@ class KolProgress {
     render() {
         const { label, max, unit, value, variant } = this.ctrl.getProps();
         const { liveValue } = this;
-        return (hAsync(Host, { key: 'c101389f829d2be6f356a198fff8a557d6bcac46' }, hAsync(ProgressFC, { key: '805ea44845b7fb33b5e993b9dd4f5b2848933d7b', label: label, max: max, unit: unit, value: value, variant: variant, liveValue: liveValue })));
+        return (hAsync(Host, { key: '3e780e20fdf0435675aa4139a34784d335b8ca0d' }, hAsync(ProgressFC, { key: '7c57e3c56ada9b13315f48565c9de2efa580b196', label: label, max: max, unit: unit, value: value, variant: variant, liveValue: liveValue })));
     }
     static get watchers() { return {
         "_label": ["watchLabel"],
@@ -27922,10 +27890,7 @@ class KolProgress {
             "_unit": [1],
             "_value": [2],
             "_variant": [1],
-            "unit": [32],
-            "variant": [32],
-            "liveValue": [32],
-            "max": [32]
+            "liveValue": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -27946,14 +27911,6 @@ const QuoteFC = (props) => {
 };
 
 class QuoteController extends BaseController {
-    constructor() {
-        super({}, {
-            href: '',
-            label: '',
-            quote: '',
-            variant: 'inline',
-        });
-    }
     componentWillLoad(props) {
         const { href, label, quote, variant } = props;
         this.watchHref(href);
@@ -27964,22 +27921,22 @@ class QuoteController extends BaseController {
     watchHref(value) {
         hrefProp.apply(value, (v) => {
             this.setProp('href', v);
-        });
+        }, '');
     }
     watchLabel(value) {
         labelProp.apply(value, (v) => {
             this.setProp('label', v);
-        });
+        }, '');
     }
     watchQuote(value) {
         quoteProp.apply(value, (v) => {
             this.setProp('quote', v);
-        });
+        }, '');
     }
     watchVariant(value) {
         variantQuoteProp.apply(value, (v) => {
             this.setProp('variant', v);
-        });
+        }, 'inline');
     }
 }
 
@@ -29110,10 +29067,7 @@ const SkeletonFC = (props) => {
 
 class SkeletonController extends BaseController {
     constructor(states) {
-        super(states, {
-            count: 0,
-            name: '',
-        });
+        super(states);
         this.onKeydown = (event) => {
             if (event.key === 'Escape') {
                 console.log('Show should be toggled');
@@ -29122,9 +29076,8 @@ class SkeletonController extends BaseController {
         };
         this.handleClick = () => {
             Log.debug('Button clicked, count should be increased');
-            const { count } = this.getProps();
+            const { count } = this.component;
             const nextCount = count + 1;
-            this.setProp('count', nextCount);
             this.setState('count', nextCount);
         };
         this.setButtonRef = (element) => {
@@ -29134,30 +29087,16 @@ class SkeletonController extends BaseController {
         this.startLoadedEventInterval();
     }
     componentWillLoad(props) {
-        const { count, name } = props;
-        this.watchCount(count);
+        const { name } = props;
         this.watchName(name);
-        this.watchLabel(this.component.label);
         this.clickButtonCtrl.componentWillLoad({
             label: this.component.label,
         });
     }
-    watchCount(value) {
-        countProp.apply(value, (v) => {
-            this.setProp('count', v);
-            this.setState('count', v);
-        });
-    }
     watchName(value) {
         nameProp.apply(value, (v) => {
             this.setProp('name', v);
-        });
-    }
-    watchLabel(value) {
-        labelProp.apply(value, (v) => {
-            this.setState('label', v);
-            this.clickButtonCtrl.watchLabel(v);
-        });
+        }, '');
     }
     toggle() {
         this.setState('show', !this.component.show);
@@ -29167,7 +29106,7 @@ class SkeletonController extends BaseController {
     }
     startLoadedEventInterval() {
         this.intervalId = setInterval(() => {
-            const { count } = this.getProps();
+            const { count } = this.component;
             this.emitLoaded(count);
         }, 2000);
     }
@@ -29193,9 +29132,9 @@ class KolSkeleton {
         this.loaded = createEvent(this, "loaded");
         this.rendered = createEvent(this, "rendered");
         this.ctrl = new SkeletonController(this);
+        this.count = 0;
         this.label = 'Label';
         this.show = true;
-        this.count = 0;
     }
     async focus() {
         return Promise.resolve(this.ctrl.focus());
@@ -29203,9 +29142,6 @@ class KolSkeleton {
     async toggle() {
         return Promise.resolve(this.ctrl.toggle());
     }
-    watchCount(value) {
-        this.ctrl.watchCount(value);
-    }
     watchName(value) {
         this.ctrl.watchName(value);
     }
@@ -29220,7 +29156,6 @@ class KolSkeleton {
     }
     componentWillLoad() {
         this.ctrl.componentWillLoad({
-            count: this._count,
             name: this._name,
         });
         this.ctrl.setOnLoadedCallback((count) => {
@@ -29236,23 +29171,21 @@ class KolSkeleton {
         this.ctrl.destroy();
     }
     render() {
-        const { count, name } = this.ctrl.getProps();
-        const { label, show } = this;
-        return (hAsync(Host, { key: '6358ec20f7531a0a536b84c0a1dd2f54e6b2bf7a' }, hAsync(SkeletonFC, { key: '715b10c0aa93c24425c55b01a737d1950128225f', count: count, label: label, name: name, handleClick: () => this.ctrl.handleClick(), onLoaded: this.loaded, onRendered: this.rendered, show: show, refButton: (element) => this.ctrl.setButtonRef(element) })));
+        const { name } = this.ctrl.getProps();
+        const { count, label, show } = this;
+        return (hAsync(Host, { key: '5f1160b2f3d269b6db7a26a01c73669d39410cfc' }, hAsync(SkeletonFC, { key: 'dd668006b85713834366c4831105f7f047c6797b', count: count, label: label, name: name, handleClick: () => this.ctrl.handleClick(), onLoaded: this.loaded, onRendered: this.rendered, show: show, refButton: (element) => this.ctrl.setButtonRef(element) })));
     }
     static get watchers() { return {
-        "_count": ["watchCount"],
         "_name": ["watchName"]
     }; }
     static get cmpMeta() { return {
         "$flags$": 265,
         "$tagName$": "kol-skeleton",
         "$members$": {
-            "_count": [8],
             "_name": [1],
+            "count": [32],
             "label": [32],
             "show": [32],
-            "count": [32],
             "focus": [64],
             "toggle": [64]
         },
@@ -30055,6 +29988,7 @@ let KolTableStateless$1 = class KolTableStateless {
     }; }
 };
 
+const RESIZE_DEBOUNCE_DELAY = 150;
 class KolTableStateless {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -30077,6 +30011,7 @@ class KolTableStateless {
         this.maxCols = 0;
         this.fixedOffsets = [];
         this.tableDivElementHasScrollbar = false;
+        this.stickyColsDisabled = false;
         this.renderTableRow = (row, rowIndex, isVertical, isFooter = false) => {
             var _a, _b;
             let key = String(rowIndex);
@@ -30152,6 +30087,7 @@ class KolTableStateless {
     }
     validateFixedCols(value) {
         validateFixedCols(this, value);
+        this.checkAndUpdateStickyState();
     }
     validateHeaderCells(value) {
         validateTableHeaderCells(this, value);
@@ -30170,6 +30106,7 @@ class KolTableStateless {
     }
     validateSelection(value) {
         validateTableSelection(this, value);
+        this.checkAndUpdateStickyState();
     }
     handleKeyDown(event) {
         var _a;
@@ -30195,9 +30132,10 @@ class KolTableStateless {
     }
     componentDidLoad() {
         if (this.tableDivElement && ResizeObserver) {
-            this.tableDivElementResizeObserver = new ResizeObserver(this.checkDivElementScrollbar.bind(this));
+            this.tableDivElementResizeObserver = new ResizeObserver(this.handleResize.bind(this));
             this.tableDivElementResizeObserver.observe(this.tableDivElement);
         }
+        this.checkAndUpdateStickyState();
     }
     handleSettingsChange(event) {
         var _a;
@@ -30210,12 +30148,48 @@ class KolTableStateless {
     disconnectedCallback() {
         var _a;
         (_a = this.tableDivElementResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        clearTimeout(this.resizeDebounceTimeout);
+    }
+    handleResize() {
+        this.checkDivElementScrollbar();
+        clearTimeout(this.resizeDebounceTimeout);
+        this.resizeDebounceTimeout = setTimeout(() => {
+            this.checkAndUpdateStickyState();
+        }, RESIZE_DEBOUNCE_DELAY);
     }
     checkDivElementScrollbar() {
         if (this.tableDivElement) {
             this.tableDivElementHasScrollbar = this.tableDivElement.scrollWidth > this.tableDivElement.clientWidth;
         }
     }
+    calculateFixedColsWidth() {
+        var _a, _b, _c, _d, _e, _f;
+        if (!this._fixedCols)
+            return 0;
+        const primaryHeader = this.getPrimaryHeaders(this.state._headerCells);
+        let totalWidth = 0;
+        for (let i = 0; i < this._fixedCols[0] && i < primaryHeader.length; i++) {
+            totalWidth += (_b = (_a = primaryHeader[i]) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0;
+        }
+        const startRight = this.maxCols - this._fixedCols[1];
+        for (let i = startRight; i < this.maxCols && i < primaryHeader.length; i++) {
+            totalWidth += (_d = (_c = primaryHeader[i]) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : 0;
+        }
+        if (this.state._selection) {
+            const selectionCell = (_e = this.tableDivElement) === null || _e === void 0 ? void 0 : _e.querySelector('.kol-table__cell--selection');
+            totalWidth += (_f = selectionCell === null || selectionCell === void 0 ? void 0 : selectionCell.offsetWidth) !== null && _f !== void 0 ? _f : 0;
+        }
+        return totalWidth;
+    }
+    checkAndUpdateStickyState() {
+        if (!this.tableDivElement || !this._fixedCols) {
+            this.stickyColsDisabled = false;
+            return;
+        }
+        const containerWidth = this.tableDivElement.clientWidth;
+        const fixedColsWidth = this.calculateFixedColsWidth();
+        this.stickyColsDisabled = fixedColsWidth > 0 && fixedColsWidth >= containerWidth;
+    }
     updateDataToKeyMap(data) {
         data.forEach((data) => {
             if (!this.dataToKeyMap.has(data)) {
@@ -30435,7 +30409,7 @@ class KolTableStateless {
         return dataField;
     }
     isFixedCol(index) {
-        if (!this._fixedCols || index === undefined) {
+        if (!this._fixedCols || index === undefined || this.stickyColsDisabled) {
             return undefined;
         }
         if (index < this._fixedCols[0]) {
@@ -30722,12 +30696,12 @@ class KolTableStateless {
         const dataField = this.createDataField(this.state._data, this.state._headerCells);
         this.checkboxRefs = [];
         const horizontalHeaders = this.state._headerCells.horizontal;
-        return (hAsync("div", { key: '1edebcb9f54def1e78b9f5d0c769c1ed96f8193e', class: "kol-table" }, this.state._hasSettingsMenu && hAsync(KolTableSettingsWcTag, { key: '1e4b9861b95aff0f199712033a4ae5939d9c007a', _horizontalHeaderCells: horizontalHeaders !== null && horizontalHeaders !== void 0 ? horizontalHeaders : [] }), hAsync("div", { key: 'db82c1855fdda4d2c65ed50416cf81823db72b3e', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '634d3173c119cf21bbf611deb86f3d4503ece9aa', class: "kol-table__table", style: {
+        return (hAsync("div", { key: '5ddf10f82b6aeef72bae63ff222daac7e9cb76c2', class: "kol-table" }, this.state._hasSettingsMenu && hAsync(KolTableSettingsWcTag, { key: '35dc658b20b20949fb2a2c251243b1868e23fff1', _horizontalHeaderCells: horizontalHeaders !== null && horizontalHeaders !== void 0 ? horizontalHeaders : [] }), hAsync("div", { key: 'da2904a5dacc000f911eaef29cc6f01ba31fb418', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '1529eb6a1d029c1df0942f244b3dac52fc937bbc', class: "kol-table__table", style: {
                 minWidth: this.getTableMinWidth(),
-            } }, hAsync("caption", { key: '33f1bae75a0424ea8c0168b9d1ad0a79b441da33', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(horizontalHeaders) && (hAsync("thead", { key: '217ea984ab0fd2a26cd6b0d156fdeffe8661626b', class: "kol-table__head" }, [
+            } }, hAsync("caption", { key: '1cf7ded256d54d7c7fb05a0366a888f51149dc1c', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(horizontalHeaders) && (hAsync("thead", { key: '4ea94abfaba71e502d3cbcfc5c56ad9945944df2', class: "kol-table__head" }, [
             horizontalHeaders.map((cols, rowIndex) => (hAsync("tr", { class: "kol-table__head-row", key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) && cols.map((cell, colIndex) => this.renderHeadingCell(cell, rowIndex, colIndex, false))))),
             this.renderSpacer('head', horizontalHeaders),
-        ])), hAsync("tbody", { key: '84e65718ccdd6b4bec909fdd5c21c53aa72c1a59', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
+        ])), hAsync("tbody", { key: '956ba95c28f4593fe01d94c6191002d4b105d0f1', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -30754,6 +30728,7 @@ class KolTableStateless {
             "_hasSettingsMenu": [4, "_has-settings-menu"],
             "state": [32],
             "tableDivElementHasScrollbar": [32],
+            "stickyColsDisabled": [32],
             "previousHeaderCells": [32]
         },
         "$listeners$": [[0, "keydown", "handleKeyDown"], [0, "changeheadercells", "handleSettingsChange"]],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/hydrate",
-  "version": "4.1.1-rc.2",
+  "version": "4.1.1",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -52,7 +52,7 @@
     "prettier": "3.8.1",
     "prettier-plugin-organize-imports": "4.3.0",
     "rimraf": "6.1.3",
-    "@public-ui/components": "4.1.1-rc.2"
+    "@public-ui/components": "4.1.1"
   },
   "sideEffects": false,
   "type": "commonjs",