@public-ui/components 4.3.0-rc.6 → 4.3.0-rc.7

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

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */

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

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */
@@ -207,8 +210,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
-  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1785491886871"); /* IE9*/
+  src: url("kolicons.eot?t=1785491886871#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785491886871") format("woff2"), url("kolicons.woff?t=1785491886871") format("woff"), url("kolicons.ttf?t=1785491886871") format("truetype"), url("kolicons.svg?t=1785491886871#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

package/dist/collection/components/table-stateful/style.css

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */
@@ -212,8 +215,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
-  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1785491886871"); /* IE9*/
+  src: url("kolicons.eot?t=1785491886871#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785491886871") format("woff2"), url("kolicons.woff?t=1785491886871") format("woff"), url("kolicons.ttf?t=1785491886871") format("truetype"), url("kolicons.svg?t=1785491886871#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -402,17 +405,23 @@
   }
   .kol-alert {
     display: grid;
+    grid-template-areas: "icon heading close" "icon content close";
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: min-content min-content;
   }
-  .kol-alert__container {
-    display: flex;
-    place-items: center;
+  .kol-alert__icon {
+    grid-area: icon;
   }
-  .kol-alert__container-content {
-    flex-grow: 1;
+  .kol-alert__heading {
+    grid-area: heading;
   }
   .kol-alert__closer {
     /* Visible with forced colors */
     outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));
+    grid-area: close;
+  }
+  .kol-alert__content {
+    grid-area: content;
   }
   .kol-icon {
     color: inherit;
@@ -737,17 +746,23 @@
   }
   .kol-alert {
     display: grid;
+    grid-template-areas: "icon heading close" "icon content close";
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: min-content min-content;
   }
-  .kol-alert__container {
-    display: flex;
-    place-items: center;
+  .kol-alert__icon {
+    grid-area: icon;
   }
-  .kol-alert__container-content {
-    flex-grow: 1;
+  .kol-alert__heading {
+    grid-area: heading;
   }
   .kol-alert__closer {
     /* Visible with forced colors */
     outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));
+    grid-area: close;
+  }
+  .kol-alert__content {
+    grid-area: content;
   }
   .kol-form-field {
     display: grid;

package/dist/collection/components/table-stateless/style.css

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */
@@ -212,8 +215,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
-  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1785491886871"); /* IE9*/
+  src: url("kolicons.eot?t=1785491886871#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785491886871") format("woff2"), url("kolicons.woff?t=1785491886871") format("woff"), url("kolicons.ttf?t=1785491886871") format("truetype"), url("kolicons.svg?t=1785491886871#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -402,17 +405,23 @@
   }
   .kol-alert {
     display: grid;
+    grid-template-areas: "icon heading close" "icon content close";
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: min-content min-content;
   }
-  .kol-alert__container {
-    display: flex;
-    place-items: center;
+  .kol-alert__icon {
+    grid-area: icon;
   }
-  .kol-alert__container-content {
-    flex-grow: 1;
+  .kol-alert__heading {
+    grid-area: heading;
   }
   .kol-alert__closer {
     /* Visible with forced colors */
     outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));
+    grid-area: close;
+  }
+  .kol-alert__content {
+    grid-area: content;
   }
   .kol-icon {
     color: inherit;

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

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */
@@ -212,8 +215,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
-  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1785491886871"); /* IE9*/
+  src: url("kolicons.eot?t=1785491886871#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785491886871") format("woff2"), url("kolicons.woff?t=1785491886871") format("woff"), url("kolicons.ttf?t=1785491886871") format("truetype"), url("kolicons.svg?t=1785491886871#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

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

@@ -57,7 +57,7 @@ export class KolTextarea {
             } });
     }
     render() {
-        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '46af87ef7cee2cd76f7af423d760d304a686b7f7' }, this.getFormFieldProps()), h(KolInputContainerStateWrapperFc, { key: '806a040a256301915dcc4a576414f0f51aa60bab', state: this.state }, h(KolTextAreaStateWrapperFc, Object.assign({ key: '1a045f363b665626c8eb587fb1372f4ff02feb92' }, this.getTextAreaProps())))));
+        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '2d582f1e5fd0110d30785d4324f5460d8f375782' }, this.getFormFieldProps()), h(KolInputContainerStateWrapperFc, { key: 'bead43b6917f3660b4c100de8e94da47ba942fd9', state: this.state }, h(KolTextAreaStateWrapperFc, Object.assign({ key: 'ecd3832e2b982eaee0490bbc9429abe95c782311' }, this.getTextAreaProps())))));
     }
     validateAriaDetails(value) {
         this.controller.validateAriaDetails(value);

package/dist/collection/components/textarea/shadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/textarea/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from '../../utils/clsx';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerStateWrapperFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport KolTextAreaStateWrapperFc, { type TextAreaStateWrapperProps } from '../../functional-component-wrappers/TextAreaStateWrapper/TextAreaStateWrapper';\nimport type {\n\tAdjustHeightPropType,\n\tAriaDetailsPropType,\n\tClickableElement,\n\tDisabledPropType,\n\tFocusableElement,\n\tHasCounterPropType,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tInputTypeOnDefault,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tMaxLengthBehaviorPropType,\n\tMsgPropType,\n\tNamePropType,\n\tPlaceholderPropType,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tRowsPropType,\n\tShortKeyPropType,\n\tSpellCheckPropType,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTextareaAPI,\n\tTextareaResizePropType,\n\tTextareaStates,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\nimport { CounterDomUpdater } from '../../utils/counter-dom-updater';\nimport { createRelatedUniqueId, createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { TextareaController } from './controller';\n\n/**\n * https://stackoverflow.com/questions/17772260/textarea-auto-height\n */\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n/**\n * The **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks.\n *\n * @slot - The label of the input field.\n */\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTextarea implements ClickableElement, FocusableElement, TextareaAPI {\n\t@Element() protected readonly host?: HTMLKolTextareaElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLTextAreaElement>();\n\tprivate readonly counterUpdater = new CounterDomUpdater();\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string | undefined> {\n\t\treturn this.ctaRef.el?.value;\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\t/**\n\t * Clicks the primary interactive element inside this component.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-form-field-textarea', {\n\t\t\t\t'kol-form-field--has-value': this.state._hasValue,\n\t\t\t\t'kol-form-field--has-counter': this.controller.hasSoftCharacterLimit() || this.controller.hasCounter(),\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\talert: this.showAsAlert(),\n\t\t\tcounterRefs: {\n\t\t\t\tvisualRef: this.counterUpdater.setVisualRef,\n\t\t\t\tariaRef: this.counterUpdater.setAriaRef,\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate getTextAreaProps(): TextAreaStateWrapperProps {\n\t\tconst ariaDescribedBy =\n\t\t\ttypeof this.state._maxLength === 'number' && !this.controller.hasCounter() ? [createRelatedUniqueId(this.state._id, 'character-limit-hint')] : undefined; // When a character limit is defined but no counter is shown, we provide an additional hint referenced by aria-describedby. With a counter, its spans already convey the limit.\n\n\t\treturn {\n\t\t\tref: this.ctaRef,\n\t\t\tstate: this.state,\n\t\t\tstyle: {\n\t\t\t\tresize: this.state._resize,\n\t\t\t},\n\t\t\tariaDescribedBy,\n\t\t\t...this.controller.onFacade,\n\t\t\tonInput: this.onInput,\n\t\t\tonKeyDown: this.onKeyDown,\n\t\t\tonFocus: (event: FocusEvent) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\tthis.counterUpdater.retriggerAria(this._value?.length ?? 0, this.state._maxLength, this.state._maxLengthBehavior ?? 'hard');\n\t\t\t},\n\t\t\tonBlur: (event: FocusEvent) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerStateWrapperFc state={this.state}>\n\t\t\t\t\t<KolTextAreaStateWrapperFc {...this.getTextAreaProps()} />\n\t\t\t\t</KolInputContainerStateWrapperFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Adjusts the height of the element to its content.\n\t * @TODO: change back to AdjustHeightPropType after stencil #4663 has been resolved\n\t */\n\t@Prop() public _adjustHeight?: boolean = false;\n\n\t/**\n\t * References an external element by ID that provides accessible details for this textarea.\n\t */\n\t@Prop() public _ariaDetails?: AriaDetailsPropType;\n\n\t@Watch('_ariaDetails')\n\tpublic validateAriaDetails(value?: AriaDetailsPropType): void {\n\t\tthis.controller.validateAriaDetails(value);\n\t}\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideMsg?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the maximum number of input characters.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Shows a character counter for the input element.\n\t */\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/**\n\t * Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.\n\t */\n\t@Prop() public _maxLengthBehavior?: MaxLengthBehaviorPropType = 'hard';\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/**\n\t * Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t * In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`.\n\t */\n\t@Prop() public _resize?: TextareaResizePropType = 'vertical';\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Maximum number of visible rows of the element.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: RowsPropType;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Defines whether the browser should check the spelling and grammar.\n\t */\n\t@Prop() public _spellCheck?: SpellCheckPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType;\n\n\t@State() public state: TextareaStates = {\n\t\t_adjustHeight: false,\n\t\t_hasValue: false,\n\t\t_hideMsg: false,\n\t\t_id: createUniqueId('textarea'),\n\t\t_label: '', // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_adjustHeight')\n\tpublic validateAdjustHeight(value?: AdjustHeightPropType): void {\n\t\tthis.controller.validateAdjustHeight(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: HintPropType): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t\tthis.counterUpdater.updateImmediate(this._value?.length ?? 0, this.state._maxLength, this.state._maxLengthBehavior ?? 'hard');\n\t}\n\n\t@Watch('_maxLengthBehavior')\n\tpublic validateMaxLengthBehavior(value?: MaxLengthBehaviorPropType): void {\n\t\tthis.controller.validateMaxLengthBehavior(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: PlaceholderPropType): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: ReadOnlyPropType): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_resize')\n\tpublic validateResize(value?: TextareaResizePropType): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_spellCheck')\n\tpublic validateSpellCheck(value?: SpellCheckPropType): void {\n\t\tthis.controller.validateSpellCheck(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t\tthis.counterUpdater.update(value?.length ?? 0, this.state._maxLength, this.state._maxLengthBehavior ?? 'hard');\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: VariantClassNamePropType): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\tif (this.controller.hasCounter() || this.controller.hasSoftCharacterLimit()) {\n\t\t\tthis.counterUpdater.updateImmediate(this._value?.length ?? 0, this.state._maxLength, this.state._maxLengthBehavior ?? 'hard');\n\t\t}\n\t\tsetTimeout(() => {\n\t\t\tif (this._adjustHeight === true && this.ctaRef.el /* SSR instanceof HTMLTextAreaElement */) {\n\t\t\t\tthis._rows = this.state?._rows && this.state._rows > increaseTextareaHeight(this.ctaRef.el) ? this.state._rows : increaseTextareaHeight(this.ctaRef.el);\n\t\t\t} else if (!this._rows) {\n\t\t\t\tthis._rows = 1;\n\t\t\t}\n\t\t});\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.counterUpdater.destroy();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaDetails(this._ariaDetails);\n\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\n\t\tthis.controller.onFacade.onKeyDown(event);\n\t\tthis.counterUpdater.handleKeyDown(event, this.ctaRef.el?.value.length ?? 0, this.state._maxLength, this.state._maxLengthBehavior ?? 'hard');\n\t};\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tif (this.ctaRef.el instanceof HTMLTextAreaElement) {\n\t\t\tthis._value = this.ctaRef.el.value;\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.ctaRef.el);\n\t\t\t}\n\t\t\tthis.controller.onFacade.onInput(event);\n\t\t}\n\t};\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/textarea/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from '../../utils/clsx';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerStateWrapperFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport KolTextAreaStateWrapperFc, { type TextAreaStateWrapperProps } from '../../functional-component-wrappers/TextAreaStateWrapper/TextAreaStateWrapper';\nimport type {\n\tAdjustHeightPropType,\n\tAriaDetailsPropType,\n\tClickableElement,\n\tDisabledPropType,\n\tFocusableElement,\n\tHasCounterPropType,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tInputTypeOnDefault,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tMaxLengthBehaviorPropType,\n\tMsgPropType,\n\tNamePropType,\n\tPlaceholderPropType,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tRowsPropType,\n\tShortKeyPropType,\n\tSpellCheckPropType,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTextareaAPI,\n\tTextareaResizePropType,\n\tTextareaStates,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\nimport { CounterDomUpdater } from '../../utils/counter-dom-updater';\nimport { createRelatedUniqueId, createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { TextareaController } from './controller';\n\n/**\n * @slot expert - Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot\n *\n * https://stackoverflow.com/questions/17772260/textarea-auto-height\n */\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n/**\n * The **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks.\n *\n * @slot - The label of the input field.\n */\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTextarea implements ClickableElement, FocusableElement, TextareaAPI {\n\t@Element() protected readonly host?: HTMLKolTextareaElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLTextAreaElement>();\n\tprivate readonly counterUpdater = new CounterDomUpdater();\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string | undefined> {\n\t\treturn this.ctaRef.el?.value;\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\t/**\n\t * Clicks the primary interactive element inside this component.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-form-field-textarea', {\n\t\t\t\t'kol-form-field--has-value': this.state._hasValue,\n\t\t\t\t'kol-form-field--has-counter': this.controller.hasSoftCharacterLimit() || this.controller.hasCounter(),\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\talert: this.showAsAlert(),\n\t\t\tcounterRefs: {\n\t\t\t\tvisualRef: this.counterUpdater.setVisualRef,\n\t\t\t\tariaRef: this.counterUpdater.setAriaRef,\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate getTextAreaProps(): TextAreaStateWrapperProps {\n\t\tconst ariaDescribedBy =\n\t\t\ttypeof this.state._maxLength === 'number' && !this.controller.hasCounter() ? [createRelatedUniqueId(this.state._id, 'character-limit-hint')] : undefined; // When a character limit is defined but no counter is shown, we provide an additional hint referenced by aria-describedby. With a counter, its spans already convey the limit.\n\n\t\treturn {\n\t\t\tref: this.ctaRef,\n\t\t\tstate: this.state,\n\t\t\tstyle: {\n\t\t\t\tresize: this.state._resize,\n\t\t\t},\n\t\t\tariaDescribedBy,\n\t\t\t...this.controller.onFacade,\n\t\t\tonInput: this.onInput,\n\t\t\tonKeyDown: this.onKeyDown,\n\t\t\tonFocus: (event: FocusEvent) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\tthis.counterUpdater.retriggerAria(this._value?.length ?? 0, this.state._maxLength, this.state._maxLengthBehavior ?? 'hard');\n\t\t\t},\n\t\t\tonBlur: (event: FocusEvent) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerStateWrapperFc state={this.state}>\n\t\t\t\t\t<KolTextAreaStateWrapperFc {...this.getTextAreaProps()} />\n\t\t\t\t</KolInputContainerStateWrapperFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Adjusts the height of the element to its content.\n\t * @TODO: change back to AdjustHeightPropType after stencil #4663 has been resolved\n\t */\n\t@Prop() public _adjustHeight?: boolean = false;\n\n\t/**\n\t * References an external element by ID that provides accessible details for this textarea.\n\t */\n\t@Prop() public _ariaDetails?: AriaDetailsPropType;\n\n\t@Watch('_ariaDetails')\n\tpublic validateAriaDetails(value?: AriaDetailsPropType): void {\n\t\tthis.controller.validateAriaDetails(value);\n\t}\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideMsg?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the maximum number of input characters.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Shows a character counter for the input element.\n\t */\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/**\n\t * Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.\n\t */\n\t@Prop() public _maxLengthBehavior?: MaxLengthBehaviorPropType = 'hard';\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/**\n\t * Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t * In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`.\n\t */\n\t@Prop() public _resize?: TextareaResizePropType = 'vertical';\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Maximum number of visible rows of the element.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: RowsPropType;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Defines whether the browser should check the spelling and grammar.\n\t */\n\t@Prop() public _spellCheck?: SpellCheckPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType;\n\n\t@State() public state: TextareaStates = {\n\t\t_adjustHeight: false,\n\t\t_hasValue: false,\n\t\t_hideMsg: false,\n\t\t_id: createUniqueId('textarea'),\n\t\t_label: '', // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_adjustHeight')\n\tpublic validateAdjustHeight(value?: AdjustHeightPropType): void {\n\t\tthis.controller.validateAdjustHeight(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: HintPropType): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t\tthis.counterUpdater.updateImmediate(this._value?.length ?? 0, this.state._maxLength, this.state._maxLengthBehavior ?? 'hard');\n\t}\n\n\t@Watch('_maxLengthBehavior')\n\tpublic validateMaxLengthBehavior(value?: MaxLengthBehaviorPropType): void {\n\t\tthis.controller.validateMaxLengthBehavior(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: PlaceholderPropType): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: ReadOnlyPropType): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_resize')\n\tpublic validateResize(value?: TextareaResizePropType): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_spellCheck')\n\tpublic validateSpellCheck(value?: SpellCheckPropType): void {\n\t\tthis.controller.validateSpellCheck(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t\tthis.counterUpdater.update(value?.length ?? 0, this.state._maxLength, this.state._maxLengthBehavior ?? 'hard');\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: VariantClassNamePropType): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\tif (this.controller.hasCounter() || this.controller.hasSoftCharacterLimit()) {\n\t\t\tthis.counterUpdater.updateImmediate(this._value?.length ?? 0, this.state._maxLength, this.state._maxLengthBehavior ?? 'hard');\n\t\t}\n\t\tsetTimeout(() => {\n\t\t\tif (this._adjustHeight === true && this.ctaRef.el /* SSR instanceof HTMLTextAreaElement */) {\n\t\t\t\tthis._rows = this.state?._rows && this.state._rows > increaseTextareaHeight(this.ctaRef.el) ? this.state._rows : increaseTextareaHeight(this.ctaRef.el);\n\t\t\t} else if (!this._rows) {\n\t\t\t\tthis._rows = 1;\n\t\t\t}\n\t\t});\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.counterUpdater.destroy();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaDetails(this._ariaDetails);\n\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\n\t\tthis.controller.onFacade.onKeyDown(event);\n\t\tthis.counterUpdater.handleKeyDown(event, this.ctaRef.el?.value.length ?? 0, this.state._maxLength, this.state._maxLengthBehavior ?? 'hard');\n\t};\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tif (this.ctaRef.el instanceof HTMLTextAreaElement) {\n\t\t\tthis._value = this.ctaRef.el.value;\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.ctaRef.el);\n\t\t\t}\n\t\t\tthis.controller.onFacade.onInput(event);\n\t\t}\n\t};\n}\n"]}

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

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */
@@ -212,8 +215,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
-  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1785491886871"); /* IE9*/
+  src: url("kolicons.eot?t=1785491886871#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785491886871") format("woff2"), url("kolicons.woff?t=1785491886871") format("woff"), url("kolicons.ttf?t=1785491886871") format("truetype"), url("kolicons.svg?t=1785491886871#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -402,17 +405,23 @@
   }
   .kol-alert {
     display: grid;
+    grid-template-areas: "icon heading close" "icon content close";
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: min-content min-content;
   }
-  .kol-alert__container {
-    display: flex;
-    place-items: center;
+  .kol-alert__icon {
+    grid-area: icon;
   }
-  .kol-alert__container-content {
-    flex-grow: 1;
+  .kol-alert__heading {
+    grid-area: heading;
   }
   .kol-alert__closer {
     /* Visible with forced colors */
     outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));
+    grid-area: close;
+  }
+  .kol-alert__content {
+    grid-area: content;
   }
   .kol-form-field {
     display: grid;

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

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */
@@ -212,8 +215,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
-  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1785491886871"); /* IE9*/
+  src: url("kolicons.eot?t=1785491886871#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785491886871") format("woff2"), url("kolicons.woff?t=1785491886871") format("woff"), url("kolicons.ttf?t=1785491886871") format("truetype"), url("kolicons.svg?t=1785491886871#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -402,17 +405,23 @@
   }
   .kol-alert {
     display: grid;
+    grid-template-areas: "icon heading close" "icon content close";
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: min-content min-content;
   }
-  .kol-alert__container {
-    display: flex;
-    place-items: center;
+  .kol-alert__icon {
+    grid-area: icon;
   }
-  .kol-alert__container-content {
-    flex-grow: 1;
+  .kol-alert__heading {
+    grid-area: heading;
   }
   .kol-alert__closer {
     /* Visible with forced colors */
     outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));
+    grid-area: close;
+  }
+  .kol-alert__content {
+    grid-area: content;
   }
   :host {
     display: flex;

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

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */
@@ -207,8 +210,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
-  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1785491886871"); /* IE9*/
+  src: url("kolicons.eot?t=1785491886871#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785491886871") format("woff2"), url("kolicons.woff?t=1785491886871") format("woff"), url("kolicons.ttf?t=1785491886871") format("truetype"), url("kolicons.svg?t=1785491886871#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

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

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */

package/dist/collection/components/tree-item/style.css

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */
@@ -207,8 +210,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
-  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1785491886871"); /* IE9*/
+  src: url("kolicons.eot?t=1785491886871#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785491886871") format("woff2"), url("kolicons.woff?t=1785491886871") format("woff"), url("kolicons.ttf?t=1785491886871") format("truetype"), url("kolicons.svg?t=1785491886871#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

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

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */

package/dist/collection/functional-components/Alert/Alert.js

@@ -48,11 +48,11 @@ const KolAlertFc = (props, children) => {
         [`h${level}`]: true,
     });
     const rootProps = Object.assign({ class: clsx(classNames, BEM_CLASS_ROOT) }, other);
-    return (h("div", Object.assign({ role: alert ? 'alert' : undefined }, rootProps, { "data-testid": "alert" }), h("div", { class: "kol-alert__container" }, h(AlertIcon, { label: label, type: type }), h("div", { class: "kol-alert__container-content" }, label && (h(KolHeadingFc, { class: BEM_CLASS__HEADING, level: level, id: "heading" }, label)), variant === 'msg' && (h("span", { class: BEM_CLASS_ALERT__CONTENT, "aria-describedby": label ? 'heading' : undefined }, children))), hasCloser && (h(KolButtonWcTag, { class: BEM_CLASS_ALERT__CLOSER + ' kol-close-button', "data-testid": "alert-close-button", _ariaDescription: (label === null || label === void 0 ? void 0 : label.trim()) || '', _hideLabel: true, _icons: {
+    return (h("div", Object.assign({ role: alert ? 'alert' : undefined }, rootProps, { "data-testid": "alert" }), h(AlertIcon, { label: label, type: type }), label && (h(KolHeadingFc, { class: BEM_CLASS__HEADING, level: level, id: "heading" }, label)), hasCloser && (h(KolButtonWcTag, { class: BEM_CLASS_ALERT__CLOSER + ' kol-close-button', "data-testid": "alert-close-button", _ariaDescription: (label === null || label === void 0 ? void 0 : label.trim()) || '', _hideLabel: true, _icons: {
             left: {
                 icon: 'kolicon-cross',
             },
-        }, _label: translateCloseAlert, _on: { onClick: onCloserClick }, _tooltipAlign: "left" }))), variant === 'card' && (h("div", { class: BEM_CLASS_ALERT__CONTENT, "aria-describedby": label ? 'heading' : undefined }, children))));
+        }, _label: translateCloseAlert, _on: { onClick: onCloserClick }, _tooltipAlign: "left" })), h("div", { class: BEM_CLASS_ALERT__CONTENT, "aria-describedby": label ? 'heading' : undefined }, children)));
 };
 export default KolAlertFc;
 //# sourceMappingURL=Alert.js.map