@public-ui/components 4.3.1-rc.4 → 4.4.0-rc.0

package/dist/cjs/{value-number-clamped-CROL2kPp.js → value-number-clamped-BCYQBuS8.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var normalizers = require('./normalizers-DFaq-Isv.js');
+var normalizers = require('./normalizers-CxgZAKTH.js');
 
 const maxProp = normalizers.createPropDefinition('max', 100, normalizers.normalizeNumber, (v) => v > 0);
 
@@ -23,6 +23,6 @@ const clampedNumberValueProp = normalizers.createDependentPropDefinition('value'
 exports.clampedNumberValueProp = clampedNumberValueProp;
 exports.maxProp = maxProp;
 exports.unitProp = unitProp;
-//# sourceMappingURL=value-number-clamped-CROL2kPp.js.map
+//# sourceMappingURL=value-number-clamped-BCYQBuS8.js.map
 
-//# sourceMappingURL=value-number-clamped-CROL2kPp.js.map
+//# sourceMappingURL=value-number-clamped-BCYQBuS8.js.map

package/dist/cjs/{value-number-clamped-CROL2kPp.js.map → value-number-clamped-BCYQBuS8.js.map}

@@ -1 +1 @@
-{"version":3,"file":"value-number-clamped-CROL2kPp.js","sources":["src/internal/props/max.ts","src/internal/props/unit.ts","src/internal/props/value-number-clamped.ts"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeNumber } from './helpers/normalizers';\n\n/**\n * Max prop for upper boundary of progress and meter elements\n *\n * Description:\n * The max attribute defines the upper bound of a range. It is used by progress bars and\n * meter elements to indicate the total or maximum achievable value.\n *\n * Usage (according to W3C HTML specification and WAI-ARIA):\n * - Must be a positive number greater than 0\n * - Corresponds to the HTML progress element's max attribute\n * - Maps to aria-valuemax in WAI-ARIA to communicate the upper limit to assistive technologies\n * - Default value is 100 (representing 100%)\n *\n * Accessibility:\n * - Screen readers use aria-valuemax together with aria-valuenow to announce progress status\n * - The relationship between value and max must be programmatically determinable (WCAG 1.3.1 Info and Relationships)\n *\n * @see https://html.spec.whatwg.org/multipage/form-elements.html#attr-progress-max\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuemax\n * @see https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html\n */\nexport type MaxProp = SimpleProp<'max', number>;\nexport const maxProp = createPropDefinition<MaxProp>('max', 100, normalizeNumber, (v) => v > 0);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Unit prop for value display formatting\n *\n * Description:\n * Defines the unit of measurement to display alongside a numeric value (e.g., \"%\", \"MB\", \"km/h\").\n * The unit helps users understand the meaning and scale of the displayed value.\n *\n * Usage:\n * - Must be a non-empty string\n * - Default is \"%\" (percentage)\n * - The unit is appended to the displayed value for visual users\n * - Common units: \"%\", \"MB\", \"s\", \"€\", \"kg\"\n *\n * Accessibility:\n * - The unit must be part of the accessible value description for screen reader users\n * - Consider using aria-valuetext to create human-readable descriptions that include the unit\n *   (e.g., aria-valuetext=\"75 percent\" instead of just the number 75)\n * - Units convey meaningful information and must be programmatically determinable\n *   (WCAG 1.3.1 Info and Relationships)\n *\n * @see https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuetext\n */\nexport type UnitProp = SimpleProp<'unit', string>;\nexport const unitProp = createPropDefinition<UnitProp>('unit', '%', normalizeString, (v) => v.length > 0);\n","import type { SimpleProp } from './helpers/factory';\nimport { createDependentPropDefinition } from './helpers/factory';\nimport { normalizeNumber } from './helpers/normalizers';\n\n/**\n * Clamped value prop for bounded numeric ranges\n *\n * Description:\n * Represents a numeric value that is automatically clamped between a minimum and maximum.\n * If the provided value falls outside the allowed range, it is silently adjusted to the\n * nearest boundary. This ensures the value always stays within valid bounds.\n *\n * Usage (according to W3C HTML specification and WAI-ARIA):\n * - Depends on min and max props to define the valid range\n * - Corresponds to the HTML <progress> or <meter> element's value, min, and max attributes\n * - Maps to aria-valuenow, aria-valuemin, and aria-valuemax in WAI-ARIA\n * - Clamping happens transparently; no error is raised for out-of-range inputs\n *\n * Accessibility:\n * - The value boundaries must be programmatically determinable (WCAG 1.3.1 Info and Relationships)\n * - Screen readers use aria-valuemin, aria-valuenow, and aria-valuemax to announce range status\n * - Consider providing aria-valuetext for a human-readable description of the value\n *\n * @see https://html.spec.whatwg.org/multipage/form-elements.html#the-meter-element\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuenow\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuemin\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuemax\n */\nexport type ClampedNumberValueProp = SimpleProp<'value', number>;\n\nexport type ClampedNumberValueDeps = {\n\tmin: number;\n\tmax: number;\n};\n\nexport const clampedNumberValueProp = createDependentPropDefinition<ClampedNumberValueProp, ClampedNumberValueDeps>(\n\t'value',\n\t0,\n\t(value, deps) => {\n\t\tconst normalized = normalizeNumber(value);\n\t\tif (normalized < deps.min) {\n\t\t\treturn deps.min;\n\t\t} else if (normalized > deps.max) {\n\t\t\treturn deps.max;\n\t\t}\n\t\treturn normalized;\n\t},\n\t(v) => v !== undefined && v !== null,\n);\n"],"names":["createPropDefinition","normalizeNumber","normalizeString","createDependentPropDefinition"],"mappings":";;;;;;;MA0Ba,OAAO,GAAGA,gCAAoB,CAAU,KAAK,EAAE,GAAG,EAAEC,2BAAe,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC;;MCEjF,QAAQ,GAAGD,gCAAoB,CAAW,MAAM,EAAE,GAAG,EAAEE,2BAAe,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC;;ACOjG,MAAM,sBAAsB,GAAGC,yCAA6B,CAClE,OAAO,EACP,CAAC,EACD,CAAC,KAAK,EAAE,IAAI,KAAI;AACf,IAAA,MAAM,UAAU,GAAGF,2BAAe,CAAC,KAAK,CAAC;AACzC,IAAA,IAAI,UAAU,GAAG,IAAI,CAAC,GAAG,EAAE;QAC1B,OAAO,IAAI,CAAC,GAAG;;AACT,SAAA,IAAI,UAAU,GAAG,IAAI,CAAC,GAAG,EAAE;QACjC,OAAO,IAAI,CAAC,GAAG;;AAEhB,IAAA,OAAO,UAAU;AAClB,CAAC,EACD,CAAC,CAAC,KAAK,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,IAAI;;;;;;"}
+{"version":3,"file":"value-number-clamped-BCYQBuS8.js","sources":["src/internal/props/max.ts","src/internal/props/unit.ts","src/internal/props/value-number-clamped.ts"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeNumber } from './helpers/normalizers';\n\n/**\n * Max prop for upper boundary of progress and meter elements\n *\n * Description:\n * The max attribute defines the upper bound of a range. It is used by progress bars and\n * meter elements to indicate the total or maximum achievable value.\n *\n * Usage (according to W3C HTML specification and WAI-ARIA):\n * - Must be a positive number greater than 0\n * - Corresponds to the HTML progress element's max attribute\n * - Maps to aria-valuemax in WAI-ARIA to communicate the upper limit to assistive technologies\n * - Default value is 100 (representing 100%)\n *\n * Accessibility:\n * - Screen readers use aria-valuemax together with aria-valuenow to announce progress status\n * - The relationship between value and max must be programmatically determinable (WCAG 1.3.1 Info and Relationships)\n *\n * @see https://html.spec.whatwg.org/multipage/form-elements.html#attr-progress-max\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuemax\n * @see https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html\n */\nexport type MaxProp = SimpleProp<'max', number>;\nexport const maxProp = createPropDefinition<MaxProp>('max', 100, normalizeNumber, (v) => v > 0);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Unit prop for value display formatting\n *\n * Description:\n * Defines the unit of measurement to display alongside a numeric value (e.g., \"%\", \"MB\", \"km/h\").\n * The unit helps users understand the meaning and scale of the displayed value.\n *\n * Usage:\n * - Must be a non-empty string\n * - Default is \"%\" (percentage)\n * - The unit is appended to the displayed value for visual users\n * - Common units: \"%\", \"MB\", \"s\", \"€\", \"kg\"\n *\n * Accessibility:\n * - The unit must be part of the accessible value description for screen reader users\n * - Consider using aria-valuetext to create human-readable descriptions that include the unit\n *   (e.g., aria-valuetext=\"75 percent\" instead of just the number 75)\n * - Units convey meaningful information and must be programmatically determinable\n *   (WCAG 1.3.1 Info and Relationships)\n *\n * @see https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuetext\n */\nexport type UnitProp = SimpleProp<'unit', string>;\nexport const unitProp = createPropDefinition<UnitProp>('unit', '%', normalizeString, (v) => v.length > 0);\n","import type { SimpleProp } from './helpers/factory';\nimport { createDependentPropDefinition } from './helpers/factory';\nimport { normalizeNumber } from './helpers/normalizers';\n\n/**\n * Clamped value prop for bounded numeric ranges\n *\n * Description:\n * Represents a numeric value that is automatically clamped between a minimum and maximum.\n * If the provided value falls outside the allowed range, it is silently adjusted to the\n * nearest boundary. This ensures the value always stays within valid bounds.\n *\n * Usage (according to W3C HTML specification and WAI-ARIA):\n * - Depends on min and max props to define the valid range\n * - Corresponds to the HTML <progress> or <meter> element's value, min, and max attributes\n * - Maps to aria-valuenow, aria-valuemin, and aria-valuemax in WAI-ARIA\n * - Clamping happens transparently; no error is raised for out-of-range inputs\n *\n * Accessibility:\n * - The value boundaries must be programmatically determinable (WCAG 1.3.1 Info and Relationships)\n * - Screen readers use aria-valuemin, aria-valuenow, and aria-valuemax to announce range status\n * - Consider providing aria-valuetext for a human-readable description of the value\n *\n * @see https://html.spec.whatwg.org/multipage/form-elements.html#the-meter-element\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuenow\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuemin\n * @see https://www.w3.org/TR/wai-aria-1.2/#aria-valuemax\n */\nexport type ClampedNumberValueProp = SimpleProp<'value', number>;\n\nexport type ClampedNumberValueDeps = {\n\tmin: number;\n\tmax: number;\n};\n\nexport const clampedNumberValueProp = createDependentPropDefinition<ClampedNumberValueProp, ClampedNumberValueDeps>(\n\t'value',\n\t0,\n\t(value, deps) => {\n\t\tconst normalized = normalizeNumber(value);\n\t\tif (normalized < deps.min) {\n\t\t\treturn deps.min;\n\t\t} else if (normalized > deps.max) {\n\t\t\treturn deps.max;\n\t\t}\n\t\treturn normalized;\n\t},\n\t(v) => v !== undefined && v !== null,\n);\n"],"names":["createPropDefinition","normalizeNumber","normalizeString","createDependentPropDefinition"],"mappings":";;;;;;;MA0Ba,OAAO,GAAGA,gCAAoB,CAAU,KAAK,EAAE,GAAG,EAAEC,2BAAe,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC;;MCEjF,QAAQ,GAAGD,gCAAoB,CAAW,MAAM,EAAE,GAAG,EAAEE,2BAAe,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC;;ACOjG,MAAM,sBAAsB,GAAGC,yCAA6B,CAClE,OAAO,EACP,CAAC,EACD,CAAC,KAAK,EAAE,IAAI,KAAI;AACf,IAAA,MAAM,UAAU,GAAGF,2BAAe,CAAC,KAAK,CAAC;AACzC,IAAA,IAAI,UAAU,GAAG,IAAI,CAAC,GAAG,EAAE;QAC1B,OAAO,IAAI,CAAC,GAAG;;AACT,SAAA,IAAI,UAAU,GAAG,IAAI,CAAC,GAAG,EAAE;QACjC,OAAO,IAAI,CAAC,GAAG;;AAEhB,IAAA,OAAO,UAAU;AAClB,CAAC,EACD,CAAC,CAAC,KAAK,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,IAAI;;;;;;"}

package/dist/cjs/{variant-quote-DmZgXNoy.js → variant-quote-Bsb58gYB.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var normalizers = require('./normalizers-DFaq-Isv.js');
+var normalizers = require('./normalizers-CxgZAKTH.js');
 
 const LOADING_OPTIONS = ['eager', 'lazy'];
 const LOADING_SET = new Set(LOADING_OPTIONS);
@@ -15,6 +15,6 @@ const variantQuoteProp = normalizers.createPropDefinition('variant', 'inline', (
 
 exports.loadingProp = loadingProp;
 exports.variantQuoteProp = variantQuoteProp;
-//# sourceMappingURL=variant-quote-DmZgXNoy.js.map
+//# sourceMappingURL=variant-quote-Bsb58gYB.js.map
 
-//# sourceMappingURL=variant-quote-DmZgXNoy.js.map
+//# sourceMappingURL=variant-quote-Bsb58gYB.js.map

package/dist/cjs/{variant-quote-DmZgXNoy.js.map → variant-quote-Bsb58gYB.js.map}

@@ -1 +1 @@
-{"version":3,"file":"variant-quote-DmZgXNoy.js","sources":["src/internal/props/loading.ts","src/internal/props/variant-quote.ts"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Loading prop for lazy-loading behavior of embedded content\n *\n * Description:\n * The loading attribute controls when the browser should start fetching the resource.\n * Lazy loading defers loading of off-screen content until it is near the viewport,\n * improving initial page load performance.\n *\n * Usage (according to W3C HTML specification):\n * - \"lazy\": Defers loading until the element approaches the viewport\n * - \"eager\": Loads the resource immediately regardless of viewport position\n * - Default is \"lazy\" to optimize performance\n *\n * Accessibility:\n * - Lazy loading must not interfere with assistive technology access to content\n * - Content must be available when focused or navigated to via keyboard (WCAG 2.1.1 Keyboard)\n * - Ensure lazy-loaded content does not cause unexpected layout shifts (WCAG 2.3.3 Animation from Interactions)\n *\n * @see https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes\n * @see https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html\n */\nconst LOADING_OPTIONS = ['eager', 'lazy'] as const;\nexport type LoadingType = (typeof LOADING_OPTIONS)[number];\nexport type LoadingProp = SimpleProp<'loading', LoadingType>;\n\nconst LOADING_SET: ReadonlySet<string> = new Set(LOADING_OPTIONS);\n\nexport const loadingProp = createPropDefinition<LoadingProp>(\n\t'loading',\n\t'lazy',\n\t(value: unknown) => normalizeString(value) as LoadingType,\n\t(v) => LOADING_SET.has(v),\n);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Variant prop for quotation display style\n *\n * Description:\n * Determines whether the quotation is rendered as a block-level (<blockquote>) or\n * inline (<q>) element. The choice affects both visual layout and semantic HTML structure.\n *\n * Usage (according to W3C HTML specification):\n * - \"block\": Renders as <blockquote> — for extended, standalone quotations from an external source\n * - \"inline\": Renders as <q> — for short inline quotations within flowing text (default)\n * - The browser automatically adds appropriate quotation marks around <q> elements\n * - Both elements support the cite attribute to reference the quotation source\n *\n * Accessibility:\n * - Semantic HTML elements (<blockquote>, <q>) help assistive technologies convey content structure\n * - The quotation structure must be programmatically determinable (WCAG 1.3.1 Info and Relationships)\n * - Block quotes are announced as distinct sections by screen readers\n *\n * @see https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element\n * @see https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element\n * @see https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html\n */\nconst QUOTE_VARIANT_OPTIONS = ['block', 'inline'] as const;\nexport type QuoteVariantType = (typeof QUOTE_VARIANT_OPTIONS)[number];\nexport type VariantQuoteProp = SimpleProp<'variant', QuoteVariantType>;\n\nconst QUOTE_VARIANT_SET: ReadonlySet<string> = new Set(QUOTE_VARIANT_OPTIONS);\n\nexport const variantQuoteProp = createPropDefinition<VariantQuoteProp>(\n\t'variant',\n\t'inline',\n\t(value: unknown) => normalizeString(value) as QuoteVariantType,\n\t(v) => QUOTE_VARIANT_SET.has(v),\n);\n"],"names":["createPropDefinition","normalizeString"],"mappings":";;;;;;;AAyBA,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,MAAM,CAAU;AAIlD,MAAM,WAAW,GAAwB,IAAI,GAAG,CAAC,eAAe,CAAC;AAE1D,MAAM,WAAW,GAAGA,gCAAoB,CAC9C,SAAS,EACT,MAAM,EACN,CAAC,KAAc,KAAKC,2BAAe,CAAC,KAAK,CAAgB,EACzD,CAAC,CAAC,KAAK,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;;ACT1B,MAAM,qBAAqB,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU;AAI1D,MAAM,iBAAiB,GAAwB,IAAI,GAAG,CAAC,qBAAqB,CAAC;AAEtE,MAAM,gBAAgB,GAAGD,gCAAoB,CACnD,SAAS,EACT,QAAQ,EACR,CAAC,KAAc,KAAKC,2BAAe,CAAC,KAAK,CAAqB,EAC9D,CAAC,CAAC,KAAK,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;;;;;"}
+{"version":3,"file":"variant-quote-Bsb58gYB.js","sources":["src/internal/props/loading.ts","src/internal/props/variant-quote.ts"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Loading prop for lazy-loading behavior of embedded content\n *\n * Description:\n * The loading attribute controls when the browser should start fetching the resource.\n * Lazy loading defers loading of off-screen content until it is near the viewport,\n * improving initial page load performance.\n *\n * Usage (according to W3C HTML specification):\n * - \"lazy\": Defers loading until the element approaches the viewport\n * - \"eager\": Loads the resource immediately regardless of viewport position\n * - Default is \"lazy\" to optimize performance\n *\n * Accessibility:\n * - Lazy loading must not interfere with assistive technology access to content\n * - Content must be available when focused or navigated to via keyboard (WCAG 2.1.1 Keyboard)\n * - Ensure lazy-loaded content does not cause unexpected layout shifts (WCAG 2.3.3 Animation from Interactions)\n *\n * @see https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes\n * @see https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html\n */\nconst LOADING_OPTIONS = ['eager', 'lazy'] as const;\nexport type LoadingType = (typeof LOADING_OPTIONS)[number];\nexport type LoadingProp = SimpleProp<'loading', LoadingType>;\n\nconst LOADING_SET: ReadonlySet<string> = new Set(LOADING_OPTIONS);\n\nexport const loadingProp = createPropDefinition<LoadingProp>(\n\t'loading',\n\t'lazy',\n\t(value: unknown) => normalizeString(value) as LoadingType,\n\t(v) => LOADING_SET.has(v),\n);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Variant prop for quotation display style\n *\n * Description:\n * Determines whether the quotation is rendered as a block-level (<blockquote>) or\n * inline (<q>) element. The choice affects both visual layout and semantic HTML structure.\n *\n * Usage (according to W3C HTML specification):\n * - \"block\": Renders as <blockquote> — for extended, standalone quotations from an external source\n * - \"inline\": Renders as <q> — for short inline quotations within flowing text (default)\n * - The browser automatically adds appropriate quotation marks around <q> elements\n * - Both elements support the cite attribute to reference the quotation source\n *\n * Accessibility:\n * - Semantic HTML elements (<blockquote>, <q>) help assistive technologies convey content structure\n * - The quotation structure must be programmatically determinable (WCAG 1.3.1 Info and Relationships)\n * - Block quotes are announced as distinct sections by screen readers\n *\n * @see https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element\n * @see https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element\n * @see https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html\n */\nconst QUOTE_VARIANT_OPTIONS = ['block', 'inline'] as const;\nexport type QuoteVariantType = (typeof QUOTE_VARIANT_OPTIONS)[number];\nexport type VariantQuoteProp = SimpleProp<'variant', QuoteVariantType>;\n\nconst QUOTE_VARIANT_SET: ReadonlySet<string> = new Set(QUOTE_VARIANT_OPTIONS);\n\nexport const variantQuoteProp = createPropDefinition<VariantQuoteProp>(\n\t'variant',\n\t'inline',\n\t(value: unknown) => normalizeString(value) as QuoteVariantType,\n\t(v) => QUOTE_VARIANT_SET.has(v),\n);\n"],"names":["createPropDefinition","normalizeString"],"mappings":";;;;;;;AAyBA,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,MAAM,CAAU;AAIlD,MAAM,WAAW,GAAwB,IAAI,GAAG,CAAC,eAAe,CAAC;AAE1D,MAAM,WAAW,GAAGA,gCAAoB,CAC9C,SAAS,EACT,MAAM,EACN,CAAC,KAAc,KAAKC,2BAAe,CAAC,KAAK,CAAgB,EACzD,CAAC,CAAC,KAAK,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;;ACT1B,MAAM,qBAAqB,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU;AAI1D,MAAM,iBAAiB,GAAwB,IAAI,GAAG,CAAC,qBAAqB,CAAC;AAEtE,MAAM,gBAAgB,GAAGD,gCAAoB,CACnD,SAAS,EACT,QAAQ,EACR,CAAC,KAAc,KAAKC,2BAAe,CAAC,KAAK,CAAqB,EAC9D,CAAC,CAAC,KAAK,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;;;;;"}

package/dist/collection/components/_skeleton/web-components/click-button/component.js

@@ -25,7 +25,7 @@ export class KolClickButton extends BaseWebComponent {
         labelProp.apply(this._label, (v) => this.setRenderProp('label', v));
     }
     render() {
-        return (h(Host, { key: '5f9a280060afb8e7dcb952fded005db578fe0dfe' }, h(ClickButtonFC, { key: '9e036f24c9e7fe53d9128470dcd1b2f49b593412', label: this.getRenderProp('label'), refButton: this.buttonRef, handleClick: this.handleClick })));
+        return (h(Host, { key: '76c3988fe1fedfac8b4dda8fba68544e4d7092bc' }, h(ClickButtonFC, { key: 'ad43bcb3d2cbf7c89d8c4276dc17b04955a7f28f', label: this.getRenderProp('label'), refButton: this.buttonRef, handleClick: this.handleClick })));
     }
     static get is() { return "kol-click-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/_skeleton/web-components/skeleton/component.js

@@ -63,7 +63,7 @@ export class KolSkeleton extends BaseWebComponent {
         }
     }
     render() {
-        return (h(Host, { key: '5119d243ec703aac02aa2f5e319753c322876321' }, h(SkeletonFC, { key: '9c458ea251e9a2f7437fbbe8114f98e4e277da65', count: this.count, label: this.label, name: this.getRenderProp('name'), handleClick: this.handleClick, onLoaded: this.loaded, onRendered: this.rendered, show: this.show, refButton: this.buttonRef })));
+        return (h(Host, { key: '4c0c92a442827c3def7541b7f043e7e9b11fc5d4' }, h(SkeletonFC, { key: 'a1ef9d8d74c6a2008cb39c3efea5ec03286f82fc', count: this.count, label: this.label, name: this.getRenderProp('name'), handleClick: this.handleClick, onLoaded: this.loaded, onRendered: this.rendered, show: this.show, refButton: this.buttonRef })));
     }
     static get is() { return "kol-skeleton"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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