npm - @public-ui/components - Versions diffs - 4.3.0-rc.5 → 4.3.0-rc.7 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (815) hide show

package/dist/collection/components/accordion/style.css CHANGED Viewed

@@ -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.
      */
@@ -269,8 +272,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1784281062679"); /* IE9*/
-  src: url("kolicons.eot?t=1784281062679#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1784281062679") format("woff2"), url("kolicons.woff?t=1784281062679") format("woff"), url("kolicons.ttf?t=1784281062679") format("truetype"), url("kolicons.svg?t=1784281062679#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/alert/style.css CHANGED Viewed

@@ -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=1784281062679"); /* IE9*/
-  src: url("kolicons.eot?t=1784281062679#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1784281062679") format("woff2"), url("kolicons.woff?t=1784281062679") format("woff"), url("kolicons.ttf?t=1784281062679") format("truetype"), url("kolicons.svg?t=1784281062679#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,16 +405,22 @@
   }
   .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;
   }
 }

package/dist/collection/components/avatar/style.css CHANGED Viewed

@@ -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.
      */
@@ -211,6 +214,14 @@
   }
 }
 @layer kol-component {
+  :host {
+    display: flex;
+    width: calc(100 * 1rem / var(--kolibri-root-font-size, 16));
+    aspect-ratio: 1;
+    align-items: center;
+    justify-content: center;
+    container-type: size;
+  }
   .kol-avatar,
   .kol-avatar__image,
   .kol-avatar__initials {
@@ -220,12 +231,14 @@
     /* Visible with forced colors  */
     outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));
     display: flex;
-    width: calc(100 * 1rem / var(--kolibri-root-font-size, 16));
-    height: calc(100 * 1rem / var(--kolibri-root-font-size, 16));
+    width: max(100cqw, 100cqh);
+    height: max(100cqw, 100cqh);
+    flex-shrink: 0;
+    container-type: size;
   }
   .kol-avatar__initials {
     background-color: inherit;
     margin: auto;
-    font-size: calc(40 * 1rem / var(--kolibri-root-font-size, 16));
+    font-size: 40cqh;
   }
 }

package/dist/collection/components/badge/shadow.js CHANGED Viewed

