@public-ui/components 1.5.1 → 1.5.2-rc.1

package/dist/kolibri/kolibri.esm.js.map

@@ -1 +1 @@
-{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","globalScripts","bootstrapLazy","JSON","parse"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.2.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":";;;gQAmBA,MAAMA,EAAe,KAkCjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAiB3E,GAAuBF,IAAe,GAAI,CACtCE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IAGrD,CAcI,OAAOC,EAAeJ,EAAK,ECrF/BH,IAAeQ,MAAKC,IAClBC,IACA,OAAOC,EAAcC,KAAAC,MAAA,glbAAuCJ,EAAA"}
+{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","globalScripts","bootstrapLazy","JSON","parse"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.2.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":";;;gQAmBA,MAAMA,EAAe,KAkCjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAiB3E,GAAuBF,IAAe,GAAI,CACtCE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IAGrD,CAcI,OAAOC,EAAeJ,EAAK,ECrF/BH,IAAeQ,MAAKC,IAClBC,IACA,OAAOC,EAAcC,KAAAC,MAAA,+lbAAuCJ,EAAA"}

package/dist/kolibri/label-58f2333f.js

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import{a as e,u as a}from"./a11y.tipps-2e27f8e6.js";import{w as o}from"./prop.validators-2c20cdf8.js";import{i as t}from"./reuse-3a02afb9.js";const r=/[a-zA-Z0-9äöüÄÖÜß]/g,i=/^\d+$/;function s(e){var a;return"string"==typeof e&&(null===(a=e.match(r))||void 0===a?void 0:a.length)||0}function l(e,a=1){return s(e)>=a}function f(e){return i.test(e)}const n=(a,o,r,s)=>{const l=o.has("_ariaLabel")?o.get("_ariaLabel"):r.state._ariaLabel;if("string"==typeof l){const a=o.has("_label")?o.get("_label"):r.state._label;!1===t(a,l)&&("_ariaLabel"===s?o.set("_label",l):o.set("_ariaLabel",void 0),e("The different Aria label is not barrier-free. A different Aria label must start with the label text for reasons of accessibility for voice control."))}},c=(a,t,r={})=>{var s;o(a,"_ariaLabel",t,{hooks:{afterPatch:(a,t,o,s)=>{var i,n;"function"==typeof(null===(i=r.hooks)||void 0===i?void 0:i.afterPatch)&&(null===(n=r.hooks)||void 0===n||n.afterPatch(a,t,o,s)),"string"==typeof a&&a.length>0&&!1===l(a,3)&&!1===f(a)&&e(`The different aria label ("${a}") is not accessible. A different aria label should consist of at least three readable characters.`)},beforePatch:null===(s=r.hooks)||void 0===s?void 0:s.beforePatch}})},d=(e,a)=>{c(e,a,{hooks:{beforePatch:n}})},b=(t,r,s={})=>{var i;o(t,"_label",r,{hooks:{afterPatch:(t,o,r,i)=>{var n,h;"function"==typeof(null===(n=s.hooks)||void 0===n?void 0:n.afterPatch)&&(null===(h=s.hooks)||void 0===h||h.afterPatch(t,o,r,i)),"string"==typeof t&&!1===l(t,3)&&!1===f(t)&&e(`The heading or label ("${t}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof t&&t.length>80&&a("A heading or label should not be longer than 80 characters.")},beforePatch:null===(i=s.hooks)||void 0===i?void 0:i.beforePatch},required:!0})},h=(e,a)=>{b(e,a,{hooks:{beforePatch:n}})};export{d as a,h as b,f as c,l as h,b as v};

package/dist/kolibri/label-58f2333f.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["READABLE_CHARS","ONLY_NUMBERS","countReadableChars","str","_a","match","length","hasEnoughReadableChars","min","containsOnlyNumbers","test","syncAriaLabelBeforePatch","_nextValue","nextState","component","key","ariaLabel","has","get","state","_ariaLabel","label","_label","isEmptyOrPrefixOf","set","undefined","a11yHint","validateAriaLabel","value","options","watchString","hooks","afterPatch","_b","beforePatch","validateAriaLabelWithLabel","validateLabel","uiUxHint","required","validateLabelWithAriaLabel"],"sources":["./src/types/props/label.ts"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { a11yHint, uiUxHint } from '../../utils/a11y.tipps';\nimport { watchString, WatchStringOptions } from '../../utils/prop.validators';\nimport { isEmptyOrPrefixOf } from '../../utils/validator';\n\n/* types */\n\n/**\n * This is a regular expression that matches all readable characters.\n *\n * Interesting: https://stackoverflow.com/questions/150033/regular-expression-to-match-non-english-characters\n */\nconst READABLE_CHARS = /[a-zA-Z0-9äöüÄÖÜß]/g;\n\n/**\n * This is a regular expression that matches only numbers.\n */\nconst ONLY_NUMBERS = /^\\d+$/;\n\n/**\n * This function counts the number of readable characters in a string.\n * @param str The string to count.\n * @returns The number of readable characters in the string.\n */\nfunction countReadableChars(str: string): number {\n\treturn typeof str === 'string' ? str.match(READABLE_CHARS)?.length || 0 : 0;\n}\n\n/**\n * This function checks if a string has at least a certain number of readable characters.\n * @param str The string to check.\n * @param min The minimum number of readable characters.\n * @returns True if the string has at least the minimum number of readable characters, false otherwise.\n */\nexport function hasEnoughReadableChars(str: string, min = 1): boolean {\n\treturn countReadableChars(str) >= min;\n}\n\n/**\n * This function checks if a string contains only numbers.\n * @param str The string to check.\n * @returns True if the string contains only numbers, false otherwise.\n */\nexport function containsOnlyNumbers(str: string): boolean {\n\treturn ONLY_NUMBERS.test(str);\n}\n\n/** de\n * Das Label dient der Beschriftung unterschiedlicher Elemente.\n * - Button -> label text\n * - Heading -> headline text\n * - Input, Select und Textarea -> label text\n * - Summary -> summary text\n * - Table -> caption text\n * - etc.\n *\n * Das Label ist häufig ein Pflichtattribut und kann leer gesetzt werden,\n * wenn man das Label mittels dem Expert-Slot überschreiben will.\n */\n/** en\n * The label is used to label different elements.\n * -Button -> label text\n * -Heading -> headline text\n * -Input, Select and Textarea -> label text\n * -Summary -> summary text\n * -Table -> caption text\n * -Etc.\n *\n * The label is often a mandatory attribute and can be set empty,\n * if you want to overwrite the label using the expert slot.\n */\nexport type PropLabel = {\n\tlabel: string;\n};\n\nexport type LabelProp = Generic.Element.Members<PropLabel, unknown>;\n\n/* validator */\n/**\n * Ein abweichendes Aria-Label muss aus Gründern der Barrierefreiheit für\n * die Sprachsteuerung mit dem Label-Text beginnen.\n */\nconst syncAriaLabelBeforePatch: Generic.Element.NextStateHooksCallback = (_nextValue, nextState, component: Generic.Element.Component, key): void => {\n\tconst ariaLabel: string | undefined = nextState.has('_ariaLabel') ? (nextState.get('_ariaLabel') as string) : (component.state._ariaLabel as string);\n\tif (typeof ariaLabel === 'string') {\n\t\tconst label: string = nextState.has('_label') ? (nextState.get('_label') as string) : (component.state._label as string);\n\t\tif (isEmptyOrPrefixOf(label, ariaLabel) === false) {\n\t\t\tif (key === '_ariaLabel') {\n\t\t\t\tnextState.set('_label', ariaLabel);\n\t\t\t\t// smartSetTimeout(() => ((component as Generic.Element.Component & { _label: string })._label = ariaLabel), 50);\n\t\t\t} else {\n\t\t\t\tnextState.set('_ariaLabel', undefined);\n\t\t\t\t// smartSetTimeout(() => ((component as Generic.Element.Component & { _ariaLabel: string })._ariaLabel = label), 50);\n\t\t\t}\n\t\t\ta11yHint(\n\t\t\t\t`The different Aria label is not barrier-free. A different Aria label must start with the label text for reasons of accessibility for voice control.`\n\t\t\t);\n\t\t}\n\t}\n};\n\nconst validateAriaLabel = (component: Generic.Element.Component, value?: string, options: WatchStringOptions = {}): void => {\n\twatchString(component, '_ariaLabel', value, {\n\t\thooks: {\n\t\t\tafterPatch: (value, state, component, key) => {\n\t\t\t\tif (typeof options.hooks?.afterPatch === 'function') {\n\t\t\t\t\toptions.hooks?.afterPatch(value, state, component, key);\n\t\t\t\t}\n\t\t\t\tif (typeof value === 'string' && value.length > 0 && hasEnoughReadableChars(value, 3) === false && containsOnlyNumbers(value) === false) {\n\t\t\t\t\ta11yHint(`The different aria label (\"${value}\") is not accessible. A different aria label should consist of at least three readable characters.`);\n\t\t\t\t}\n\t\t\t},\n\t\t\tbeforePatch: options.hooks?.beforePatch,\n\t\t},\n\t});\n};\n\nexport const validateAriaLabelWithLabel = (component: Generic.Element.Component, value?: string): void => {\n\tvalidateAriaLabel(component, value, {\n\t\thooks: {\n\t\t\tbeforePatch: syncAriaLabelBeforePatch,\n\t\t},\n\t});\n};\n\nexport const validateLabel = (component: Generic.Element.Component, value?: string, options: WatchStringOptions = {}): void => {\n\twatchString(component, '_label', value, {\n\t\thooks: {\n\t\t\tafterPatch: (value, state, component, key) => {\n\t\t\t\tif (typeof options.hooks?.afterPatch === 'function') {\n\t\t\t\t\toptions.hooks?.afterPatch(value, state, component, key);\n\t\t\t\t}\n\t\t\t\tif (typeof value === 'string' && hasEnoughReadableChars(value, 3) === false && containsOnlyNumbers(value) === false) {\n\t\t\t\t\ta11yHint(`The heading or label (\"${value}\") is not accessible. A label should consist of at least three readable characters.`);\n\t\t\t\t}\n\t\t\t\tif (typeof value === 'string' && value.length > 80) {\n\t\t\t\t\tuiUxHint(`A heading or label should not be longer than 80 characters.`);\n\t\t\t\t}\n\t\t\t},\n\t\t\tbeforePatch: options.hooks?.beforePatch,\n\t\t},\n\t\trequired: true,\n\t});\n};\n\nexport const validateLabelWithAriaLabel = (component: Generic.Element.Component, value?: string): void => {\n\tvalidateLabel(component, value, {\n\t\thooks: {\n\t\t\tbeforePatch: syncAriaLabelBeforePatch,\n\t\t},\n\t});\n};\n"],"mappings":";;;8IAYA,MAAMA,EAAiB,sBAKvB,MAAMC,EAAe,QAOrB,SAASC,EAAmBC,G,MAC3B,cAAcA,IAAQ,WAAWC,EAAAD,EAAIE,MAAML,MAAe,MAAAI,SAAA,SAAAA,EAAEE,SAAU,EAAI,CAC3E,C,SAQgBC,EAAuBJ,EAAaK,EAAM,GACzD,OAAON,EAAmBC,IAAQK,CACnC,C,SAOgBC,EAAoBN,GACnC,OAAOF,EAAaS,KAAKP,EAC1B,CAqCA,MAAMQ,EAAmE,CAACC,EAAYC,EAAWC,EAAsCC,KACtI,MAAMC,EAAgCH,EAAUI,IAAI,cAAiBJ,EAAUK,IAAI,cAA4BJ,EAAUK,MAAMC,WAC/H,UAAWJ,IAAc,SAAU,CAClC,MAAMK,EAAgBR,EAAUI,IAAI,UAAaJ,EAAUK,IAAI,UAAwBJ,EAAUK,MAAMG,OACvG,GAAIC,EAAkBF,EAAOL,KAAe,MAAO,CAClD,GAAID,IAAQ,aAAc,CACzBF,EAAUW,IAAI,SAAUR,E,KAElB,CACNH,EAAUW,IAAI,aAAcC,U,CAG7BC,EACC,sJ,IAMJ,MAAMC,EAAoB,CAACb,EAAsCc,EAAgBC,EAA8B,M,MAC9GC,EAAYhB,EAAW,aAAcc,EAAO,CAC3CG,MAAO,CACNC,WAAY,CAACJ,EAAOT,EAAOL,EAAWC,K,QACrC,WAAWX,EAAAyB,EAAQE,SAAK,MAAA3B,SAAA,SAAAA,EAAE4B,cAAe,WAAY,EACpDC,EAAAJ,EAAQE,SAAK,MAAAE,SAAA,SAAAA,EAAED,WAAWJ,EAAOT,EAAOL,EAAWC,E,CAEpD,UAAWa,IAAU,UAAYA,EAAMtB,OAAS,GAAKC,EAAuBqB,EAAO,KAAO,OAASnB,EAAoBmB,KAAW,MAAO,CACxIF,EAAS,8BAA8BE,sG,GAGzCM,aAAa9B,EAAAyB,EAAQE,SAAK,MAAA3B,SAAA,SAAAA,EAAE8B,cAE5B,E,MAGUC,EAA6B,CAACrB,EAAsCc,KAChFD,EAAkBb,EAAWc,EAAO,CACnCG,MAAO,CACNG,YAAavB,IAEb,E,MAGUyB,EAAgB,CAACtB,EAAsCc,EAAgBC,EAA8B,M,MACjHC,EAAYhB,EAAW,SAAUc,EAAO,CACvCG,MAAO,CACNC,WAAY,CAACJ,EAAOT,EAAOL,EAAWC,K,QACrC,WAAWX,EAAAyB,EAAQE,SAAK,MAAA3B,SAAA,SAAAA,EAAE4B,cAAe,WAAY,EACpDC,EAAAJ,EAAQE,SAAK,MAAAE,SAAA,SAAAA,EAAED,WAAWJ,EAAOT,EAAOL,EAAWC,E,CAEpD,UAAWa,IAAU,UAAYrB,EAAuBqB,EAAO,KAAO,OAASnB,EAAoBmB,KAAW,MAAO,CACpHF,EAAS,0BAA0BE,uF,CAEpC,UAAWA,IAAU,UAAYA,EAAMtB,OAAS,GAAI,CACnD+B,EAAS,8D,GAGXH,aAAa9B,EAAAyB,EAAQE,SAAK,MAAA3B,SAAA,SAAAA,EAAE8B,aAE7BI,SAAU,MACT,E,MAGUC,EAA6B,CAACzB,EAAsCc,KAChFQ,EAActB,EAAWc,EAAO,CAC/BG,MAAO,CACNG,YAAavB,IAEb,S"}

package/dist/kolibri/{prop.validators-e15a584f.js → prop.validators-2c20cdf8.js}

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{d as e}from"./a11y.tipps-1cea9822.js";import{L as t,g as r,a as n,b as o}from"./dev.utils-157f0499.js";import{p as i,a}from"./index-f4596895.js";const s=(e,t)=>{t.forEach((t=>{!1===e.has(t)&&e.add(t)}))},f=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){const r=new Set;s(r,t.querySelectorAll(e));const o=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<o.length;t++){const n=o[t].shadowRoot;s(r,f(e,"object"==typeof n&&null!==n?n:o[t]))}return Array.from(r)}throw new Error("The parameter document for the method querySelectorAll is not type of Document, HTMLElement or ShadowRoot.")},u=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){let r=t.querySelector(e);if(null===r){const o=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<o.length;t++){const n=o[t].shadowRoot;if(r=u(e,"object"==typeof n&&null!==n?n:o[t]),null!==r)break}}return r}throw new Error("The parameter document for the method querySelector is not type of Document, HTMLElement or ShadowRoot.")};var c=y,l=y,d=m,v=b,p=g,h=w;function y(e){var t=S(e);return 3==t.length?t.concat(255):(t[3]=Math.round(t[3]),t)}function m(e){var t=S(e);return{r:t[0],g:t[1],b:t[2],a:3==t.length?255:Math.round(t[3])}}function b(e){var t=S(e);return 3==t.length&&t.push(255),255==t[3]?"rgb("+t[0]+", "+t[1]+", "+t[2]+")":0==t[3]?"rgba("+t[0]+", "+t[1]+", "+t[2]+", 0)":"rgba("+t[0]+", "+t[1]+", "+t[2]+", "+String(t[3]/255).substr(1)+")"}function g(e){3==(t=S(e)).length&&t.push(255);var t,r=255==t[3],o=N(t[0]),n=N(t[1]),a=N(t[2]),s=M(o,n,a,t=N(Math.round(t[3])));return r?s?"#"+o.charAt(0)+n.charAt(0)+a.charAt(0):"#"+o+n+a:s?"#"+o.charAt(0)+n.charAt(0)+a.charAt(0)+t.charAt(0):"#"+o+n+a+t}function w(e){var t=S(e);return 3==t.length?t.push(255):t[3]=Math.round(t[3]),(t[3]<<24>>>0|t[0]<<16|t[1]<<8|t[2])>>>0}function S(e){return"string"==typeof e?E(e=e.toLowerCase())||O(e)||A(e)||L(e)||H(e)||[0,0,0,255]:D(e)||$(e)||T(e)||[0,0,0,255]}function N(e){var t=e.toString(16);return 1==t.length?"0"+t:t}function M(e,t,r,o){var n=["ff","00","11","22","33","44","55","66","77","88","99","aa","bb","cc","dd","ee"];return-1!=n.indexOf(e)&&-1!=n.indexOf(t)&&-1!=n.indexOf(r)&&-1!=n.indexOf(o)}function E(e){return"red"==e?[255,0,0]:"green"==e?[0,255,0]:"blue"==e?[0,0,255]:"black"==e?[0,0,0]:"white"==e?[255,255,255]:"cyan"==e?[0,255,255]:"gray"==e||"grey"==e?[128,128,128]:"magenta"==e||"pink"==e?[255,0,255]:"yellow"==e?[255,255,0]:void 0}function j(e){return 1==e.length?parseInt(e+e,16):parseInt(e,16)}function O(e){var t=e.replace(/^#/,""),r=t.length;if(3==r||4==r){var o=j(t[0]),n=j(t[1]),a=j(t[2]),s=3==r?255:j(t[3]);if(isNaN(o)||isNaN(n)||isNaN(a)||isNaN(s))return;return[o,n,a,s]}}function A(e){var t=e.replace(/^#/,""),r=t.length;if(6==r||8==r){var o=j(t.slice(0,2)),n=j(t.slice(2,4)),a=j(t.slice(4,6)),s=6==r?255:j(t.slice(6,8));if(isNaN(o)||isNaN(n)||isNaN(a)||isNaN(s))return;return[o,n,a,s]}}function k(e,t){return"number"!=typeof e||!0===t&&Math.floor(e)!==e?-1:e>=0&&e<=255?e:-1}function D(e){if("[object Object]"===Object.prototype.toString.call(e)&&Object.getPrototypeOf(e)===Object.getPrototypeOf({})){var t=k(null!=e.r?e.r:null!=e.red?e.red:0,!0),r=k(null!=e.g?e.g:null!=e.green?e.green:0,!0),o=k(null!=e.b?e.b:null!=e.blue?e.blue:0,!0),n=k(null!=e.a?e.a:null!=e.alpha?e.alpha:255,!0);if(-1!=t&&-1!=r&&-1!=o&&-1!=n)return[t,r,o,n]}}function $(e){if(Array.isArray(e)&&(3==e.length||4==e.length)){var t=k(e[0],!0),r=k(e[1],!0),o=k(e[2],!0),n=k(null!=e[3]?e[3]:255,!0);if(-1!=t&&-1!=r&&-1!=o&&-1!=n)return[t,r,o,n]}}function T(e){if("number"==typeof e&&Math.floor(e)==e&&e<=4294967295&&e>=0)return[e>>16&255,e>>8&255,255&e,e>>24&255]}function L(e){if("rgb("==e.substr(0,4)){var t=(e=e.match(/^rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number),r=k(t[0],!0),o=k(t[1],!0),n=k(t[2],!0);if(-1!=r&&-1!=o&&-1!=n)return[r,o,n,255]}}function H(e){if("rgba("==e.substr(0,5)){var t=(e=e.match(/^rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number),r=k(t[0],!0),o=k(t[1],!0),n=k(t[2],!0),a=k(255*t[3]);if(-1!=r&&-1!=o&&-1!=n&&-1!=a)return[r,o,n,a]}}c.arr=l,c.obj=d,c.css=v,c.hex=p,c.num=h;var C=.2126,P=.7152,J=.0722,I=1/12.92;function q(e){return Math.pow((e+.055)/1.055,2.4)}function z(e){var t=e[0]/255,r=e[1]/255,o=e[2]/255,n=t<=.03928?t*I:q(t),a=r<=.03928?r*I:q(r),s=o<=.03928?o*I:q(o);return n*C+a*P+s*J}function B(e){var t=255;8===(e=e.replace(/^#/,"")).length&&(t=parseInt(e.slice(6,8),16),e=e.substring(0,6)),4===e.length&&(t=parseInt(e.slice(3,4).repeat(2),16),e=e.substring(0,3)),3===e.length&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]);var r=parseInt(e,16);return[r>>16,r>>8&255,255&r,t]}function R(e,t){return(Math.max(e,t)+.05)/(Math.min(e,t)+.05)}function W(e,t){return R(z(e),z(t))}function x(e,t){return W(B(e),B(t))}function F(e){return e>=7?"AAA":e>=4.5?"AA":e>=3?"AA Large":"Fail"}const K=/\[object Object\]/,U=(e,t)=>{"string"==typeof e&&K.test(e)||t()},_=(e,t)=>{"string"==typeof e&&""===e||t()},Y=(e,r)=>{o()&&(t.debug([e,r]),t.debug("↑ We propagate the (submit) event to this target.")),Object.defineProperty(e,"target",{value:r,writable:!1})},G=e=>{var t,r,o;null===(t=e.nextHooks)||void 0===t||t.forEach(((t,r)=>{var o;const n=t.get("beforePatch");"function"==typeof n&&n(null===(o=e.nextState)||void 0===o?void 0:o.get(r),e.nextState,e,r)})),(null===(r=e.nextState)||void 0===r?void 0:r.size)>0&&(e.state=Object.assign(Object.assign({},e.state),Object.fromEntries(e.nextState)),delete e.nextState,null===(o=e.nextHooks)||void 0===o||o.forEach(((t,r)=>{const o=t.get("afterPatch");"function"==typeof o&&o(e.state[r],e.state,e,r)}))),delete e.nextHooks},Q=(e,t,r,o={})=>{var n,a;if(void 0===e.nextHooks&&(e.nextHooks=new Map),void 0===e.nextState&&(e.nextState=new Map),e.nextState.get(t)!==r){e.nextHooks.get(t)instanceof Map==!1&&e.nextHooks.set(t,new Map),"function"==typeof o.afterPatch&&(null===(n=e.nextHooks.get(t))||void 0===n||n.set("afterPatch",o.afterPatch)),"function"==typeof o.beforePatch&&(null===(a=e.nextHooks.get(t))||void 0===a||a.set("beforePatch",o.beforePatch)),e.nextState.set(t,r),G(e)}},V=(t,r,o,n)=>{e(`[${t.constructor.name}] Der Property-Wert (${o}) für '${r}' ist nicht valide. Folgende Werte sind erlaubt: ${Array.from(n).join(", ")}`)};function X(e,t,r,o,n,a={}){r(n)?Q(e,t,n,a.hooks):null!=n||a.required?(a.required||o.add(null),V(e,t,n,o)):Q(e,t,a.defaultValue,a.hooks)}const Z=(e,t,r,o)=>{X(e,t,(e=>"boolean"==typeof e),new Set(["Boolean {true, false}"]),r,o)},ee=(e,t,r,o={})=>{const n="number"==typeof o.minLength?null==o?void 0:o.minLength:0;X(e,t,(e=>"string"==typeof e&&e.length>=n&&(void 0===(null==o?void 0:o.maxLength)||e.length<=o.maxLength)),new Set(["String"]),r,o)},te=(e,t,r,o)=>{X(e,t,(e=>"number"==typeof e&&(void 0===(null==o?void 0:o.min)||"number"==typeof(null==o?void 0:o.min)&&e>=o.min)&&(void 0===(null==o?void 0:o.max)||"number"==typeof(null==o?void 0:o.max)&&e<=o.max)),new Set(["Number"]),r,o)},re=(e,r,o,n,a=(e=>e==e),s={})=>{_(n,(()=>{U(n,(()=>{void 0===n&&(n=[]);try{try{n=ue(n)}catch(e){}if(Array.isArray(n)){const l=n.find((e=>!o(e)));void 0===l&&a(n)?Q(e,r,n,s.hooks):U(l,(()=>{throw t.debug(l),new Error("↑ Das Schema für das Property (_options) ist nicht valide. Der Wert wird nicht geändert.")}))}else U(n,(()=>{throw t.debug(n),new Error("↑ Das Schema für das Property (_options) ist nicht valide. Der Wert wird nicht geändert.")}))}catch(e){t.debug(e)}}))}))},ne=/^(true|false)$/,oe=/^-?(0|[1-9]\d*)$/,ie=/^-?(0.|[1-9]\d*.)\d*[1-9]$/,ae=t=>{const r=typeof t,o=`${t}`;if("string"==typeof t)if(ne.test(t))t="true"===t;else if(oe.test(t))t=parseInt(t);else if(ie.test(t))t=parseFloat(t);else if(fe.test(t))try{t=ue(t)}catch(e){}return r!==typeof t&&e(`You have used a stringified property value (${o} to ${JSON.stringify(t)}) which type switched from ${r} to ${typeof t}!`),t},se=e=>{try{return JSON.stringify(e).replace(/"/g,"'")}catch(r){throw t.warn(["stringifyJson",e]),t.error("↑ Das JSON konnte nicht in einen String umgewandelt werden. Es wird ein stringifizierbares JSON erwartet."),new Error}},fe=/^[{[]/,ue=e=>{if("string"==typeof e)try{return JSON.parse(e)}catch(r){if(fe.test(e))try{return JSON.parse(e.replace(/'/g,'"'))}catch(r){t.warn(["parseJson",e]),t.error("↑ Der JSON-String konnte nicht geparsed werden. Achten Sie darauf, dass einfache Anführungszeichen im Text maskiert werden (&#8216;).")}}throw new Error},ce=e=>"boolean"==typeof e?!0===e?"true":"false":void 0,le=e=>"string"==typeof e?e:ce(e),de=(e,t)=>u(e,t||r()),ve=(e,t)=>f(e,t||r());let pe=null;const he=()=>(pe=pe||{backgroundColor:"#00000000",color:"#00000000",domNode:r().body,level:"Fail",score:1},pe),ye=/(\d+, ){3}0\)/,me=(e,r=he())=>{const o=getComputedStyle(e),n=ye.test(o.backgroundColor)?r.backgroundColor:c.hex(o.backgroundColor),a=ye.test(o.color)?r.color:c.hex(o.color),s=x(n,a),l={backgroundColor:n,color:a,domNode:e,level:F(s),score:s};return s<4.5&&t.error(["Color-Contrast-Error",{backgroundColor:l.backgroundColor,color:l.color,level:l.level,score:l.score},l.domNode]),l},be=(e,t=he())=>{t.domNode instanceof HTMLElement&&(t=me(t.domNode,t));const r=t.domNode.querySelector(e);if(null===r){const r=t.domNode.querySelectorAll('[class="hydrated"]');for(let o=0;o<r.length&&(t.domNode=r[o],null===(t=be(e,t)).domNode);o++);return t}return me(r,t)},ge=(t,r=window)=>{t instanceof HTMLElement?(r.scrollTo({behavior:"smooth",top:t.getBoundingClientRect().top+n().pageYOffset-50}),t.focus()):e("Das HTMLElement ist nicht valide, zu dem gescrollt werden soll.")},we=(t,r)=>{if((t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot)&&"string"==typeof r){e("Bei der Methode querySelectorAll wurden die Parameter document, selector in selector, document getauscht, da der Parameter selector nicht, allerdings der Parameter document optional sein kann.");const o=`${r}`;r=t,t=o}if("string"==typeof t){const o=de(t,r);o instanceof HTMLElement?ge(o):e(`Es konnte kein HTMLElement mit dem Selector (${t}) gefunden werden, zu dem gescrollt werden soll.`)}else e("Der Selector ist nicht valide, zu dem gescrollt werden soll.")};class Se{static queryHtmlElementColors(e,r,o=!1,n=!0){let a=null;if(!0===o||!1===Se.executionLock)if(!1===o&&(Se.cache.clear(),Se.cache.set(r.domNode,r),Se.executionLock=!0,!0===n&&t.debug("[KoliBriUtils] Color contrast analysis started...")),e===r.domNode)a=r;else{const t=new Set;if(r.domNode.shadowRoot){const e=r.domNode.shadowRoot.children;for(let r=0;r<e.length;r++)t.add(e[r])}const o=r.domNode;if("function"==typeof o.assignedNodes){const e=o.assignedNodes();for(let r=0;r<e.length;r++)e[r]instanceof HTMLElement&&t.add(e[r])}const n=r.domNode.children;for(let e=0;e<n.length;e++)t.add(n[e]);const s=Array.from(t);for(let t=0;t<s.length;t++){let o=Se.cache.get(s[t]);void 0===o&&(o=me(s[t],r)),Se.cache.set(s[t],o);const n=Se.queryHtmlElementColors(e,o,!0,!1);if(null!==n){a=n;break}}}else t.debug("[KoliBriUtils] Call aborted because a color contrast analysis is currently being executed.");return!1===o&&(!0===n&&t.debug(`[KoliBriUtils] Color contrast analysis finished (${Se.cache.size} DOM elements are analysed).`),Se.executionLock=!1,Se.cache.clear()),a}}Se.executionLock=!1,Se.cache=new Map;class Ne{}Ne.patchTheme=i,Ne.patchThemeTag=a,Ne.querySelector=de,Ne.querySelectorAll=ve,Ne.scrollByHTMLElement=ge,Ne.scrollBySelector=we,Ne.stringifyJson=se;export{Ne as K,X as a,Z as b,x as c,re as d,te as e,Y as f,_ as g,ce as h,we as i,le as j,de as k,Se as l,ae as m,me as n,U as o,ue as p,ve as q,c as r,Q as s,be as t,se as u,ee as w};
+import{d as e}from"./a11y.tipps-2e27f8e6.js";import{L as t,g as r,a as n,b as o}from"./dev.utils-157f0499.js";import{p as i,a}from"./index-f4596895.js";const s=(e,t)=>{t.forEach((t=>{!1===e.has(t)&&e.add(t)}))},f=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){const r=new Set;s(r,t.querySelectorAll(e));const o=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<o.length;t++){const n=o[t].shadowRoot;s(r,f(e,"object"==typeof n&&null!==n?n:o[t]))}return Array.from(r)}throw new Error("The parameter document for the method querySelectorAll is not type of Document, HTMLElement or ShadowRoot.")},u=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){let r=t.querySelector(e);if(null===r){const o=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<o.length;t++){const n=o[t].shadowRoot;if(r=u(e,"object"==typeof n&&null!==n?n:o[t]),null!==r)break}}return r}throw new Error("The parameter document for the method querySelector is not type of Document, HTMLElement or ShadowRoot.")};var c=y,l=y,d=m,v=b,p=g,h=w;function y(e){var t=S(e);return 3==t.length?t.concat(255):(t[3]=Math.round(t[3]),t)}function m(e){var t=S(e);return{r:t[0],g:t[1],b:t[2],a:3==t.length?255:Math.round(t[3])}}function b(e){var t=S(e);return 3==t.length&&t.push(255),255==t[3]?"rgb("+t[0]+", "+t[1]+", "+t[2]+")":0==t[3]?"rgba("+t[0]+", "+t[1]+", "+t[2]+", 0)":"rgba("+t[0]+", "+t[1]+", "+t[2]+", "+String(t[3]/255).substr(1)+")"}function g(e){3==(t=S(e)).length&&t.push(255);var t,r=255==t[3],o=N(t[0]),n=N(t[1]),a=N(t[2]),s=M(o,n,a,t=N(Math.round(t[3])));return r?s?"#"+o.charAt(0)+n.charAt(0)+a.charAt(0):"#"+o+n+a:s?"#"+o.charAt(0)+n.charAt(0)+a.charAt(0)+t.charAt(0):"#"+o+n+a+t}function w(e){var t=S(e);return 3==t.length?t.push(255):t[3]=Math.round(t[3]),(t[3]<<24>>>0|t[0]<<16|t[1]<<8|t[2])>>>0}function S(e){return"string"==typeof e?E(e=e.toLowerCase())||O(e)||A(e)||L(e)||H(e)||[0,0,0,255]:D(e)||$(e)||T(e)||[0,0,0,255]}function N(e){var t=e.toString(16);return 1==t.length?"0"+t:t}function M(e,t,r,o){var n=["ff","00","11","22","33","44","55","66","77","88","99","aa","bb","cc","dd","ee"];return-1!=n.indexOf(e)&&-1!=n.indexOf(t)&&-1!=n.indexOf(r)&&-1!=n.indexOf(o)}function E(e){return"red"==e?[255,0,0]:"green"==e?[0,255,0]:"blue"==e?[0,0,255]:"black"==e?[0,0,0]:"white"==e?[255,255,255]:"cyan"==e?[0,255,255]:"gray"==e||"grey"==e?[128,128,128]:"magenta"==e||"pink"==e?[255,0,255]:"yellow"==e?[255,255,0]:void 0}function j(e){return 1==e.length?parseInt(e+e,16):parseInt(e,16)}function O(e){var t=e.replace(/^#/,""),r=t.length;if(3==r||4==r){var o=j(t[0]),n=j(t[1]),a=j(t[2]),s=3==r?255:j(t[3]);if(isNaN(o)||isNaN(n)||isNaN(a)||isNaN(s))return;return[o,n,a,s]}}function A(e){var t=e.replace(/^#/,""),r=t.length;if(6==r||8==r){var o=j(t.slice(0,2)),n=j(t.slice(2,4)),a=j(t.slice(4,6)),s=6==r?255:j(t.slice(6,8));if(isNaN(o)||isNaN(n)||isNaN(a)||isNaN(s))return;return[o,n,a,s]}}function k(e,t){return"number"!=typeof e||!0===t&&Math.floor(e)!==e?-1:e>=0&&e<=255?e:-1}function D(e){if("[object Object]"===Object.prototype.toString.call(e)&&Object.getPrototypeOf(e)===Object.getPrototypeOf({})){var t=k(null!=e.r?e.r:null!=e.red?e.red:0,!0),r=k(null!=e.g?e.g:null!=e.green?e.green:0,!0),o=k(null!=e.b?e.b:null!=e.blue?e.blue:0,!0),n=k(null!=e.a?e.a:null!=e.alpha?e.alpha:255,!0);if(-1!=t&&-1!=r&&-1!=o&&-1!=n)return[t,r,o,n]}}function $(e){if(Array.isArray(e)&&(3==e.length||4==e.length)){var t=k(e[0],!0),r=k(e[1],!0),o=k(e[2],!0),n=k(null!=e[3]?e[3]:255,!0);if(-1!=t&&-1!=r&&-1!=o&&-1!=n)return[t,r,o,n]}}function T(e){if("number"==typeof e&&Math.floor(e)==e&&e<=4294967295&&e>=0)return[e>>16&255,e>>8&255,255&e,e>>24&255]}function L(e){if("rgb("==e.substr(0,4)){var t=(e=e.match(/^rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number),r=k(t[0],!0),o=k(t[1],!0),n=k(t[2],!0);if(-1!=r&&-1!=o&&-1!=n)return[r,o,n,255]}}function H(e){if("rgba("==e.substr(0,5)){var t=(e=e.match(/^rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number),r=k(t[0],!0),o=k(t[1],!0),n=k(t[2],!0),a=k(255*t[3]);if(-1!=r&&-1!=o&&-1!=n&&-1!=a)return[r,o,n,a]}}c.arr=l,c.obj=d,c.css=v,c.hex=p,c.num=h;var C=.2126,P=.7152,J=.0722,I=1/12.92;function q(e){return Math.pow((e+.055)/1.055,2.4)}function z(e){var t=e[0]/255,r=e[1]/255,o=e[2]/255,n=t<=.03928?t*I:q(t),a=r<=.03928?r*I:q(r),s=o<=.03928?o*I:q(o);return n*C+a*P+s*J}function B(e){var t=255;8===(e=e.replace(/^#/,"")).length&&(t=parseInt(e.slice(6,8),16),e=e.substring(0,6)),4===e.length&&(t=parseInt(e.slice(3,4).repeat(2),16),e=e.substring(0,3)),3===e.length&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]);var r=parseInt(e,16);return[r>>16,r>>8&255,255&r,t]}function R(e,t){return(Math.max(e,t)+.05)/(Math.min(e,t)+.05)}function W(e,t){return R(z(e),z(t))}function x(e,t){return W(B(e),B(t))}function F(e){return e>=7?"AAA":e>=4.5?"AA":e>=3?"AA Large":"Fail"}const K=/\[object Object\]/,U=(e,t)=>{"string"==typeof e&&K.test(e)||t()},_=(e,t)=>{"string"==typeof e&&""===e||t()},Y=(e,r)=>{o()&&(t.debug([e,r]),t.debug("↑ We propagate the (submit) event to this target.")),Object.defineProperty(e,"target",{value:r,writable:!1})},G=e=>{var t,r,o;null===(t=e.nextHooks)||void 0===t||t.forEach(((t,r)=>{var o;const n=t.get("beforePatch");"function"==typeof n&&n(null===(o=e.nextState)||void 0===o?void 0:o.get(r),e.nextState,e,r)})),(null===(r=e.nextState)||void 0===r?void 0:r.size)>0&&(e.state=Object.assign(Object.assign({},e.state),Object.fromEntries(e.nextState)),delete e.nextState,null===(o=e.nextHooks)||void 0===o||o.forEach(((t,r)=>{const o=t.get("afterPatch");"function"==typeof o&&o(e.state[r],e.state,e,r)}))),delete e.nextHooks},Q=(e,t,r,o={})=>{var n,a;if(void 0===e.nextHooks&&(e.nextHooks=new Map),void 0===e.nextState&&(e.nextState=new Map),e.nextState.get(t)!==r){e.nextHooks.get(t)instanceof Map==!1&&e.nextHooks.set(t,new Map),"function"==typeof o.afterPatch&&(null===(n=e.nextHooks.get(t))||void 0===n||n.set("afterPatch",o.afterPatch)),"function"==typeof o.beforePatch&&(null===(a=e.nextHooks.get(t))||void 0===a||a.set("beforePatch",o.beforePatch)),e.nextState.set(t,r),G(e)}},V=(t,r,o,n)=>{e(`[${t.constructor.name}] Der Property-Wert (${o}) für '${r}' ist nicht valide. Folgende Werte sind erlaubt: ${Array.from(n).join(", ")}`)};function X(e,t,r,o,n,a={}){r(n)?Q(e,t,n,a.hooks):null!=n||a.required?(a.required||o.add(null),V(e,t,n,o)):Q(e,t,a.defaultValue,a.hooks)}const Z=(e,t,r,o)=>{X(e,t,(e=>"boolean"==typeof e),new Set(["Boolean {true, false}"]),r,o)},ee=(e,t,r,o={})=>{const n="number"==typeof o.minLength?null==o?void 0:o.minLength:0;X(e,t,(e=>"string"==typeof e&&e.length>=n&&(void 0===(null==o?void 0:o.maxLength)||e.length<=o.maxLength)),new Set(["String"]),r,o)},te=(e,t,r,o)=>{X(e,t,(e=>"number"==typeof e&&(void 0===(null==o?void 0:o.min)||"number"==typeof(null==o?void 0:o.min)&&e>=o.min)&&(void 0===(null==o?void 0:o.max)||"number"==typeof(null==o?void 0:o.max)&&e<=o.max)),new Set(["Number"]),r,o)},re=(e,r,o,n,a=(e=>e==e),s={})=>{_(n,(()=>{U(n,(()=>{void 0===n&&(n=[]);try{try{n=ue(n)}catch(e){}if(Array.isArray(n)){const l=n.find((e=>!o(e)));void 0===l&&a(n)?Q(e,r,n,s.hooks):U(l,(()=>{throw t.debug(l),new Error("↑ Das Schema für das Property (_options) ist nicht valide. Der Wert wird nicht geändert.")}))}else U(n,(()=>{throw t.debug(n),new Error("↑ Das Schema für das Property (_options) ist nicht valide. Der Wert wird nicht geändert.")}))}catch(e){t.debug(e)}}))}))},ne=/^(true|false)$/,oe=/^-?(0|[1-9]\d*)$/,ie=/^-?(0.|[1-9]\d*.)\d*[1-9]$/,ae=t=>{const r=typeof t,o=`${t}`;if("string"==typeof t)if(ne.test(t))t="true"===t;else if(oe.test(t))t=parseInt(t);else if(ie.test(t))t=parseFloat(t);else if(fe.test(t))try{t=ue(t)}catch(e){}return r!==typeof t&&e(`You have used a stringified property value (${o} to ${JSON.stringify(t)}) which type switched from ${r} to ${typeof t}!`),t},se=e=>{try{return JSON.stringify(e).replace(/"/g,"'")}catch(r){throw t.warn(["stringifyJson",e]),t.error("↑ Das JSON konnte nicht in einen String umgewandelt werden. Es wird ein stringifizierbares JSON erwartet."),new Error}},fe=/^[{[]/,ue=e=>{if("string"==typeof e)try{return JSON.parse(e)}catch(r){if(fe.test(e))try{return JSON.parse(e.replace(/'/g,'"'))}catch(r){t.warn(["parseJson",e]),t.error("↑ Der JSON-String konnte nicht geparsed werden. Achten Sie darauf, dass einfache Anführungszeichen im Text maskiert werden (&#8216;).")}}throw new Error},ce=e=>"boolean"==typeof e?!0===e?"true":"false":void 0,le=e=>"string"==typeof e?e:ce(e),de=(e,t)=>u(e,t||r()),ve=(e,t)=>f(e,t||r());let pe=null;const he=()=>(pe=pe||{backgroundColor:"#00000000",color:"#00000000",domNode:r().body,level:"Fail",score:1},pe),ye=/(\d+, ){3}0\)/,me=(e,r=he())=>{const o=getComputedStyle(e),n=ye.test(o.backgroundColor)?r.backgroundColor:c.hex(o.backgroundColor),a=ye.test(o.color)?r.color:c.hex(o.color),s=x(n,a),l={backgroundColor:n,color:a,domNode:e,level:F(s),score:s};return s<4.5&&t.error(["Color-Contrast-Error",{backgroundColor:l.backgroundColor,color:l.color,level:l.level,score:l.score},l.domNode]),l},be=(e,t=he())=>{t.domNode instanceof HTMLElement&&(t=me(t.domNode,t));const r=t.domNode.querySelector(e);if(null===r){const r=t.domNode.querySelectorAll('[class="hydrated"]');for(let o=0;o<r.length&&(t.domNode=r[o],null===(t=be(e,t)).domNode);o++);return t}return me(r,t)},ge=(t,r=window)=>{t instanceof HTMLElement?(r.scrollTo({behavior:"smooth",top:t.getBoundingClientRect().top+n().pageYOffset-50}),t.focus()):e("Das HTMLElement ist nicht valide, zu dem gescrollt werden soll.")},we=(t,r)=>{if((t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot)&&"string"==typeof r){e("Bei der Methode querySelectorAll wurden die Parameter document, selector in selector, document getauscht, da der Parameter selector nicht, allerdings der Parameter document optional sein kann.");const o=`${r}`;r=t,t=o}if("string"==typeof t){const o=de(t,r);o instanceof HTMLElement?ge(o):e(`Es konnte kein HTMLElement mit dem Selector (${t}) gefunden werden, zu dem gescrollt werden soll.`)}else e("Der Selector ist nicht valide, zu dem gescrollt werden soll.")};class Se{static queryHtmlElementColors(e,r,o=!1,n=!0){let a=null;if(!0===o||!1===Se.executionLock)if(!1===o&&(Se.cache.clear(),Se.cache.set(r.domNode,r),Se.executionLock=!0,!0===n&&t.debug("[KoliBriUtils] Color contrast analysis started...")),e===r.domNode)a=r;else{const t=new Set;if(r.domNode.shadowRoot){const e=r.domNode.shadowRoot.children;for(let r=0;r<e.length;r++)t.add(e[r])}const o=r.domNode;if("function"==typeof o.assignedNodes){const e=o.assignedNodes();for(let r=0;r<e.length;r++)e[r]instanceof HTMLElement&&t.add(e[r])}const n=r.domNode.children;for(let e=0;e<n.length;e++)t.add(n[e]);const s=Array.from(t);for(let t=0;t<s.length;t++){let o=Se.cache.get(s[t]);void 0===o&&(o=me(s[t],r)),Se.cache.set(s[t],o);const n=Se.queryHtmlElementColors(e,o,!0,!1);if(null!==n){a=n;break}}}else t.debug("[KoliBriUtils] Call aborted because a color contrast analysis is currently being executed.");return!1===o&&(!0===n&&t.debug(`[KoliBriUtils] Color contrast analysis finished (${Se.cache.size} DOM elements are analysed).`),Se.executionLock=!1,Se.cache.clear()),a}}Se.executionLock=!1,Se.cache=new Map;class Ne{}Ne.patchTheme=i,Ne.patchThemeTag=a,Ne.querySelector=de,Ne.querySelectorAll=ve,Ne.scrollByHTMLElement=ge,Ne.scrollBySelector=we,Ne.stringifyJson=se;export{Ne as K,X as a,Z as b,x as c,re as d,te as e,Y as f,_ as g,ce as h,we as i,le as j,de as k,Se as l,ae as m,me as n,U as o,ue as p,ve as q,c as r,Q as s,be as t,se as u,ee as w};

package/dist/kolibri/show-5a4bfd71.js

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import{b as o}from"./prop.validators-2c20cdf8.js";const s=(s,r,a)=>{o(s,"_show",r,a)};export{s as v};

package/dist/kolibri/tab-index-2de507bb.js

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import{a as t}from"./a11y.tipps-2e27f8e6.js";import{e as a}from"./prop.validators-2c20cdf8.js";const e={hooks:{afterPatch:a=>{-1!==a&&0!==a&&t("Don’t Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},o=(t,o)=>{a(t,"_tabIndex",o,e)};export{o as v};

package/dist/kolibri/{tab-index-eff012a1.js.map → tab-index-2de507bb.js.map}

@@ -1 +1 @@
-{"version":3,"names":["options","hooks","afterPatch","value","a11yHint","validateTabIndex","component","watchNumber"],"sources":["./src/utils/validators/tab-index.ts"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { a11yHint } from '../a11y.tipps';\nimport { watchNumber, WatchNumberOptions } from '../prop.validators';\n\n/**\n * Accessibility hints\n * - https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html\n */\n\nconst options: WatchNumberOptions = {\n\thooks: {\n\t\tafterPatch: (value) => {\n\t\t\tif (value !== -1 && value !== 0) {\n\t\t\t\ta11yHint(`Don’t Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html`);\n\t\t\t}\n\t\t},\n\t},\n};\n\n/**\n * Diese Methode validiert das Property und setzt den State, wenn es valide ist.\n */\nexport const validateTabIndex = (component: Generic.Element.Component, value?: number): void => {\n\twatchNumber(component, '_tabIndex', value, options);\n};\n"],"mappings":";;;0FASA,MAAMA,EAA8B,CACnCC,MAAO,CACNC,WAAaC,IACZ,GAAIA,KAAW,GAAKA,IAAU,EAAG,CAChCC,EAAS,6G,WASAC,EAAmB,CAACC,EAAsCH,KACtEI,EAAYD,EAAW,YAAaH,EAAOH,EAAQ,S"}
+{"version":3,"names":["options","hooks","afterPatch","value","a11yHint","validateTabIndex","component","watchNumber"],"sources":["./src/utils/validators/tab-index.ts"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { a11yHint } from '../a11y.tipps';\nimport { watchNumber, WatchNumberOptions } from '../prop.validators';\n\n/**\n * Accessibility hints\n * - https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html\n */\n\nconst options: WatchNumberOptions = {\n\thooks: {\n\t\tafterPatch: (value) => {\n\t\t\tif (value !== -1 && value !== 0) {\n\t\t\t\ta11yHint(`Don’t Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html`);\n\t\t\t}\n\t\t},\n\t},\n};\n\n/**\n * Diese Methode validiert das Property und setzt den State, wenn es valide ist.\n */\nexport const validateTabIndex = (component: Generic.Element.Component, value?: number): void => {\n\twatchNumber(component, '_tabIndex', value, options);\n};\n"],"mappings":";;;+FASA,MAAMA,EAA8B,CACnCC,MAAO,CACNC,WAAaC,IACZ,GAAIA,KAAW,GAAKA,IAAU,EAAG,CAChCC,EAAS,6G,WASAC,EAAmB,CAACC,EAAsCH,KACtEI,EAAYD,EAAW,YAAaH,EAAOH,EAAQ,S"}

package/dist/kolibri/validation-7df9acd0.js

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import{c as o}from"./a11y.tipps-2e27f8e6.js";import{d as s}from"./prop.validators-2c20cdf8.js";const t=(t,e,p)=>{s(e,"_links",(t=>"object"==typeof t&&"string"==typeof t._label),p),o(t,e.state._links.length)};export{t as w};

package/dist/kolibri/{validation-d4aeea71.js → validation-9c8695ca.js}

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{a as e}from"./prop.validators-e15a584f.js";const r=(r,a)=>{e(r,"_level",(e=>"number"==typeof e&&0<=e&&e<=6),new Set(["Number {0, 1, 2, 3, 4, 5, 6}"]),a,{defaultValue:1,required:!0})};export{r as w};
+import{a as e}from"./prop.validators-2c20cdf8.js";const r=(r,a)=>{e(r,"_level",(e=>"number"==typeof e&&0<=e&&e<=6),new Set(["Number {0, 1, 2, 3, 4, 5, 6}"]),a,{defaultValue:1,required:!0})};export{r as w};

package/dist/loader/index.d.ts

@@ -11,7 +11,7 @@ export interface CustomElementsDefineOptions {
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
 export declare function applyPolyfills(): Promise<void>;
 
-/**
+/** 
  * Used to specify a nonce value that corresponds with an application's CSP.
  * When set, the nonce will be added to all dynamically created script and style tags at runtime.
  * Alternatively, the nonce value can be set on a meta tag in the DOM head

package/dist/types/components/spin/component.d.ts

@@ -1,19 +1,27 @@
 import { JSX } from '../../stencil-public-runtime';
 import { Generic } from '@a11y-ui/core';
+import { SpinVariant } from '../../types/props/variant/spin';
 type RequiredProps = unknown;
 type OptionalProps = {
   show: boolean;
+  variant: SpinVariant;
 };
 export type Props = Generic.Element.Members<RequiredProps, OptionalProps>;
-type RequiredStates = RequiredProps;
-type OptionalStates = OptionalProps;
+type RequiredStates = {
+  variant: SpinVariant;
+};
+type OptionalStates = {
+  show: boolean;
+};
 type States = Generic.Element.Members<RequiredStates, OptionalStates>;
 export declare class KolSpin implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {
+  private showToggled;
   render(): JSX.Element;
   _show?: boolean;
+  _variant?: SpinVariant;
   state: States;
-  private showToggled;
   validateShow(value?: boolean): void;
+  validateVariant(value?: SpinVariant): void;
   componentWillLoad(): void;
 }
 export {};

package/dist/types/components.d.ts

@@ -34,6 +34,7 @@ import { PaginationHasButton } from "./components/pagination/component";
 import { KoliBriPaginationButtonCallbacks } from "./components/pagination/types";
 import { KoliBriProgressType } from "./types/progress";
 import { KoliBriQuoteVariant } from "./components/quote/types";
+import { SpinVariant } from "./types/props/variant/spin";
 import { KoliBriSplitButtonCallback } from "./components/split-button/types";
 import { KoliBriDataType, KoliBriTableHeaders, KoliBriTablePaginationProps } from "./types/table";
 import { KoliBriTabsCallbacks, TabButtonProps } from "./components/tabs/component";
@@ -68,6 +69,7 @@ export { PaginationHasButton } from "./components/pagination/component";
 export { KoliBriPaginationButtonCallbacks } from "./components/pagination/types";
 export { KoliBriProgressType } from "./types/progress";
 export { KoliBriQuoteVariant } from "./components/quote/types";
+export { SpinVariant } from "./types/props/variant/spin";
 export { KoliBriSplitButtonCallback } from "./components/split-button/types";
 export { KoliBriDataType, KoliBriTableHeaders, KoliBriTablePaginationProps } from "./types/table";
 export { KoliBriTabsCallbacks, TabButtonProps } from "./components/tabs/component";
@@ -2096,6 +2098,10 @@ export namespace Components {
           * Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.
          */
         "_show"?: boolean;
+        /**
+          * Gibt an, welche Ladeanimation oder ob keine Animation verwendet werden soll.
+         */
+        "_variant"?: SpinVariant;
     }
     interface KolSplitButton {
         /**
@@ -4823,6 +4829,10 @@ declare namespace LocalJSX {
           * Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.
          */
         "_show"?: boolean;
+        /**
+          * Gibt an, welche Ladeanimation oder ob keine Animation verwendet werden soll.
+         */
+        "_variant"?: SpinVariant;
     }
     interface KolSplitButton {
         /**

package/dist/types/stencil-public-runtime.d.ts

@@ -812,7 +812,6 @@ export declare namespace JSXBase {
         datetime?: string;
     }
     interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
-        onCancel?: (event: Event) => void;
         onClose?: (event: Event) => void;
         open?: boolean;
         returnValue?: string;

package/dist/types/types/props/variant/spin.d.ts

@@ -0,0 +1,6 @@
+import { Generic } from '@a11y-ui/core';
+export type SpinVariant = 'default' | 'none';
+export type PropSpinVariant = {
+  variant: SpinVariant;
+};
+export declare const validateSpinVariant: (component: Generic.Element.Component, value?: SpinVariant) => void;

package/dist/types/utils/a11y.tipps.d.ts

@@ -3,6 +3,7 @@ export declare const deprecatedHint: (msg: string) => void;
 export declare const devHint: (msg: string) => void;
 export declare const devWarning: (msg: string) => void;
 export declare const featureHint: (msg: string, done?: boolean) => void;
+export declare const uiUxHint: (msg: string) => void;
 export declare const a11yHintDisabled: () => void;
 export declare const a11yHintLabelingLandmarks: (value: unknown) => void;
 export declare const uiUxHintMillerscheZahl: (className: string, length?: number) => void;

package/doc/input-email.md

@@ -12,7 +12,7 @@ Der Input-Typ **E-Mail** erzeugt ein Eingabefeld für E-Mails.
 
 ### Beispiel
 
-<kol-input-email \_id="meine_email" \_name="meine_email"\_icon="codicon codicon-mail">E-Mail-Adresse</kol-input-email>
+<kol-input-email _id="meine_email" _name="meine_email" _icon="codicon codicon-mail">E-Mail-Adresse</kol-input-email>
 
 ## Verwendung
 

package/doc/input-text.md

@@ -20,7 +20,7 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 
 ### Beispiel
 
-<kol-input-text \_type="text" \_id="mein_text" \_name="mein_text"\_icon="{ left: 'codicon codicon-arrow-left', right: { icon: 'codicon codicon-arrow-right', style: { 'font-size': '200%', }, }, }">Texteingabe</kol-input-text>
+<kol-input-text _type="text" _id="mein_text" _name="mein_text" _icon="{ left: 'codicon codicon-arrow-left', right: { icon: 'codicon codicon-arrow-right', style: { 'font-size': '200%', }, }, }">Texteingabe</kol-input-text>
 <kol-input-text _type="text" _id="deaktiviert" _name="deaktiviert" _disabled>Deaktiviert</kol-input-text>
 <kol-input-text _type="text" _id="schreibgeschützt" _name="schreibgeschützt" _read-only>Schreibgeschützt</kol-input-text>
 

package/doc/nav.md

@@ -35,7 +35,7 @@ noch die Icons ausgegeben.
 
 ### Beispiel
 
-<kol-nav _ariaLabel="Navigation" _links="[{'_href': 'startseite','_icon': 'codicon codicon-home','_label': 'Startseite',_children: [{ '_href': 'startseite/1-untermenuepunkt', '_icon': 'codicon codicon-home', '_label': '1. Untermenüpunkt' },{ '_href': 'startseite/2-untermenuepunkt', '_icon': 'codicon codicon-home', '_label': '2. Untermenüpunkt' },],},{'_href': 'unterseite', '_icon': 'codicon codicon-home', '_label': '2. Menüpunkt' }]" _has-compact-button></kol-nav>
+<kol-nav _ariaLabel="Navigation" _links="[{'_href':'startseite','_icon':'codicon codicon-home','_label':'Startseite','_children':[{'_href':'startseite/1-untermenuepunkt','_icon':'codicon codicon-home','_label':'1. Untermenüpunkt'},{'_href':'startseite/2-untermenuepunkt','_icon':'codicon codicon-home','_label':'2. Untermenüpunkt'}]},{'_href':'unterseite','_icon':'codicon codicon-home','_label':'2. Menüpunkt'}]" _has-compact-button></kol-nav>
 
 ## Verwendung
 

package/doc/spin.md

@@ -8,13 +8,70 @@ Ladeanzeigen, wie die **Spin**-Komponente, informieren die Nutzer:innen über La
 
 ```html
 <div>
-	<kol-spin _show />
+	<kol-spin _show></kol-spin>
+	<!-- for a11y experts - own animation -->
+	<kol-spin _show="true" _variant="none">
+		<!-- slot for own animation : https://github.com/vineethtrv/css-loader -->
+		<span class="loader" slot="expert"></span>
+	</kol-spin>
 </div>
 ```
 
 ### Beispiel
 
+<style>
+  /* https://github.com/vineethtrv/css-loader */
+  .loader {
+    width: 48px;
+    height: 48px;
+    border: 3px dotted #3d3d3d;
+    border-style: solid solid dotted dotted;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    animation: rotation 4s linear infinite;
+  }
+  .loader::after {
+    content: '';
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    border: 3px dotted #ff3d00;
+    border-style: solid solid dotted;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    animation: rotationBack 2s linear infinite;
+    transform-origin: center center;
+  }
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes rotationBack {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(-360deg);
+    }
+  }
+</style>
+
 <kol-spin _show></kol-spin>
+<kol-spin _show="true" _variant="none">
+<span class="loader" slot="expert"></span>
+</kol-spin>
 
 ## Verwendung
 
@@ -41,9 +98,10 @@ Verwenden Sie das Attribut `_show` um festzulegen, ob der Spin angezeigt wird.
 
 ## Properties
 
-| Property | Attribute | Description                                               | Type                   | Default |
-| -------- | --------- | --------------------------------------------------------- | ---------------------- | ------- |
-| `_show`  | `_show`   | Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht. | `boolean` \| `undefined` | `false` |
+| Property   | Attribute  | Description                                                                  | Type                               | Default     |
+| ---------- | ---------- | ---------------------------------------------------------------------------- | ---------------------------------- | ----------- |
+| `_show`    | `_show`    | Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.                    | `boolean` \| `undefined`             | `false`     |
+| `_variant` | `_variant` | Gibt an, welche Ladeanimation oder ob keine Animation verwendet werden soll. | `"default"` \| `"none"` \| `undefined` | `'default'` |
 
 
 ----------------------------------------------