@public-ui/components 4.3.1-rc.5 → 4.4.0

package/dist/collection/components/popover-button/style.css

@@ -9,8 +9,10 @@
 * 3. kol-component - Component-specific styles
 * 4. kol-theme-global - Theme-specific global styles
 * 5. kol-theme-component - Theme-specific component styles
+* 6. kol-forced-colors - Defaults for forced colors and high contrast modes
+* 7. kol-theme-forced-colors - Theme-specific styles for forced colors and high contrast modes
 */
-@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;
+@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component, kol-forced-colors, kol-theme-forced-colors;
 /* forward the rem function */
 /*
  * This file contains all rules for accessibility.
@@ -128,6 +130,44 @@
     clip-path: inset(50%);
   }
 }
+/*
+ * This file contains all rules for forced-colors and highcontrast modes
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color to see all color keywords the browsers are providing
+ */
+@layer kol-forced-colors {
+  @media (forced-colors: active) {
+    .kol-button__text {
+      color: ButtonText;
+      background-color: ButtonFace;
+      border: 2px solid ButtonBorder;
+    }
+    .kol-button--disabled .kol-button__text {
+      color: GrayText;
+      border-color: GrayText;
+    }
+    .kol-card,
+    .kol-dialog,
+    .kol-modal,
+    .kol-drawer {
+      color: CanvasText;
+      background-color: Canvas;
+      border: 1px solid ButtonBorder;
+    }
+    .kol-pagination__button--selected .kol-button {
+      opacity: 1;
+    }
+    .kol-pagination__button--selected .kol-button__text {
+      color: SelectedItemText;
+      background-color: SelectedItem;
+    }
+    /* focus styles */
+    .kol-button:focus-visible,
+    .kol-link__anchor:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
+}
 @layer kol-global {
   /*
    * Dieses CSS stellt sicher, dass der Standard-Style
@@ -210,8 +250,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1788342613987"); /* IE9*/
-  src: url("kolicons.eot?t=1788342613987#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1788342613987") format("woff2"), url("kolicons.woff?t=1788342613987") format("woff"), url("kolicons.ttf?t=1788342613987") format("truetype"), url("kolicons.svg?t=1788342613987#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1788937554327"); /* IE9*/
+  src: url("kolicons.eot?t=1788937554327#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1788937554327") format("woff2"), url("kolicons.woff?t=1788937554327") format("woff"), url("kolicons.ttf?t=1788937554327") format("truetype"), url("kolicons.svg?t=1788937554327#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

package/dist/collection/components/progress/component.js

@@ -58,7 +58,7 @@ export class KolProgress extends BaseWebComponent {
         }, 5000);
     }
     render() {
-        return (h(Host, { key: 'bdd114c86bcb233071f24011cb4b0df96ba051e5' }, h(ProgressFC, { key: '86dcdf9581285e8f8bcd1922858f9d80c4d64d52', label: this.getRenderProp('label'), max: this.getRenderProp('max'), unit: this.getRenderProp('unit'), value: this.getRenderProp('value'), variant: this.getRenderProp('variant'), liveValue: this.liveValue })));
+        return (h(Host, { key: '6af3e4cf27b8cb9fcb1fd9bc86f98cf26bac99dc' }, h(ProgressFC, { key: '7054e7aeba8257f063d9a43577acb27d40b0900b', label: this.getRenderProp('label'), max: this.getRenderProp('max'), unit: this.getRenderProp('unit'), value: this.getRenderProp('value'), variant: this.getRenderProp('variant'), liveValue: this.liveValue })));
     }
     static get is() { return "kol-progress"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress/style.css

@@ -10,8 +10,10 @@
 * 3. kol-component - Component-specific styles
 * 4. kol-theme-global - Theme-specific global styles
 * 5. kol-theme-component - Theme-specific component styles
+* 6. kol-forced-colors - Defaults for forced colors and high contrast modes
+* 7. kol-theme-forced-colors - Theme-specific styles for forced colors and high contrast modes
 */
-@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;
+@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component, kol-forced-colors, kol-theme-forced-colors;
 /*
  * This file contains all rules for accessibility.
  */
@@ -128,6 +130,44 @@
     clip-path: inset(50%);
   }
 }