@@ -36,12 +36,12 @@ export class KolBadge {
     async focus(options) { }
     render() {
         const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
-        return (h("span", { key: '9091b07e3ef752f765f96bbd66eaa329ae89543d', class: clsx('kol-badge', {
+        return (h("span", { key: 'ce393c9b3887fa2a1fd1545830766fc398495d92', class: clsx('kol-badge', {
                 'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
             }), style: {
                 backgroundColor: this.bgColorStr,
                 color: this.colorStr,
-            } }, h(SpanFC, { key: '9a0ee2dd77bfad8c7043cca5229b4398af16e6b8', class: "kol-badge__label", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));
+            } }, h(SpanFC, { key: '6c4fed34445543666bf3f3b9bf3830ee51411938', class: "kol-badge__label", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));
     }
     validateIcons(value) {
         validateIcons(this, value);

package/dist/collection/components/badge/shadow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/badge/shadow.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAClF,OAAO,EAAE,MAAM,EAAE,MAAM,qDAAqD,CAAC;AAY7E,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAEtI,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,IAAI,MAAM,kBAAkB,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAC9E,WAAW,CAAC,qEAAqE,CAAC,CAAC;~~AAanF~~,MAAM,OAAO,QAAQ;IAPrB;QASS,eAAU,GAAG,MAAM,CAAC;QACpB,aAAQ,GAAG,MAAM,CAAC;QACT,OAAE,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;QACjC,WAAM,GAAG,YAAY,EAA0B,CAAC;QAqDpD,WAAM,GAA4B,MAAM,CAAC;QAiBxC,UAAK,GAAgB;YACpC,MAAM,EAAE;gBACP,eAAe,EAAE,MAAM;gBACvB,eAAe,EAAE,MAAM;aACvB;YACD,MAAM,EAAE,EAAE;SACV,CAAC;QAEM,sBAAiB,GAAG,CAAC,KAAc,EAAE,EAAE;YAC9C,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;YAC3C,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC,eAAe,CAAC;YAC5C,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,eAAe,CAAC;QAC3C,CAAC,CAAC;KAkCF;IAlHQ,iBAAiB,CAAC,KAA0B;QACnD,OAAO,CACN,EAAC,cAAc,IACd,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,KAAK,EAAC,yBAAyB,EAC/B,aAAa,EAAE,IAAI,CAAC,EAAE,EACtB,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,aAAa,EAAE,KAAK,CAAC,aAAa,GACjC,CACF,CAAC;IACH,CAAC;IASY,AAAN,KAAK,CAAC,KAAK,CAAC,OAAyB,IAAkB,CAAC;IAExD,MAAM;QACZ,MAAM,cAAc,GAAG,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;QAEvG,OAAO,CACN,6DACC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE;gBACxB,6BAA6B,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,IAAI;aAC9G,CAAC,EACF,KAAK,EAAE;gBACN,eAAe,EAAE,IAAI,CAAC,UAAU;gBAChC,KAAK,EAAE,IAAI,CAAC,QAAQ;aACpB;YAED,EAAC,MAAM,qDAAC,KAAK,EAAC,kBAAkB,EAAC,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,aAAa,QAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,GAAI;YACxI,cAAc,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,YAAmC,CAAC,CACnF,CACP,CAAC;IACH,CAAC;IAqCM,aAAa,CAAC,KAAwB;QAC5C,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC5B,CAAC;IAGM,aAAa,CAAC,KAA8B;QAClD,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,YAAY,EAAE,MAAM;YACpB,KAAK,EAAE;gBACN,WAAW,EAAE,IAAI,CAAC,iBAAiB;aACnC;SACD,CAAC,CAAC;IACJ,CAAC;IAGM,mBAAmB,CAAC,KAAoC;QAC9D,mBAAmB,CAAC,KAAK,EAAE,GAAG,EAAE;YAC/B,IAAI,CAAC;gBACJ,KAAK,GAAG,SAAS,CAAsB,KAAe,CAAC,CAAC;YACzD,CAAC;YAAC,WAAM,CAAC;YAET,CAAC;YACD,QAAQ,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;QACvC,CAAC,CAAC,CAAC;IACJ,CAAC;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC7C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD;AAvFa;IAHZ,aAAa,CAAC,QAAQ,CAAC;qCAGuC","sourcesContent":["import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { SpanFC } from '../../internal/functional-components/span/component';\nimport type {\n\tBadgeAPI,\n\tBadgeStates,\n\tFocusableElement,\n\tInternalButtonProps,\n\tKolFocusOptions,\n\tKoliBriIconsProp,\n\tLabelPropType,\n\tPropColor,\n\tStringified,\n} from '../../schema';\nimport { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor, validateIcons } from '../../schema';\n\nimport { createUniqueId } from '../../utils/dev.utils';\n\nimport type { JSX } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport clsx from '../../utils/clsx';\nimport { createCtaRef, delegateFocus } from '../../utils/element-interaction';\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\n/*\n The Badge component allows you to visually highlight specific information.\n * In addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.\n /\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements BadgeAPI, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolBadgeElement;\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\tprivate readonly id = createUniqueId('badge-label');\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\n\tprivate renderSmartButton(props: InternalButtonProps): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\tclass=\"kol-badge__smart-button\"\n\t\t\t\t_ariaControls={this.id}\n\t\t\t\t_ariaDescription={props._ariaDescription}\n\t\t\t\t_variant={props._variant}\n\t\t\t\t_customClass={props._customClass}\n\t\t\t\t_disabled={props._disabled}\n\t\t\t\t_hideLabel={true}\n\t\t\t\t_icons={props._icons}\n\t\t\t\t_id={props._id}\n\t\t\t\t_label={props._label}\n\t\t\t\t_on={props._on}\n\t\t\t\t_tooltipAlign={props._tooltipAlign}\n\t\t\t/>\n\t\t);\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\tpublic render(): JSX.Element {\n\t\tconst hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;\n\n\t\treturn (\n\t\t\t<span\n\t\t\t\tclass={clsx('kol-badge', {\n\t\t\t\t\t'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t})}\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SpanFC class=\"kol-badge__label\" id={hasSmartButton ? this.id : undefined} allowMarkdown icons={this.state._icons} label={this._label} />\n\t\t\t\t{hasSmartButton && this.renderSmartButton(this.state._smartButton as InternalButtonProps)}\n\t\t\t</span>\n\t\t);\n\t}\n\n\t/\n\t Defines the backgroundColor and foregroundColor.\n\t /\n\t@Prop() public _color?: Stringified<PropColor> = '#000';\n\n\t/\n\t Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t /\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label!: LabelPropType;\n\n\t/\n\t Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<InternalButtonProps>;\n\n\t@State() public state: BadgeStates = {\n\t\t_color: {\n\t\t\tbackgroundColor: '#000',\n\t\t\tforegroundColor: '#fff',\n\t\t},\n\t\t_icons: {},\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tconst colorPair = handleColorChange(value);\n\t\tthis.bgColorStr = colorPair.backgroundColor;\n\t\tthis.colorStr = colorPair.foregroundColor;\n\t};\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: KoliBriIconsProp): void {\n\t\tvalidateIcons(this, value);\n\t}\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#000',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: InternalButtonProps \| string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<InternalButtonProps>(value as string);\n\t\t\t} catch {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateIcons(this._icons);\n\t\tthis.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"]}
1	+ {"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/badge/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { SpanFC } from '../../internal/functional-components/span/component';\nimport type {\n\tBadgeAPI,\n\tBadgeStates,\n\tFocusableElement,\n\tInternalButtonProps,\n\tKolFocusOptions,\n\tKoliBriIconsProp,\n\tLabelPropType,\n\tPropColor,\n\tStringified,\n} from '../../schema';\nimport { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor, validateIcons } from '../../schema';\n\nimport { createUniqueId } from '../../utils/dev.utils';\n\nimport type { JSX } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport clsx from '../../utils/clsx';\nimport { createCtaRef, delegateFocus } from '../../utils/element-interaction';\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\n/*\n The Badge component allows you to visually highlight specific information.\n * In addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.\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@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements BadgeAPI, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolBadgeElement;\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\tprivate readonly id = createUniqueId('badge-label');\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\n\tprivate renderSmartButton(props: InternalButtonProps): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\tclass=\"kol-badge__smart-button\"\n\t\t\t\t_ariaControls={this.id}\n\t\t\t\t_ariaDescription={props._ariaDescription}\n\t\t\t\t_variant={props._variant}\n\t\t\t\t_customClass={props._customClass}\n\t\t\t\t_disabled={props._disabled}\n\t\t\t\t_hideLabel={true}\n\t\t\t\t_icons={props._icons}\n\t\t\t\t_id={props._id}\n\t\t\t\t_label={props._label}\n\t\t\t\t_on={props._on}\n\t\t\t\t_tooltipAlign={props._tooltipAlign}\n\t\t\t/>\n\t\t);\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\tpublic render(): JSX.Element {\n\t\tconst hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;\n\n\t\treturn (\n\t\t\t<span\n\t\t\t\tclass={clsx('kol-badge', {\n\t\t\t\t\t'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t})}\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SpanFC class=\"kol-badge__label\" id={hasSmartButton ? this.id : undefined} allowMarkdown icons={this.state._icons} label={this._label} />\n\t\t\t\t{hasSmartButton && this.renderSmartButton(this.state._smartButton as InternalButtonProps)}\n\t\t\t</span>\n\t\t);\n\t}\n\n\t/\n\t Defines the backgroundColor and foregroundColor.\n\t /\n\t@Prop() public _color?: Stringified<PropColor> = '#000';\n\n\t/\n\t Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t /\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label!: LabelPropType;\n\n\t/\n\t Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<InternalButtonProps>;\n\n\t@State() public state: BadgeStates = {\n\t\t_color: {\n\t\t\tbackgroundColor: '#000',\n\t\t\tforegroundColor: '#fff',\n\t\t},\n\t\t_icons: {},\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tconst colorPair = handleColorChange(value);\n\t\tthis.bgColorStr = colorPair.backgroundColor;\n\t\tthis.colorStr = colorPair.foregroundColor;\n\t};\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: KoliBriIconsProp): void {\n\t\tvalidateIcons(this, value);\n\t}\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#000',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: InternalButtonProps \| string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<InternalButtonProps>(value as string);\n\t\t\t} catch {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateIcons(this._icons);\n\t\tthis.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"]}

package/dist/collection/components/badge/style.css CHANGED Viewed

@@ -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=1784281062679"); /* IE9*/
-  src: url("kolicons.eot?t=1784281062679#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1784281062679") format("woff2"), url("kolicons.woff?t=1784281062679") format("woff"), url("kolicons.ttf?t=1784281062679") format("truetype"), url("kolicons.svg?t=1784281062679#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/breadcrumb/style.css CHANGED Viewed

@@ -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=1784281062679"); /* IE9*/
-  src: url("kolicons.eot?t=1784281062679#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1784281062679") format("woff2"), url("kolicons.woff?t=1784281062679") format("woff"), url("kolicons.ttf?t=1784281062679") format("truetype"), url("kolicons.svg?t=1784281062679#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/button/shadow.js CHANGED Viewed

@@ -20,7 +20,7 @@ export class KolButton {
     async focus(options) { }
     async click() { }
     render() {
-        return (h(KolButtonWcTag, { key: '1d5a15e4e38f1c51b52d377661ad34f0d5b5e5a0', ref: this.ctaRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, h("slot", { key: '6a429fbfe82675a50cc4e8598a83669bdcd6d608', name: "expert", slot: "expert" })));
+        return (h(KolButtonWcTag, { key: '676a47a291dc485c9bd2fb41ccd87a7d3c267d59', ref: this.ctaRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, h("slot", { key: '393c40fe3beb2cb2fe1f2533feb7a3a99ee3b4cf', name: "expert", slot: "expert" })));
     }
     static get is() { return "kol-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/button/shadow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/button/shadow.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAqB5D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAc7F,MAAM,OAAO,SAAS;IAPtB;QASoB,WAAM,GAAG,YAAY,EAA0B,CAAC;QAyFpD,cAAS,GAAa,KAAK,CAAC;QAO5B,eAAU,GAAa,KAAK,CAAC;QAU7B,YAAO,GAAoB,KAAK,CAAC;QAsCjC,kBAAa,GAA0B,KAAK,CAAC;QAK7C,UAAK,GAAwB,QAAQ,CAAC;KAWrD;IAzJO,KAAK,CAAC,QAAQ;QACpB,OAAO,IAAI,CAAC,MAAM,CAAC;IACpB,CAAC;IASY,AAAN,KAAK,CAAC,KAAK,CAAC,OAAyB,IAAkB,CAAC;IAOlD,AAAN,KAAK,CAAC,KAAK,KAAmB,CAAC;IAE/B,MAAM;QACZ,OAAO,CACN,EAAC,cAAc,qDACd,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CACzB,CACjB,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GD;AA9Ia;IAHZ,aAAa,CAAC,QAAQ,CAAC;sCAGuC;AAOlD;IADZ,aAAa,CAAC,QAAQ,CAAC;sCACc","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonProps,\n\tButtonTypePropType,\n\tClickableElement,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tInlinePropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\n\n/*\n The Button component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions.\n \n @slot expert - Custom label content, e.g. for rich text or icons.\n /\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements ButtonProps, ClickableElement, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolButtonElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\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<StencilUnknown> {\n\t\treturn this._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\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_inline={this._inline}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</KolButtonWcTag>\n\t\t);\n\t}\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?: AccessKeyPropType;\n\n\t/\n\t Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t /\n\t@Prop() public _ariaControls?: string;\n\n\t/\n\t Defines the value for the aria-description attribute.\n\t /\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/\n\t Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t /\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/\n\t Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t /\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/\n\t Defines the custom class attribute if _variant=\"custom\" is set.\n\t /\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/\n\t Makes the element not focusable and ignore all events.\n\t /\n\t@Prop() public _disabled?: 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 icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t /\n\t@Prop() public _icons?: IconsPropType;\n\n\t/\n\t Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t /\n\t@Prop() public _inline?: InlinePropType = false;\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 technical name of an input field.\n\t /\n\t@Prop() public _name?: string;\n\n\t/\n\t Defines the callback functions for button events.\n\t /\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/\n\t Defines the role of the components primary element.\n\t \n\t @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.\n\t /\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\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 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 Defines either the type of the component or of the components interactive element.\n\t /\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/\n\t Defines the value of the element.\n\t /\n\t@Prop() public _value?: StencilUnknown;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType;\n}\n"]}
1	+ {"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/button/shadow.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAqB5D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAc7F,MAAM,OAAO,SAAS;IAPtB;QASoB,WAAM,GAAG,YAAY,EAA0B,CAAC;QAyFpD,cAAS,GAAa,KAAK,CAAC;QAO5B,eAAU,GAAa,KAAK,CAAC;QAU7B,YAAO,GAAoB,KAAK,CAAC;QAsCjC,kBAAa,GAA0B,KAAK,CAAC;QAK7C,UAAK,GAAwB,QAAQ,CAAC;KAWrD;IAzJO,KAAK,CAAC,QAAQ;QACpB,OAAO,IAAI,CAAC,MAAM,CAAC;IACpB,CAAC;IASY,AAAN,KAAK,CAAC,KAAK,CAAC,OAAyB,IAAkB,CAAC;IAOlD,AAAN,KAAK,CAAC,KAAK,KAAmB,CAAC;IAE/B,MAAM;QACZ,OAAO,CACN,EAAC,cAAc,qDACd,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CACzB,CACjB,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GD;AA9Ia;IAHZ,aAAa,CAAC,QAAQ,CAAC;sCAGuC;AAOlD;IADZ,aAAa,CAAC,QAAQ,CAAC;sCACc","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonProps,\n\tButtonTypePropType,\n\tClickableElement,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tInlinePropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\n\n/*\n The Button component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions.\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@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements ButtonProps, ClickableElement, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolButtonElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\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<StencilUnknown> {\n\t\treturn this._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\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_inline={this._inline}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</KolButtonWcTag>\n\t\t);\n\t}\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?: AccessKeyPropType;\n\n\t/\n\t Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t /\n\t@Prop() public _ariaControls?: string;\n\n\t/\n\t Defines the value for the aria-description attribute.\n\t /\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/\n\t Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t /\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/\n\t Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t /\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/\n\t Defines the custom class attribute if _variant=\"custom\" is set.\n\t /\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/\n\t Makes the element not focusable and ignore all events.\n\t /\n\t@Prop() public _disabled?: 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 icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t /\n\t@Prop() public _icons?: IconsPropType;\n\n\t/\n\t Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t /\n\t@Prop() public _inline?: InlinePropType = false;\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 technical name of an input field.\n\t /\n\t@Prop() public _name?: string;\n\n\t/\n\t Defines the callback functions for button events.\n\t /\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/\n\t Defines the role of the components primary element.\n\t \n\t @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.\n\t /\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\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 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 Defines either the type of the component or of the components interactive element.\n\t /\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/\n\t Defines the value of the element.\n\t /\n\t@Prop() public _value?: StencilUnknown;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType;\n}\n"]}

package/dist/collection/components/button/style.css CHANGED Viewed

@@ -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=1784281062679"); /* IE9*/
-  src: url("kolicons.eot?t=1784281062679#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1784281062679") format("woff2"), url("kolicons.woff?t=1784281062679") format("woff"), url("kolicons.ttf?t=1784281062679") format("truetype"), url("kolicons.svg?t=1784281062679#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/button-link/style.css CHANGED Viewed

@@ -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=1784281062679"); /* IE9*/
-  src: url("kolicons.eot?t=1784281062679#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1784281062679") format("woff2"), url("kolicons.woff?t=1784281062679") format("woff"), url("kolicons.ttf?t=1784281062679") format("truetype"), url("kolicons.svg?t=1784281062679#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/card/style.css CHANGED Viewed

@@ -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=1784281062679"); /* IE9*/
-  src: url("kolicons.eot?t=1784281062679#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1784281062679") format("woff2"), url("kolicons.woff?t=1784281062679") format("woff"), url("kolicons.ttf?t=1784281062679") format("truetype"), url("kolicons.svg?t=1784281062679#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/combobox/shadow.js CHANGED Viewed

@@ -204,9 +204,11 @@ export class KolCombobox {
                 break;
             case 'Esc':
             case 'Escape': {
-                this._isOpen = false;
-                event.preventDefault();
-                (_b = this.ctaRef.el) === null || _b === void 0 ? void 0 : _b.focus();
+                if (this._isOpen) {
+                    event.preventDefault();
+                    this._isOpen = false;
+                    (_b = this.ctaRef.el) === null || _b === void 0 ? void 0 : _b.focus();
+                }
                 break;
             }
             case 'Enter':