+/*
+ * This file contains all rules for forced-colors and highcontrast modes
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color to see all color keywords the browsers are providing
+ */
+@layer kol-forced-colors {
+  @media (forced-colors: active) {
+    .kol-button__text {
+      color: ButtonText;
+      background-color: ButtonFace;
+      border: 2px solid ButtonBorder;
+    }
+    .kol-button--disabled .kol-button__text {
+      color: GrayText;
+      border-color: GrayText;
+    }
+    .kol-card,
+    .kol-dialog,
+    .kol-modal,
+    .kol-drawer {
+      color: CanvasText;
+      background-color: Canvas;
+      border: 1px solid ButtonBorder;
+    }
+    .kol-pagination__button--selected .kol-button {
+      opacity: 1;
+    }
+    .kol-pagination__button--selected .kol-button__text {
+      color: SelectedItemText;
+      background-color: SelectedItem;
+    }
+    /* focus styles */
+    .kol-button:focus-visible,
+    .kol-link__anchor:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
+}
 @layer kol-global {
   /*
    * Dieses CSS stellt sicher, dass der Standard-Style

package/dist/collection/components/quote/component.js

@@ -31,7 +31,7 @@ export class KolQuote extends BaseWebComponent {
         variantQuoteProp.apply(this._variant, (v) => this.setRenderProp('variant', v));
     }
     render() {
-        return (h(Host, { key: 'f2f3fcba27d9b5e6bf6f2f061e5dfab6cedd07f4' }, h(QuoteFC, { key: '114079cc6c38bff8d260dda7954bfc7263dac6be', href: this.getRenderProp('href'), label: this.getRenderProp('label'), quote: this.getRenderProp('quote'), variant: this.getRenderProp('variant') })));
+        return (h(Host, { key: 'c7f9cf51aa1daf74080be33723fa5901cf075411' }, h(QuoteFC, { key: '5351f22eba551b5e9a74ffef9c4b6d950aa69af7', href: this.getRenderProp('href'), label: this.getRenderProp('label'), quote: this.getRenderProp('quote'), variant: this.getRenderProp('variant') })));
     }
     static get is() { return "kol-quote"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/quote/style.css

@@ -10,8 +10,10 @@
 * 3. kol-component - Component-specific styles
 * 4. kol-theme-global - Theme-specific global styles
 * 5. kol-theme-component - Theme-specific component styles
+* 6. kol-forced-colors - Defaults for forced colors and high contrast modes
+* 7. kol-theme-forced-colors - Theme-specific styles for forced colors and high contrast modes
 */
-@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;
+@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component, kol-forced-colors, kol-theme-forced-colors;
 /*
  * This file contains all rules for accessibility.
  */
@@ -128,6 +130,44 @@
     clip-path: inset(50%);
   }
 }
+/*
+ * This file contains all rules for forced-colors and highcontrast modes
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color to see all color keywords the browsers are providing
+ */
+@layer kol-forced-colors {
+  @media (forced-colors: active) {
+    .kol-button__text {
+      color: ButtonText;
+      background-color: ButtonFace;
+      border: 2px solid ButtonBorder;
+    }
+    .kol-button--disabled .kol-button__text {
+      color: GrayText;
+      border-color: GrayText;
+    }
+    .kol-card,
+    .kol-dialog,
+    .kol-modal,
+    .kol-drawer {
+      color: CanvasText;
+      background-color: Canvas;
+      border: 1px solid ButtonBorder;
+    }
+    .kol-pagination__button--selected .kol-button {
+      opacity: 1;
+    }
+    .kol-pagination__button--selected .kol-button__text {
+      color: SelectedItemText;
+      background-color: SelectedItem;
+    }
+    /* focus styles */
+    .kol-button:focus-visible,
+    .kol-link__anchor:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
+}
 @layer kol-global {
   /*
    * Dieses CSS stellt sicher, dass der Standard-Style

package/dist/collection/components/select/component.js

@@ -44,13 +44,13 @@ export class KolSelectWc {
             } });
     }
     render() {
-        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: 'f6fa0db70c0bf6bda1c72eb65a032067038bbfcc' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '780e80bb27862b6b41c297b3720b37c5885fbe2d', state: this.state }, h("form", { key: 'beedcea4be9589b487e5359e76e203cceafd34e9', onSubmit: (event) => {
+        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: 'dade530dd86e45be9891810c39bd09755ffc2fc2' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: 'bc801552e63781dc6b4d15f07fc994776d740d6a', state: this.state }, h("form", { key: '49e75773b97ff146360efd9b77b81a25a789449b', onSubmit: (event) => {
                 event.preventDefault();
                 propagateSubmitEventToForm({
                     form: this.host,
                     ref: this.ctaRef.el,
                 });
-            } }, h("input", { key: '8c2c3f806e0b1f78eca2ca63e2b44ab07c21526c', type: "submit", hidden: true }), h(KolSelectStateWrapperFc, Object.assign({ key: '4797fd920334d926e6586a11b3704502424cbc29' }, this.getSelectProps()))))));
+            } }, h("input", { key: 'afbe2b214db72607bbb87291f30dd0c4bf336397', type: "submit", hidden: true }), h(KolSelectStateWrapperFc, Object.assign({ key: '752c1968182844215e0d0d8b0eed6401a3808c8d' }, this.getSelectProps()))))));
     }
     validateAriaDetails(value) {
         this.controller.validateAriaDetails(value);

package/dist/collection/components/select/shadow.js

@@ -24,7 +24,7 @@ export class KolSelect {
     }
     async focus(options) { }
     render() {
-        return (h(Host, { key: '77813b13a4a41a4751db2f8a1fa064a6cff88e92', class: "kol-select" }, h(KolSelectWcTag, { key: 'c9fa5827b4989923b40e648092e316bceb3169ac', ref: this.ctaRef, _accessKey: this._accessKey, _ariaDetails: this._ariaDetails, _disabled: this._disabled, _hideLabel: this._hideLabel, _hideMsg: this._hideMsg, _hint: this._hint, _icons: this._icons, _infoPopover: this._infoPopover, _label: this._label, _msg: this._msg, _multiple: this._multiple, _name: this._name, _on: this._on, _options: this._options, _required: this._required, _rows: this._rows, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _touched: this._touched, _value: this._value, _variant: this._variant }, h("slot", { key: 'e7d221f742f6131709ca10949e403489720d1da8', name: "expert", slot: "expert" }))));
+        return (h(Host, { key: 'ec768fb75dfbf3956a6f61d46b7099a61f6e78f1', class: "kol-select" }, h(KolSelectWcTag, { key: 'f62fe254570ef61ec68102aee7bb6ecb3b83147c', ref: this.ctaRef, _accessKey: this._accessKey, _ariaDetails: this._ariaDetails, _disabled: this._disabled, _hideLabel: this._hideLabel, _hideMsg: this._hideMsg, _hint: this._hint, _icons: this._icons, _infoPopover: this._infoPopover, _label: this._label, _msg: this._msg, _multiple: this._multiple, _name: this._name, _on: this._on, _options: this._options, _required: this._required, _rows: this._rows, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _touched: this._touched, _value: this._value, _variant: this._variant }, h("slot", { key: 'b66e8ca36f67f1259f8bc134147aa35cd2bcc5b3', name: "expert", slot: "expert" }))));
     }
     validateAriaDetails(value) {
         validateAriaDetails(this, this.host, undefined, value);

package/dist/collection/components/select/style.css

@@ -9,8 +9,10 @@
 * 3. kol-component - Component-specific styles
 * 4. kol-theme-global - Theme-specific global styles
 * 5. kol-theme-component - Theme-specific component styles
+* 6. kol-forced-colors - Defaults for forced colors and high contrast modes
+* 7. kol-theme-forced-colors - Theme-specific styles for forced colors and high contrast modes
 */
-@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;
+@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component, kol-forced-colors, kol-theme-forced-colors;
 /* forward the rem function */
 /*
  * This file contains all rules for accessibility.
@@ -128,6 +130,44 @@
     clip-path: inset(50%);
   }
 }
+/*
+ * This file contains all rules for forced-colors and highcontrast modes
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color to see all color keywords the browsers are providing
+ */
+@layer kol-forced-colors {
+  @media (forced-colors: active) {
+    .kol-button__text {
+      color: ButtonText;
+      background-color: ButtonFace;
+      border: 2px solid ButtonBorder;
+    }
+    .kol-button--disabled .kol-button__text {
+      color: GrayText;
+      border-color: GrayText;
+    }
+    .kol-card,
+    .kol-dialog,
+    .kol-modal,
+    .kol-drawer {
+      color: CanvasText;
+      background-color: Canvas;
+      border: 1px solid ButtonBorder;
+    }
+    .kol-pagination__button--selected .kol-button {
+      opacity: 1;
+    }
+    .kol-pagination__button--selected .kol-button__text {
+      color: SelectedItemText;
+      background-color: SelectedItem;
+    }
+    /* focus styles */
+    .kol-button:focus-visible,
+    .kol-link__anchor:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
+}
 @layer kol-global {
   /*
    * Dieses CSS stellt sicher, dass der Standard-Style
@@ -215,8 +255,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1788342613987"); /* IE9*/
-  src: url("kolicons.eot?t=1788342613987#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1788342613987") format("woff2"), url("kolicons.woff?t=1788342613987") format("woff"), url("kolicons.ttf?t=1788342613987") format("truetype"), url("kolicons.svg?t=1788342613987#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1788937554327"); /* IE9*/
+  src: url("kolicons.eot?t=1788937554327#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1788937554327") format("woff2"), url("kolicons.woff?t=1788937554327") format("woff"), url("kolicons.ttf?t=1788937554327") format("truetype"), url("kolicons.svg?t=1788937554327#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -479,7 +519,7 @@
     align-items: flex-start;
     justify-content: flex-start;
   }
-  .kol-form-field--required .kol-form-field__label-text:has(.kol-span__slot[hidden])::after,
+  .kol-form-field--required .kol-form-field__label-text:has(.kol-span__slot[hidden]) .kol-span__label::after,
   .kol-form-field--required .kol-form-field .kol-tooltip__content .kol-span__label::after {
     content: "*"/"";
   }

package/dist/collection/components/single-select/shadow.js

@@ -186,7 +186,7 @@ export class KolSingleSelect {
     render() {
         var _a;
         const isDisabled = this.state._disabled === true;
-        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '0029e725d8919fa2ce1cc85ec72d80fd0cec0fc6' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '973cda674d4522f352e2d974859b977087ff54dc', state: this.state }, h("div", { key: 'ffb2bd6111a55e9d33a2cfc55f7a8cf6df827bc7', class: "kol-single-select__group" }, h(KolInputStateWrapperFc, Object.assign({ key: '6719032b631f6d678009376631b98d07bddff4b0' }, this.getInputProps())), this._inputValue && this.state._hasClearButton && (h(KolButtonWcTag, { key: 'cb0cd15f7f08f35b7c77ecaf430e6bbaec4314a7', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: "kol-single-select__delete", hidden: isDisabled, _on: {
+        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '6ffa3568b2e4120d78903d3e843440728d05f375' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '1bd3f9923d9492ddf7e4b3d027a1a6d2e1a7a1a3', state: this.state }, h("div", { key: '1f243b0c99ba176583db4f29017e1bb3d1c44b26', class: "kol-single-select__group" }, h(KolInputStateWrapperFc, Object.assign({ key: 'ee2de0d20ece102762fafe39773f379409cfb01e' }, this.getInputProps())), this._inputValue && this.state._hasClearButton && (h(KolButtonWcTag, { key: 'a2c8b0e1da0087d358e21d75e1ead807565460ec', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: "kol-single-select__delete", hidden: isDisabled, _on: {
                 onClick: () => {
                     var _a;
                     this.clearSelection();
@@ -199,9 +199,9 @@ export class KolSingleSelect {
                 onBlur: () => {
                     this.clearButtonFocused = false;
                 },
-            } })), h(IconFC, { key: '68011cf1be6f6cde0285d973149b6eb97b80f1cc', icons: "kolicon-chevron-down", label: "", class: clsx('kol-custom-suggestions-toggle', {
+            } })), h(IconFC, { key: 'e97e9b14042cd1ab8a11d0aab851e3a441dfb31c', icons: "kolicon-chevron-down", label: "", class: clsx('kol-custom-suggestions-toggle', {
                 'kol-custom-suggestions-toggle--disabled': isDisabled,
-            }), onClick: this.toggleListbox.bind(this) })), h(CustomSuggestionsOptionsGroupFc, { key: 'abd5dea634c49bcd931d09229770b3c662ff53d0', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, hidden: !this._isOpen || isDisabled, id: this.state._id + '-listbox' }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (h(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
+            }), onClick: this.toggleListbox.bind(this) })), h(CustomSuggestionsOptionsGroupFc, { key: '1d1d862e9b3ea29b637073283f2c7b3ec8a93d41', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, hidden: !this._isOpen || isDisabled, id: this.state._id + '-listbox' }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (h(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
                 if (el)
                     this.refOptions[index] = el;
             }, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {

package/dist/collection/components/single-select/style.css

@@ -9,8 +9,10 @@
 * 3. kol-component - Component-specific styles
 * 4. kol-theme-global - Theme-specific global styles
 * 5. kol-theme-component - Theme-specific component styles
+* 6. kol-forced-colors - Defaults for forced colors and high contrast modes
+* 7. kol-theme-forced-colors - Theme-specific styles for forced colors and high contrast modes
 */
-@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;
+@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component, kol-forced-colors, kol-theme-forced-colors;
 /* forward the rem function */
 /*
  * This file contains all rules for accessibility.
@@ -128,6 +130,44 @@
     clip-path: inset(50%);
   }
 }
+/*
+ * This file contains all rules for forced-colors and highcontrast modes
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color to see all color keywords the browsers are providing
+ */
+@layer kol-forced-colors {
+  @media (forced-colors: active) {
+    .kol-button__text {
+      color: ButtonText;
+      background-color: ButtonFace;
+      border: 2px solid ButtonBorder;
+    }
+    .kol-button--disabled .kol-button__text {
+      color: GrayText;
+      border-color: GrayText;
+    }
+    .kol-card,
+    .kol-dialog,
+    .kol-modal,
+    .kol-drawer {
+      color: CanvasText;
+      background-color: Canvas;
+      border: 1px solid ButtonBorder;
+    }
+    .kol-pagination__button--selected .kol-button {
+      opacity: 1;
+    }
+    .kol-pagination__button--selected .kol-button__text {
+      color: SelectedItemText;
+      background-color: SelectedItem;
+    }
+    /* focus styles */
+    .kol-button:focus-visible,
+    .kol-link__anchor:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
+}
 @layer kol-global {
   /*
    * Dieses CSS stellt sicher, dass der Standard-Style
@@ -215,8 +255,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1788342613987"); /* IE9*/
-  src: url("kolicons.eot?t=1788342613987#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1788342613987") format("woff2"), url("kolicons.woff?t=1788342613987") format("woff"), url("kolicons.ttf?t=1788342613987") format("truetype"), url("kolicons.svg?t=1788342613987#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1788937554327"); /* IE9*/
+  src: url("kolicons.eot?t=1788937554327#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1788937554327") format("woff2"), url("kolicons.woff?t=1788937554327") format("woff"), url("kolicons.ttf?t=1788937554327") format("truetype"), url("kolicons.svg?t=1788937554327#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -517,7 +557,7 @@
     align-items: flex-start;
     justify-content: flex-start;
   }
-  .kol-form-field--required .kol-form-field__label-text:has(.kol-span__slot[hidden])::after,
+  .kol-form-field--required .kol-form-field__label-text:has(.kol-span__slot[hidden]) .kol-span__label::after,
   .kol-form-field--required .kol-form-field .kol-tooltip__content .kol-span__label::after {
     content: "*"/"";
   }

package/dist/collection/components/skip-nav/shadow.js

@@ -17,7 +17,7 @@ export class KolSkipNav {
         };
     }
     render() {
-        return (h("nav", { key: '5926eeec21c9e626a5edab2c177ac50b92e8d8e6', class: "kol-skip-nav", "aria-label": this.state._label }, h("ul", { key: '2cb9edb0eef9a9d085da0c346ebf476058a32ec8', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
+        return (h("nav", { key: 'a13d1ef6d09045c5bdbef7e3a0c70448d771d3f8', class: "kol-skip-nav", "aria-label": this.state._label }, h("ul", { key: '31093174cfe70aee0e48ce46137518118f22b50d', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
             return (h("li", { class: "kol-skip-nav__list-item", key: index }, h(KolLinkWcTag, Object.assign({}, link, { ref: index === 0 ? this.ctaRef : undefined }))));
         }))));
     }

package/dist/collection/components/skip-nav/style.css

@@ -10,8 +10,10 @@
 * 3. kol-component - Component-specific styles
 * 4. kol-theme-global - Theme-specific global styles
 * 5. kol-theme-component - Theme-specific component styles
+* 6. kol-forced-colors - Defaults for forced colors and high contrast modes
+* 7. kol-theme-forced-colors - Theme-specific styles for forced colors and high contrast modes
 */
-@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;
+@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component, kol-forced-colors, kol-theme-forced-colors;
 /*
  * This file contains all rules for accessibility.
  */
@@ -128,6 +130,44 @@
     clip-path: inset(50%);
   }
 }
+/*
+ * This file contains all rules for forced-colors and highcontrast modes
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color to see all color keywords the browsers are providing
+ */
+@layer kol-forced-colors {
+  @media (forced-colors: active) {
+    .kol-button__text {
+      color: ButtonText;
+      background-color: ButtonFace;
+      border: 2px solid ButtonBorder;
+    }
+    .kol-button--disabled .kol-button__text {
+      color: GrayText;
+      border-color: GrayText;
+    }
+    .kol-card,
+    .kol-dialog,
+    .kol-modal,
+    .kol-drawer {
+      color: CanvasText;
+      background-color: Canvas;
+      border: 1px solid ButtonBorder;
+    }
+    .kol-pagination__button--selected .kol-button {
+      opacity: 1;
+    }
+    .kol-pagination__button--selected .kol-button__text {
+      color: SelectedItemText;
+      background-color: SelectedItem;
+    }
+    /* focus styles */
+    .kol-button:focus-visible,
+    .kol-link__anchor:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
+}
 @layer kol-global {
   /*
    * Dieses CSS stellt sicher, dass der Standard-Style
@@ -210,8 +250,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1788342613987"); /* IE9*/
-  src: url("kolicons.eot?t=1788342613987#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1788342613987") format("woff2"), url("kolicons.woff?t=1788342613987") format("woff"), url("kolicons.ttf?t=1788342613987") format("truetype"), url("kolicons.svg?t=1788342613987#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1788937554327"); /* IE9*/
+  src: url("kolicons.eot?t=1788937554327#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1788937554327") format("woff2"), url("kolicons.woff?t=1788937554327") format("woff"), url("kolicons.ttf?t=1788937554327") format("truetype"), url("kolicons.svg?t=1788937554327#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

package/dist/collection/components/spin/component.js

@@ -29,7 +29,7 @@ export class KolSpin extends BaseWebComponent {
         showProp.apply(value, (v) => this.setRenderProp('show', v));
     }
     render() {
-        return (h(Host, { key: 'aae0fb832dfc3753b93021e0f6364b30e185b1d0' }, h(SpinFC, { key: '706c6295260df5f03356cba40f67557e314c534e', show: this.getRenderProp('show'), label: this.getRenderProp('label'), variant: this.getRenderProp('variant') })));
+        return (h(Host, { key: '8eae7aee270f62e7dd0fdaa1d7e997d39400c5b1' }, h(SpinFC, { key: 'bb33206795c134c16c266b832f5e4e4e464f9bd6', show: this.getRenderProp('show'), label: this.getRenderProp('label'), variant: this.getRenderProp('variant') })));
     }
     static get is() { return "kol-spin"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spin/style.css

@@ -10,8 +10,10 @@
 * 3. kol-component - Component-specific styles
 * 4. kol-theme-global - Theme-specific global styles
 * 5. kol-theme-component - Theme-specific component styles
+* 6. kol-forced-colors - Defaults for forced colors and high contrast modes
+* 7. kol-theme-forced-colors - Theme-specific styles for forced colors and high contrast modes
 */
-@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;
+@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component, kol-forced-colors, kol-theme-forced-colors;
 /*
  * This file contains all rules for accessibility.
  */
@@ -128,6 +130,44 @@
     clip-path: inset(50%);
   }
 }
+/*
+ * This file contains all rules for forced-colors and highcontrast modes
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color to see all color keywords the browsers are providing
+ */
+@layer kol-forced-colors {
+  @media (forced-colors: active) {
+    .kol-button__text {
+      color: ButtonText;
+      background-color: ButtonFace;
+      border: 2px solid ButtonBorder;
+    }
+    .kol-button--disabled .kol-button__text {
+      color: GrayText;
+      border-color: GrayText;
+    }
+    .kol-card,
+    .kol-dialog,
+    .kol-modal,
+    .kol-drawer {
+      color: CanvasText;
+      background-color: Canvas;
+      border: 1px solid ButtonBorder;
+    }
+    .kol-pagination__button--selected .kol-button {
+      opacity: 1;
+    }
+    .kol-pagination__button--selected .kol-button__text {
+      color: SelectedItemText;
+      background-color: SelectedItem;
+    }
+    /* focus styles */
+    .kol-button:focus-visible,
+    .kol-link__anchor:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
+}
 @layer kol-global {
   /*
    * Dieses CSS stellt sicher, dass der Standard-Style

package/dist/collection/components/split-button/shadow.js

@@ -37,10 +37,10 @@ export class KolSplitButton {
     async focus(options) { }
     async click() { }
     render() {
-        return (h("div", { key: 'd3eb85d05f1092d3b2ff3cd69526c733686e5bac', class: "kol-split-button" }, h("div", { key: '37f04c5aa14852826bfb908338c1b105c3723575', class: "kol-split-button__root" }, h(KolButtonWcTag, { key: '5cac4d1aa55f84982673e39137389e161b01006f', class: clsx('kol-split-button__button', {
+        return (h("div", { key: '6acb74e5bfb3421b8f096360eddebef671d8c1fb', class: "kol-split-button" }, h("div", { key: 'd546f04f15629de54b476fa2197582a1db6e0848', class: "kol-split-button__root" }, h(KolButtonWcTag, { key: '4d06517c4c0c5d9eaf1124d0024b9763dee38b58', class: clsx('kol-split-button__button', {
                 [this._variant]: this._variant !== 'custom',
                 [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }), ref: this.ctaRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), h("div", { key: '79ec0cd62222200ed82aef6889e119fed700daa6', class: "kol-split-button__horizontal-line" }), h(KolPopoverButtonWcTag, { key: '93109273d8796b402a924ad7ac61f69485388698', class: "kol-split-button__secondary-button", ref: this.setPopoverButtonRef, _disabled: this._disabled, _hideLabel: true, _icons: "kolicon-chevron-down", _label: translate('kol-split-button-dropdown-label-open'), _popoverAlign: "bottom" }, h("slot", { key: '279f14b2d835a587e1b240028e89b8cf386cf762' })))));
+            }), ref: this.ctaRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), h("div", { key: '8828794693c3f31853c2d3e929eacb3905dc5812', class: "kol-split-button__horizontal-line" }), h(KolPopoverButtonWcTag, { key: '375ec2322f2b501e4aca6110f6d96376bdbbc4b7', class: "kol-split-button__secondary-button", ref: this.setPopoverButtonRef, _disabled: this._disabled, _hideLabel: true, _icons: "kolicon-chevron-down", _label: translate('kol-split-button-dropdown-label-open'), _popoverAlign: "bottom" }, h("slot", { key: '23d5f6267b8835b7087f4c4002f914439cdcda70' })))));
     }
     connectedCallback() {
         this.state = Object.assign(Object.assign({}, this.state), { _show: false });

package/dist/collection/components/split-button/style.css

@@ -10,8 +10,10 @@
 * 3. kol-component - Component-specific styles
 * 4. kol-theme-global - Theme-specific global styles
 * 5. kol-theme-component - Theme-specific component styles
+* 6. kol-forced-colors - Defaults for forced colors and high contrast modes
+* 7. kol-theme-forced-colors - Theme-specific styles for forced colors and high contrast modes
 */
-@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;
+@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component, kol-forced-colors, kol-theme-forced-colors;
 /*
  * This file contains all rules for accessibility.
  */
@@ -128,6 +130,44 @@
     clip-path: inset(50%);
   }
 }
+/*
+ * This file contains all rules for forced-colors and highcontrast modes
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color to see all color keywords the browsers are providing
+ */
+@layer kol-forced-colors {
+  @media (forced-colors: active) {
+    .kol-button__text {
+      color: ButtonText;
+      background-color: ButtonFace;
+      border: 2px solid ButtonBorder;
+    }
+    .kol-button--disabled .kol-button__text {
+      color: GrayText;
+      border-color: GrayText;
+    }
+    .kol-card,
+    .kol-dialog,
+    .kol-modal,
+    .kol-drawer {
+      color: CanvasText;
+      background-color: Canvas;
+      border: 1px solid ButtonBorder;
+    }
+    .kol-pagination__button--selected .kol-button {
+      opacity: 1;
+    }
+    .kol-pagination__button--selected .kol-button__text {
+      color: SelectedItemText;
+      background-color: SelectedItem;
+    }
+    /* focus styles */
+    .kol-button:focus-visible,
+    .kol-link__anchor:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
+}
 @layer kol-global {
   /*
    * Dieses CSS stellt sicher, dass der Standard-Style
@@ -210,8 +250,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1788342613987"); /* IE9*/
-  src: url("kolicons.eot?t=1788342613987#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1788342613987") format("woff2"), url("kolicons.woff?t=1788342613987") format("woff"), url("kolicons.ttf?t=1788342613987") format("truetype"), url("kolicons.svg?t=1788342613987#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1788937554327"); /* IE9*/
+  src: url("kolicons.eot?t=1788937554327#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1788937554327") format("woff2"), url("kolicons.woff?t=1788937554327") format("woff"), url("kolicons.ttf?t=1788937554327") format("truetype"), url("kolicons.svg?t=1788937554327#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

package/dist/collection/components/table-stateful/shadow.js

@@ -431,7 +431,7 @@ export class KolTableStateful {
         const paginationTop = this._paginationPosition === 'top' || this._paginationPosition === 'both' ? this.renderPagination('top') : null;
         const paginationBottom = this._paginationPosition === 'bottom' || this._paginationPosition === 'both' ? this.renderPagination('bottom') : null;
         const headerCells = this.buildHeaderCells();
-        return (h(Host, { key: 'e57b6ea2a83076f45932a3cf5757c36292817050', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, h(KolTableStatelessWcTag, { key: '366af529672e25752ae24ce8677a96f93f6b2e28', externalLabelElements: this.resolvedElements, ref: this.catchRef, _data: displayedData, _fixedCols: this._fixedCols, _headerCells: headerCells, _label: this.state._label, _loading: this._loading, _dataFoot: this.state._dataFoot, _on: {
+        return (h(Host, { key: 'd059debfe3cac058c6638f789055a11ab4260f82', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, h(KolTableStatelessWcTag, { key: '17fa9d6c558c0420597e7e125b57b16661841cb1', externalLabelElements: this.resolvedElements, ref: this.catchRef, _data: displayedData, _fixedCols: this._fixedCols, _headerCells: headerCells, _label: this.state._label, _loading: this._loading, _dataFoot: this.state._dataFoot, _on: {
                 onSort: (_, payload) => {
                     this.handleSort(payload);
                 },