@public-ui/components 2.1.5 → 2.1.6

package/dist/cjs/index.cjs.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-1285d2d1.js"),ariaCurrentService=require("./ariaCurrentService-53afa476.js"),componentNames=require("./component-names-e841018d.js"),i18n=require("./i18n-50cc2ee1.js"),dev_utils=require("./dev.utils-3e595d38.js"),bund=require("./bund-4be96755.js"),prop_validators=require("./prop.validators-476ef807.js");var KeyEnum,TagEnum;!function(e){e[e.error=0]="error",e[e.warning=1]="warning",e[e.info=2]="info",e[e.success=3]="success",e[e.message=4]="message",e[e.close=5]="close",e[e["form-description"]=6]="form-description",e[e.of=7]="of",e[e.characters=8]="characters",e[e.new=9]="new",e[e["no-entries"]=10]="no-entries",e[e["change-order"]=11]="change-order",e[e["action-running"]=12]="action-running",e[e["action-done"]=13]="action-done",e[e["page-first"]=14]="page-first",e[e["page-back"]=15]="page-back",e[e["page-next"]=16]="page-next",e[e["page-last"]=17]="page-last",e[e["entries-per-site"]=18]="entries-per-site",e[e["page-current"]=19]="page-current",e[e["page-selected"]=20]="page-selected",e[e["page-per-site"]=21]="page-per-site",e[e["logo-description"]=22]="logo-description",e[e["open-link-in-tab"]=23]="open-link-in-tab",e[e["kolibri-logo"]=24]="kolibri-logo"}(KeyEnum||(KeyEnum={})),function(e){e[e.abbr=0]="abbr",e[e.accordion=1]="accordion",e[e["accordion-group"]=2]="accordion-group",e[e.alert=3]="alert",e[e.avatar=4]="avatar",e[e.badge=5]="badge",e[e.breadcrumb=6]="breadcrumb",e[e.button=7]="button",e[e["button-group"]=8]="button-group",e[e["button-link"]=9]="button-link",e[e.card=10]="card",e[e.combobox=11]="combobox",e[e.details=12]="details",e[e.drawer=13]="drawer",e[e.form=14]="form",e[e.heading=15]="heading",e[e.icon=16]="icon",e[e.image=17]="image",e[e["indented-text"]=18]="indented-text",e[e["input-checkbox"]=19]="input-checkbox",e[e["input-color"]=20]="input-color",e[e["input-date"]=21]="input-date",e[e["input-email"]=22]="input-email",e[e["input-file"]=23]="input-file",e[e["input-number"]=24]="input-number",e[e["input-password"]=25]="input-password",e[e["input-radio"]=26]="input-radio",e[e["input-range"]=27]="input-range",e[e["input-text"]=28]="input-text",e[e.kolibri=29]="kolibri",e[e.link=30]="link",e[e["link-button"]=31]="link-button",e[e["link-group"]=32]="link-group",e[e.logo=33]="logo",e[e.modal=34]="modal",e[e.nav=35]="nav",e[e.pagination=36]="pagination",e[e.progress=37]="progress",e[e.select=38]="select",e[e.separator=39]="separator",e[e["skip-nav"]=40]="skip-nav",e[e.spin=41]="spin",e[e["split-button"]=42]="split-button",e[e.symbol=43]="symbol",e[e.table=44]="table",e[e["table-stateless"]=45]="table-stateless",e[e["table-stateful"]=46]="table-stateful",e[e.tabs=47]="tabs",e[e.textarea=48]="textarea",e[e["toast-container"]=49]="toast-container",e[e.toolbar=50]="toolbar",e[e.tooltip=51]="tooltip",e[e.tree=52]="tree",e[e["tree-item"]=53]="tree-item"}(TagEnum||(TagEnum={}));const KoliBri=new index.oe("kol",KeyEnum,TagEnum);let initialized=!1;const bootstrap=async(e,t,n)=>{var i,r;i18n.initializeI18n(null!==(r=null===(i=null==n?void 0:n.translation)||void 0===i?void 0:i.name)&&void 0!==r?r:"de",null==n?void 0:n.translations),(null==n?void 0:n.transformTagName)&&componentNames.setCustomTagNames(null==n?void 0:n.transformTagName);const o=await index.G(e,t,n);return initialized=!0,o},register=bootstrap,isInitialized=()=>initialized;class ToasterService{constructor(e,t){this.document=e,this.options=t,this.toastContainerElement=this.document.createElement(componentNames.KolToastContainerTag),this.document.body.prepend(this.toastContainerElement)}static getInstance(e,t){if(!isInitialized())throw new Error("Toaster: Call KoliBri bootstrap/register method first.");let n=this.instances.get(e);return n||(n=new ToasterService(e,t),this.instances.set(e,n)),n}dispose(){const e=this.toastContainerElement;e?(this.toastContainerElement=void 0,e.remove()):dev_utils.Log.warn("Toaster service is already disposed.",{forceLog:!0})}enqueue(e){var t,n;if(this.toastContainerElement&&"function"==typeof this.toastContainerElement.enqueue)return!e.alertVariant&&(null===(t=this.options)||void 0===t?void 0:t.defaultAlertVariant)&&(e.alertVariant=null===(n=this.options)||void 0===n?void 0:n.defaultAlertVariant),this.toastContainerElement.enqueue(e)}closeAll(e=!1){this.toastContainerElement&&"function"==typeof this.toastContainerElement.closeAll&&this.toastContainerElement.closeAll(e)}}ToasterService.instances=new Map,exports.setCurrentLocation=ariaCurrentService.setCurrentLocation,exports.BUNDESAEMTER=bund.BUNDESAEMTER,exports.BUNDESANSTALTEN=bund.BUNDESANSTALTEN,exports.BUNDESMINISTERIEN=bund.BUNDESMINISTERIEN,exports.BUND_LOGO_TEXT_MAP=bund.BUND_LOGO_TEXT_MAP,Object.defineProperty(exports,"Bundesamt",{enumerable:!0,get:function(){return bund.Bundesamt}}),Object.defineProperty(exports,"Bundesanstalt",{enumerable:!0,get:function(){return bund.Bundesanstalt}}),Object.defineProperty(exports,"Bundesministerium",{enumerable:!0,get:function(){return bund.Bundesministerium}}),exports.KoliBriDevHelper=prop_validators.KoliBriDevHelper,exports.KoliBri=KoliBri,exports.ToasterService=ToasterService,exports.bootstrap=bootstrap,exports.register=register;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-1285d2d1.js"),ariaCurrentService=require("./ariaCurrentService-53afa476.js"),componentNames=require("./component-names-e841018d.js"),i18n=require("./i18n-50cc2ee1.js"),dev_utils=require("./dev.utils-58fde089.js"),bund=require("./bund-4be96755.js"),prop_validators=require("./prop.validators-37113ad1.js");var KeyEnum,TagEnum;!function(e){e[e.error=0]="error",e[e.warning=1]="warning",e[e.info=2]="info",e[e.success=3]="success",e[e.message=4]="message",e[e.close=5]="close",e[e["form-description"]=6]="form-description",e[e.of=7]="of",e[e.characters=8]="characters",e[e.new=9]="new",e[e["no-entries"]=10]="no-entries",e[e["change-order"]=11]="change-order",e[e["action-running"]=12]="action-running",e[e["action-done"]=13]="action-done",e[e["page-first"]=14]="page-first",e[e["page-back"]=15]="page-back",e[e["page-next"]=16]="page-next",e[e["page-last"]=17]="page-last",e[e["entries-per-site"]=18]="entries-per-site",e[e["page-current"]=19]="page-current",e[e["page-selected"]=20]="page-selected",e[e["page-per-site"]=21]="page-per-site",e[e["logo-description"]=22]="logo-description",e[e["open-link-in-tab"]=23]="open-link-in-tab",e[e["kolibri-logo"]=24]="kolibri-logo"}(KeyEnum||(KeyEnum={})),function(e){e[e.abbr=0]="abbr",e[e.accordion=1]="accordion",e[e["accordion-group"]=2]="accordion-group",e[e.alert=3]="alert",e[e.avatar=4]="avatar",e[e.badge=5]="badge",e[e.breadcrumb=6]="breadcrumb",e[e.button=7]="button",e[e["button-group"]=8]="button-group",e[e["button-link"]=9]="button-link",e[e.card=10]="card",e[e.combobox=11]="combobox",e[e.details=12]="details",e[e.drawer=13]="drawer",e[e.form=14]="form",e[e.heading=15]="heading",e[e.icon=16]="icon",e[e.image=17]="image",e[e["indented-text"]=18]="indented-text",e[e["input-checkbox"]=19]="input-checkbox",e[e["input-color"]=20]="input-color",e[e["input-date"]=21]="input-date",e[e["input-email"]=22]="input-email",e[e["input-file"]=23]="input-file",e[e["input-number"]=24]="input-number",e[e["input-password"]=25]="input-password",e[e["input-radio"]=26]="input-radio",e[e["input-range"]=27]="input-range",e[e["input-text"]=28]="input-text",e[e.kolibri=29]="kolibri",e[e.link=30]="link",e[e["link-button"]=31]="link-button",e[e["link-group"]=32]="link-group",e[e.logo=33]="logo",e[e.modal=34]="modal",e[e.nav=35]="nav",e[e.pagination=36]="pagination",e[e.progress=37]="progress",e[e.select=38]="select",e[e.separator=39]="separator",e[e["skip-nav"]=40]="skip-nav",e[e.spin=41]="spin",e[e["split-button"]=42]="split-button",e[e.symbol=43]="symbol",e[e.table=44]="table",e[e["table-stateless"]=45]="table-stateless",e[e["table-stateful"]=46]="table-stateful",e[e.tabs=47]="tabs",e[e.textarea=48]="textarea",e[e["toast-container"]=49]="toast-container",e[e.toolbar=50]="toolbar",e[e.tooltip=51]="tooltip",e[e.tree=52]="tree",e[e["tree-item"]=53]="tree-item"}(TagEnum||(TagEnum={}));const KoliBri=new index.oe("kol",KeyEnum,TagEnum);let initialized=!1;const bootstrap=async(e,t,n)=>{var i,o;dev_utils.setDevMode("development"===(null==n?void 0:n.environment)),i18n.initializeI18n(null!==(o=null===(i=null==n?void 0:n.translation)||void 0===i?void 0:i.name)&&void 0!==o?o:"de",null==n?void 0:n.translations),(null==n?void 0:n.transformTagName)&&componentNames.setCustomTagNames(null==n?void 0:n.transformTagName);const r=await index.G(e,t,n);return initialized=!0,r},register=bootstrap,isInitialized=()=>initialized;class ToasterService{constructor(e,t){this.document=e,this.options=t,this.toastContainerElement=this.document.createElement(componentNames.KolToastContainerTag),this.document.body.prepend(this.toastContainerElement)}static getInstance(e,t){if(!isInitialized())throw new Error("Toaster: Call KoliBri bootstrap/register method first.");let n=this.instances.get(e);return n||(n=new ToasterService(e,t),this.instances.set(e,n)),n}dispose(){const e=this.toastContainerElement;e?(this.toastContainerElement=void 0,e.remove()):dev_utils.Log.warn("Toaster service is already disposed.",{forceLog:!0})}enqueue(e){var t,n;if(this.toastContainerElement&&"function"==typeof this.toastContainerElement.enqueue)return!e.alertVariant&&(null===(t=this.options)||void 0===t?void 0:t.defaultAlertVariant)&&(e.alertVariant=null===(n=this.options)||void 0===n?void 0:n.defaultAlertVariant),this.toastContainerElement.enqueue(e)}closeAll(e=!1){this.toastContainerElement&&"function"==typeof this.toastContainerElement.closeAll&&this.toastContainerElement.closeAll(e)}}ToasterService.instances=new Map,exports.setCurrentLocation=ariaCurrentService.setCurrentLocation,exports.BUNDESAEMTER=bund.BUNDESAEMTER,exports.BUNDESANSTALTEN=bund.BUNDESANSTALTEN,exports.BUNDESMINISTERIEN=bund.BUNDESMINISTERIEN,exports.BUND_LOGO_TEXT_MAP=bund.BUND_LOGO_TEXT_MAP,Object.defineProperty(exports,"Bundesamt",{enumerable:!0,get:function(){return bund.Bundesamt}}),Object.defineProperty(exports,"Bundesanstalt",{enumerable:!0,get:function(){return bund.Bundesanstalt}}),Object.defineProperty(exports,"Bundesministerium",{enumerable:!0,get:function(){return bund.Bundesministerium}}),exports.KoliBriDevHelper=prop_validators.KoliBriDevHelper,exports.KoliBri=KoliBri,exports.ToasterService=ToasterService,exports.bootstrap=bootstrap,exports.register=register;

package/dist/cjs/index.cjs.js.map

@@ -1 +1 @@
-{"file":"index.cjs.js","mappings":"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","names":["Theme","initializeI18n","setCustomTagNames","coreRegister","KolToastContainerTag","Log"],"sources":["src/schema/i18n-keys.ts","src/schema/tag-names.ts","src/schema/index.ts","src/core/bootstrap.ts","src/components/toaster/toaster.tsx"],"sourcesContent":["export enum KeyEnum {\n\t'error',\n\t'warning',\n\t'info',\n\t'success',\n\t'message',\n\t'close',\n\t'form-description',\n\t'of',\n\t'characters',\n\t'new',\n\t'no-entries',\n\t'change-order',\n\t'action-running',\n\t'action-done',\n\t'page-first',\n\t'page-back',\n\t'page-next',\n\t'page-last',\n\t'entries-per-site',\n\t'page-current',\n\t'page-selected',\n\t'page-per-site',\n\t'logo-description',\n\t'open-link-in-tab',\n\t'kolibri-logo',\n}\n","export enum TagEnum {\n\t'abbr',\n\t'accordion',\n\t'accordion-group', // TODO: github pr link\n\t'alert',\n\t'avatar',\n\t'badge',\n\t'breadcrumb',\n\t'button',\n\t'button-group',\n\t'button-link',\n\t'card',\n\t'combobox',\n\t'details',\n\t'drawer',\n\t'form',\n\t'heading',\n\t'icon',\n\t'image',\n\t'indented-text',\n\t'input-checkbox',\n\t'input-color',\n\t'input-date',\n\t'input-email',\n\t'input-file',\n\t'input-number',\n\t'input-password',\n\t'input-radio',\n\t'input-range',\n\t'input-text',\n\t'kolibri',\n\t'link',\n\t'link-button',\n\t'link-group',\n\t'logo',\n\t'modal',\n\t'nav',\n\t'pagination',\n\t'progress',\n\t'select',\n\t'separator', // TODO: github pr link\n\t'skip-nav',\n\t'spin',\n\t'split-button',\n\t'symbol',\n\t'table',\n\t'table-stateless',\n\t'table-stateful',\n\t'tabs',\n\t'textarea',\n\t'toast-container',\n\t'toolbar', // TODO: github pr link\n\t'tooltip',\n\t'tree',\n\t'tree-item',\n}\n","import { Theme } from 'adopted-style-sheets';\n\nimport { KeyEnum } from './i18n-keys';\nimport { TagEnum } from './tag-names';\n\nexport const KoliBri = new Theme<'kol', keyof typeof KeyEnum, keyof typeof TagEnum>('kol', KeyEnum, TagEnum);\n\nexport * from './components';\n// export * from './enums'; only for internal use\nexport * from './props';\nexport * from './types';\nexport * from './utils';\nexport * from './validators';\nexport * from './interfaces';\n","import type { Generic, LoaderCallback, RegisterOptions } from 'adopted-style-sheets';\nimport { register as coreRegister } from 'adopted-style-sheets';\nimport { initializeI18n } from './i18n';\nimport { setCustomTagNames } from './component-names';\n\nlet initialized = false;\n\ntype KoliBriOptions = RegisterOptions & {\n\ttransformTagName?: (tagName: string) => string;\n};\n\nexport const bootstrap = async (\n\tthemes:\n\t\t| Generic.Theming.RegisterPatch<string, string, string>\n\t\t| Generic.Theming.RegisterPatch<string, string, string>[]\n\t\t| Set<Generic.Theming.RegisterPatch<string, string, string>>,\n\tloaders: LoaderCallback | LoaderCallback[] | Set<LoaderCallback>,\n\toptions?: KoliBriOptions,\n): Promise<void[]> => {\n\tinitializeI18n(options?.translation?.name ?? 'de', options?.translations);\n\tif (options?.transformTagName) {\n\t\tsetCustomTagNames(options?.transformTagName);\n\t}\n\tconst coreRegisterReturnValue = await coreRegister(themes, loaders, options);\n\tinitialized = true;\n\n\treturn coreRegisterReturnValue;\n};\n\nexport const register = bootstrap;\nexport const isInitialized = () => initialized;\n","import type { Toast, ToasterOptions } from '../../schema';\nimport { Log } from '../../schema';\nimport { KolToastContainerTag } from '../../core/component-names';\nimport { isInitialized } from '../../core/bootstrap';\n\nexport class ToasterService {\n\tprivate static readonly instances: Map<Document, ToasterService> = new Map<Document, ToasterService>();\n\n\tprivate toastContainerElement?: HTMLKolToastContainerElement;\n\n\tprivate constructor(\n\t\tprivate readonly document: Document,\n\t\tprivate readonly options?: ToasterOptions,\n\t) {\n\t\tthis.toastContainerElement = this.document.createElement(KolToastContainerTag);\n\t\tthis.document.body.prepend(this.toastContainerElement);\n\t}\n\n\t/**\n\t * Get a toaster for the specified document environment. Each environment has exactly one instance of the service.\n\t */\n\tpublic static getInstance(document: Document, options?: ToasterOptions): ToasterService {\n\t\tif (!isInitialized()) {\n\t\t\tthrow new Error('Toaster: Call KoliBri bootstrap/register method first.');\n\t\t}\n\n\t\tlet instance = this.instances.get(document);\n\t\tif (!instance) {\n\t\t\tinstance = new ToasterService(document, options);\n\t\t\tthis.instances.set(document, instance);\n\t\t}\n\t\treturn instance;\n\t}\n\n\tpublic dispose() {\n\t\tconst element = this.toastContainerElement;\n\t\tif (element) {\n\t\t\tthis.toastContainerElement = undefined;\n\t\t\telement.remove();\n\t\t} else {\n\t\t\tLog.warn('Toaster service is already disposed.', { forceLog: true });\n\t\t}\n\t}\n\n\tpublic enqueue(toast: Toast): Promise<() => void> | undefined {\n\t\t/**\n\t\t * We need this condition for SSR. The toast container is not rendered on the server,\n\t\t * so we can't enqueue toasts.\n\t\t */\n\t\tif (this.toastContainerElement && typeof this.toastContainerElement.enqueue === 'function') {\n\t\t\tif (!toast.alertVariant && this.options?.defaultAlertVariant) {\n\t\t\t\ttoast.alertVariant = this.options?.defaultAlertVariant;\n\t\t\t}\n\n\t\t\treturn this.toastContainerElement.enqueue(toast);\n\t\t}\n\t}\n\n\tpublic closeAll(immediate: boolean = false): void {\n\t\tif (this.toastContainerElement && typeof this.toastContainerElement.closeAll === 'function') {\n\t\t\tvoid this.toastContainerElement.closeAll(immediate);\n\t\t}\n\t}\n}\n"],"version":3}
+{"file":"index.cjs.js","mappings":"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","names":["Theme","setDevMode","initializeI18n","setCustomTagNames","coreRegister","KolToastContainerTag","Log"],"sources":["src/schema/i18n-keys.ts","src/schema/tag-names.ts","src/schema/index.ts","src/core/bootstrap.ts","src/components/toaster/toaster.tsx"],"sourcesContent":["export enum KeyEnum {\n\t'error',\n\t'warning',\n\t'info',\n\t'success',\n\t'message',\n\t'close',\n\t'form-description',\n\t'of',\n\t'characters',\n\t'new',\n\t'no-entries',\n\t'change-order',\n\t'action-running',\n\t'action-done',\n\t'page-first',\n\t'page-back',\n\t'page-next',\n\t'page-last',\n\t'entries-per-site',\n\t'page-current',\n\t'page-selected',\n\t'page-per-site',\n\t'logo-description',\n\t'open-link-in-tab',\n\t'kolibri-logo',\n}\n","export enum TagEnum {\n\t'abbr',\n\t'accordion',\n\t'accordion-group', // TODO: github pr link\n\t'alert',\n\t'avatar',\n\t'badge',\n\t'breadcrumb',\n\t'button',\n\t'button-group',\n\t'button-link',\n\t'card',\n\t'combobox',\n\t'details',\n\t'drawer',\n\t'form',\n\t'heading',\n\t'icon',\n\t'image',\n\t'indented-text',\n\t'input-checkbox',\n\t'input-color',\n\t'input-date',\n\t'input-email',\n\t'input-file',\n\t'input-number',\n\t'input-password',\n\t'input-radio',\n\t'input-range',\n\t'input-text',\n\t'kolibri',\n\t'link',\n\t'link-button',\n\t'link-group',\n\t'logo',\n\t'modal',\n\t'nav',\n\t'pagination',\n\t'progress',\n\t'select',\n\t'separator', // TODO: github pr link\n\t'skip-nav',\n\t'spin',\n\t'split-button',\n\t'symbol',\n\t'table',\n\t'table-stateless',\n\t'table-stateful',\n\t'tabs',\n\t'textarea',\n\t'toast-container',\n\t'toolbar', // TODO: github pr link\n\t'tooltip',\n\t'tree',\n\t'tree-item',\n}\n","import { Theme } from 'adopted-style-sheets';\n\nimport { KeyEnum } from './i18n-keys';\nimport { TagEnum } from './tag-names';\n\nexport const KoliBri = new Theme<'kol', keyof typeof KeyEnum, keyof typeof TagEnum>('kol', KeyEnum, TagEnum);\n\nexport * from './components';\n// export * from './enums'; only for internal use\nexport * from './props';\nexport * from './types';\nexport * from './utils';\nexport * from './validators';\nexport * from './interfaces';\n","import type { Generic, LoaderCallback, RegisterOptions } from 'adopted-style-sheets';\nimport { register as coreRegister } from 'adopted-style-sheets';\nimport { setDevMode } from '../schema';\nimport { setCustomTagNames } from './component-names';\nimport { initializeI18n } from './i18n';\n\ntype Environment = 'development' | 'production';\n\ntype KoliBriOptions = RegisterOptions & {\n\t/**\n\t * The environment in which the application is running.\n\t */\n\tenvironment?: Environment;\n\t/**\n\t * This option allows you to transform the component tag names.\n\t */\n\ttransformTagName?: (tagName: string) => string;\n};\n\nlet initialized = false;\n\nexport const bootstrap = async (\n\tthemes:\n\t\t| Generic.Theming.RegisterPatch<string, string, string>\n\t\t| Generic.Theming.RegisterPatch<string, string, string>[]\n\t\t| Set<Generic.Theming.RegisterPatch<string, string, string>>,\n\tloaders: LoaderCallback | LoaderCallback[] | Set<LoaderCallback>,\n\toptions?: KoliBriOptions,\n): Promise<void[]> => {\n\tsetDevMode(options?.environment === 'development');\n\n\tinitializeI18n(options?.translation?.name ?? 'de', options?.translations);\n\tif (options?.transformTagName) {\n\t\tsetCustomTagNames(options?.transformTagName);\n\t}\n\tconst coreRegisterReturnValue = await coreRegister(themes, loaders, options);\n\tinitialized = true;\n\n\treturn coreRegisterReturnValue;\n};\n\nexport const register = bootstrap;\nexport const isInitialized = () => initialized;\n","import type { Toast, ToasterOptions } from '../../schema';\nimport { Log } from '../../schema';\nimport { KolToastContainerTag } from '../../core/component-names';\nimport { isInitialized } from '../../core/bootstrap';\n\nexport class ToasterService {\n\tprivate static readonly instances: Map<Document, ToasterService> = new Map<Document, ToasterService>();\n\n\tprivate toastContainerElement?: HTMLKolToastContainerElement;\n\n\tprivate constructor(\n\t\tprivate readonly document: Document,\n\t\tprivate readonly options?: ToasterOptions,\n\t) {\n\t\tthis.toastContainerElement = this.document.createElement(KolToastContainerTag);\n\t\tthis.document.body.prepend(this.toastContainerElement);\n\t}\n\n\t/**\n\t * Get a toaster for the specified document environment. Each environment has exactly one instance of the service.\n\t */\n\tpublic static getInstance(document: Document, options?: ToasterOptions): ToasterService {\n\t\tif (!isInitialized()) {\n\t\t\tthrow new Error('Toaster: Call KoliBri bootstrap/register method first.');\n\t\t}\n\n\t\tlet instance = this.instances.get(document);\n\t\tif (!instance) {\n\t\t\tinstance = new ToasterService(document, options);\n\t\t\tthis.instances.set(document, instance);\n\t\t}\n\t\treturn instance;\n\t}\n\n\tpublic dispose() {\n\t\tconst element = this.toastContainerElement;\n\t\tif (element) {\n\t\t\tthis.toastContainerElement = undefined;\n\t\t\telement.remove();\n\t\t} else {\n\t\t\tLog.warn('Toaster service is already disposed.', { forceLog: true });\n\t\t}\n\t}\n\n\tpublic enqueue(toast: Toast): Promise<() => void> | undefined {\n\t\t/**\n\t\t * We need this condition for SSR. The toast container is not rendered on the server,\n\t\t * so we can't enqueue toasts.\n\t\t */\n\t\tif (this.toastContainerElement && typeof this.toastContainerElement.enqueue === 'function') {\n\t\t\tif (!toast.alertVariant && this.options?.defaultAlertVariant) {\n\t\t\t\ttoast.alertVariant = this.options?.defaultAlertVariant;\n\t\t\t}\n\n\t\t\treturn this.toastContainerElement.enqueue(toast);\n\t\t}\n\t}\n\n\tpublic closeAll(immediate: boolean = false): void {\n\t\tif (this.toastContainerElement && typeof this.toastContainerElement.closeAll === 'function') {\n\t\t\tvoid this.toastContainerElement.closeAll(immediate);\n\t\t}\n\t}\n}\n"],"version":3}

package/dist/cjs/kol-abbr.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-2151744b.js"),dev_utils=require("./dev.utils-761c7626.js"),componentNames=require("./component-names-e841018d.js"),label=require("./label-c3e352c8.js"),tooltipAlign=require("./tooltip-align-ddef1b9d.js");require("./reuse-daa2baf3.js"),require("./dev.utils-3e595d38.js"),require("./prop.validators-476ef807.js"),require("./index-1285d2d1.js"),require("./align-e658dfb3.js");const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > abbr {\n    cursor: help;\n  }\n}",KolAbbrDefaultStyle0=defaultStyleCss,KolAbbr=class{constructor(n){index.registerInstance(this,n),this.nonce=dev_utils.nonce(),this._label=void 0,this._tooltipAlign="top",this.state={_label:"",_tooltipAlign:"top"}}render(){return index.h(index.Host,{key:"598d706f074db11649d068894821a214d3373d11",class:"kol-abbr"},index.h("abbr",{key:"cea033577a07ea9cbc48cf32f2afa798b2f70c1b","aria-labelledby":this.nonce,role:"definition",tabindex:"0",title:this.state._label},index.h("span",{key:"f28a0dacfb9e1d5807f763e03401e1b71c0414c3",title:""},index.h("slot",{key:"c72ee140bfc1c43d781a5309c07f9a47689d6f4e"}))),index.h(componentNames.KolTooltipWcTag,{key:"2743bb91c1b770375bda8e19668e7ad698b10baa",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._label}))}validateLabel(n){label.validateLabel(this,n,{required:!0})}validateTooltipAlign(n){tooltipAlign.validateTooltipAlign(this,n)}componentWillLoad(){this.validateLabel(this._label),this.validateTooltipAlign(this._tooltipAlign)}static get watchers(){return{_label:["validateLabel"],_tooltipAlign:["validateTooltipAlign"]}}};KolAbbr.style={default:KolAbbrDefaultStyle0},exports.kol_abbr=KolAbbr;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-489d4e74.js"),dev_utils=require("./dev.utils-abeba982.js"),componentNames=require("./component-names-e841018d.js"),label=require("./label-5ba50d8b.js"),tooltipAlign=require("./tooltip-align-18f90f3f.js");require("./reuse-50a5792c.js"),require("./dev.utils-58fde089.js"),require("./prop.validators-37113ad1.js"),require("./index-1285d2d1.js"),require("./align-cf181773.js");const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > abbr {\n    cursor: help;\n  }\n}",KolAbbrDefaultStyle0=defaultStyleCss,KolAbbr=class{constructor(n){index.registerInstance(this,n),this.nonce=dev_utils.nonce(),this._label=void 0,this._tooltipAlign="top",this.state={_label:"",_tooltipAlign:"top"}}render(){return index.h(index.Host,{key:"598d706f074db11649d068894821a214d3373d11",class:"kol-abbr"},index.h("abbr",{key:"cea033577a07ea9cbc48cf32f2afa798b2f70c1b","aria-labelledby":this.nonce,role:"definition",tabindex:"0",title:this.state._label},index.h("span",{key:"f28a0dacfb9e1d5807f763e03401e1b71c0414c3",title:""},index.h("slot",{key:"c72ee140bfc1c43d781a5309c07f9a47689d6f4e"}))),index.h(componentNames.KolTooltipWcTag,{key:"2743bb91c1b770375bda8e19668e7ad698b10baa",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._label}))}validateLabel(n){label.validateLabel(this,n,{required:!0})}validateTooltipAlign(n){tooltipAlign.validateTooltipAlign(this,n)}componentWillLoad(){this.validateLabel(this._label),this.validateTooltipAlign(this._tooltipAlign)}static get watchers(){return{_label:["validateLabel"],_tooltipAlign:["validateTooltipAlign"]}}};KolAbbr.style={default:KolAbbrDefaultStyle0},exports.kol_abbr=KolAbbr;

package/dist/cjs/kol-accordion.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-2151744b.js"),dev_utils=require("./dev.utils-761c7626.js"),validation=require("./validation-d73ffd53.js"),componentNames=require("./component-names-e841018d.js"),prop_validators=require("./prop.validators-476ef807.js"),disabled=require("./disabled-c6505268.js"),open=require("./open-b72a9d97.js"),label=require("./label-c3e352c8.js");require("./reuse-daa2baf3.js"),require("./dev.utils-3e595d38.js"),require("./index-1285d2d1.js");const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  /* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n  .wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    overflow: hidden;\n    transition: grid-template-rows 0.3s;\n  }\n  .accordion.open .wrapper {\n    grid-template-rows: 1fr;\n  }\n  .animation-wrapper {\n    min-height: 0;\n    transition: visibility 0.3s;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n  }\n  .accordion.open .animation-wrapper {\n    visibility: visible;\n  }\n  @media (prefers-reduced-motion) {\n    .animation-wrapper,\n    .wrapper {\n      transition-duration: 0s;\n    }\n  }\n  /* @see https://github.com/public-ui/kolibri/issues/5952 */\n  @media print {\n    .accordion:not(.open) .animation-wrapper {\n      display: none;\n    }\n  }\n  /*\n  * Inside a button, the caption text is always centered.\n  * So we have to align the text to the left.\n  */\n  .accordion .kol-heading-wc .kol-button-wc button .kol-span-wc {\n    justify-items: start;\n  }\n}",KolAccordionDefaultStyle0=defaultStyleCss;prop_validators.featureHint("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),prop_validators.featureHint("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const KolAccordion=class{constructor(e){index.registerInstance(this,e),this.nonce=dev_utils.nonce(),this.catchRef=e=>{this.buttonWcRef=e},this.onClick=e=>{this._open=!this._open,setTimeout((()=>{var n;"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onClick)&&this.state._on.onClick(e,!0===this._open)}))},this._disabled=!1,this._label=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_label:"",_level:1}}async focus(){await this.kolFocus()}async kolFocus(){var e;await(null===(e=this.buttonWcRef)||void 0===e?void 0:e.kolFocus())}render(){return index.h(index.Host,{key:"b2662d09c5d6ee4ba7b8775fad1abedb51d55483",class:"kol-accordion"},index.h("div",{key:"c41fb13d7a5b699031edebf8aa88fe2f3e022346",class:{accordion:!0,disabled:!0===this.state._disabled,open:!0===this.state._open}},index.h(componentNames.KolHeadingWcTag,{key:"10d86a82b4bc84278174a822edc508dd7edc3158",_label:"",_level:this.state._level,class:"accordion-heading"},index.h(componentNames.KolButtonWcTag,{key:"365d163277cbdddfe6e34203e31a3d0ae9a1f602",class:"accordion-button",ref:this.catchRef,slot:"expert",_ariaControls:this.nonce,_ariaExpanded:this.state._open,_disabled:this.state._disabled,_icons:this.state._open?"codicon codicon-remove":"codicon codicon-add",_label:this.state._label,_on:{onClick:this.onClick}})),index.h("div",{key:"6fca8bd22147df2e556d9cfefb09bb60c705de9a",class:"wrapper"},index.h("div",{key:"8fa8ba68f8c2ea8911bdb7c040c4d8bd44469fbf",class:"animation-wrapper"},index.h("div",{key:"dd61af68e1eaeece1f8b5595fae6b97418563cac","aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce},index.h("slot",{key:"6249f6a0ccfd5ed101297d94a52a5311cc4385cf"}))))))}validateDisabled(e){disabled.validateDisabled(this,e)}validateLabel(e){label.validateLabel(this,e,{required:!0})}validateLevel(e){validation.watchHeadingLevel(this,e)}validateOn(e){"object"==typeof e&&null!==e&&"function"==typeof e.onClick&&prop_validators.setState(this,"_on",e)}validateOpen(e){open.validateOpen(this,e)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};KolAccordion.style={default:KolAccordionDefaultStyle0},exports.kol_accordion=KolAccordion;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-489d4e74.js"),dev_utils=require("./dev.utils-abeba982.js"),validation=require("./validation-ccf9173b.js"),componentNames=require("./component-names-e841018d.js"),prop_validators=require("./prop.validators-37113ad1.js"),disabled=require("./disabled-4f7a7b7e.js"),open=require("./open-f0d79417.js"),label=require("./label-5ba50d8b.js");require("./reuse-50a5792c.js"),require("./dev.utils-58fde089.js"),require("./index-1285d2d1.js");const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  /* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n  .wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    overflow: hidden;\n    transition: grid-template-rows 0.3s;\n  }\n  .accordion.open .wrapper {\n    grid-template-rows: 1fr;\n  }\n  .animation-wrapper {\n    min-height: 0;\n    transition: visibility 0.3s;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n  }\n  .accordion.open .animation-wrapper {\n    visibility: visible;\n  }\n  @media (prefers-reduced-motion) {\n    .animation-wrapper,\n    .wrapper {\n      transition-duration: 0s;\n    }\n  }\n  /* @see https://github.com/public-ui/kolibri/issues/5952 */\n  @media print {\n    .accordion:not(.open) .animation-wrapper {\n      display: none;\n    }\n  }\n  /*\n  * Inside a button, the caption text is always centered.\n  * So we have to align the text to the left.\n  */\n  .accordion .kol-heading-wc .kol-button-wc button .kol-span-wc {\n    justify-items: start;\n  }\n}",KolAccordionDefaultStyle0=defaultStyleCss;prop_validators.featureHint("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),prop_validators.featureHint("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const KolAccordion=class{constructor(e){index.registerInstance(this,e),this.nonce=dev_utils.nonce(),this.catchRef=e=>{this.buttonWcRef=e},this.onClick=e=>{this._open=!this._open,setTimeout((()=>{var n;"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onClick)&&this.state._on.onClick(e,!0===this._open)}))},this._disabled=!1,this._label=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_label:"",_level:1}}async focus(){await this.kolFocus()}async kolFocus(){var e;await(null===(e=this.buttonWcRef)||void 0===e?void 0:e.kolFocus())}render(){return index.h(index.Host,{key:"b2662d09c5d6ee4ba7b8775fad1abedb51d55483",class:"kol-accordion"},index.h("div",{key:"c41fb13d7a5b699031edebf8aa88fe2f3e022346",class:{accordion:!0,disabled:!0===this.state._disabled,open:!0===this.state._open}},index.h(componentNames.KolHeadingWcTag,{key:"10d86a82b4bc84278174a822edc508dd7edc3158",_label:"",_level:this.state._level,class:"accordion-heading"},index.h(componentNames.KolButtonWcTag,{key:"365d163277cbdddfe6e34203e31a3d0ae9a1f602",class:"accordion-button",ref:this.catchRef,slot:"expert",_ariaControls:this.nonce,_ariaExpanded:this.state._open,_disabled:this.state._disabled,_icons:this.state._open?"codicon codicon-remove":"codicon codicon-add",_label:this.state._label,_on:{onClick:this.onClick}})),index.h("div",{key:"6fca8bd22147df2e556d9cfefb09bb60c705de9a",class:"wrapper"},index.h("div",{key:"8fa8ba68f8c2ea8911bdb7c040c4d8bd44469fbf",class:"animation-wrapper"},index.h("div",{key:"dd61af68e1eaeece1f8b5595fae6b97418563cac","aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce},index.h("slot",{key:"6249f6a0ccfd5ed101297d94a52a5311cc4385cf"}))))))}validateDisabled(e){disabled.validateDisabled(this,e)}validateLabel(e){label.validateLabel(this,e,{required:!0})}validateLevel(e){validation.watchHeadingLevel(this,e)}validateOn(e){"object"==typeof e&&null!==e&&"function"==typeof e.onClick&&prop_validators.setState(this,"_on",e)}validateOpen(e){open.validateOpen(this,e)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};KolAccordion.style={default:KolAccordionDefaultStyle0},exports.kol_accordion=KolAccordion;

package/dist/cjs/kol-alert-wc.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-2151744b.js"),i18n=require("./i18n-2207af53.js"),validation=require("./validation-d73ffd53.js"),componentNames=require("./component-names-e841018d.js"),dev_utils=require("./dev.utils-3e595d38.js"),prop_validators=require("./prop.validators-476ef807.js"),hasCloser=require("./has-closer-7819610c.js"),label=require("./label-c3e352c8.js");require("./i18n-50cc2ee1.js"),require("./reuse-daa2baf3.js"),require("./index-1285d2d1.js");const alertTypeOptions=["default","info","success","warning","error"],alertVariantOptions=["card","msg"],Icon=e=>index.h(componentNames.KolIconTag,{class:"heading-icon",_label:"string"==typeof e.label&&e.label.length>0?"":e.ariaLabel,_icons:e.icon}),AlertIcon=e=>{switch(e.type){case"error":return index.h(Icon,{ariaLabel:i18n.translate("kol-error"),icon:"codicon codicon-error",label:e.label});case"info":return index.h(Icon,{ariaLabel:i18n.translate("kol-info"),icon:"codicon codicon-info",label:e.label});case"warning":return index.h(Icon,{ariaLabel:i18n.translate("kol-warning"),icon:"codicon codicon-warning",label:e.label});case"success":return index.h(Icon,{ariaLabel:i18n.translate("kol-success"),icon:"codicon codicon-pass",label:e.label});default:return index.h(Icon,{ariaLabel:i18n.translate("kol-message"),icon:"codicon codicon-comment",label:e.label})}},KolAlertWc=class{constructor(e){index.registerInstance(this,e),this.close=()=>{var e;void 0!==(null===(e=this._on)||void 0===e?void 0:e.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose,this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){var e;if(this.state._alert){try{dev_utils.Log.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(e){dev_utils.Log.debug("Navigator does not support vibration.")}setTimeout((()=>{this.validateAlert(!1)}),1e4)}return index.h(index.Host,{key:"ecb2cd45b14f92cc1c337d2b81382a8cc820e869",class:{"kol-alert-wc":!0,alert:!0,[this.state._type]:!0,[this.state._variant]:!0,hasCloser:!!this.state._hasCloser},role:this.state._alert?"alert":void 0},index.h("div",{key:"b190de9f62c33d970daabc1b5638132da33c936e",class:"heading"},index.h(AlertIcon,{key:"e1da8b194a13ec6f9270efc2234caadcee77e827",label:this.state._label,type:this.state._type}),index.h("div",{key:"7ffd000cfbe218c582791e8646ff5caf9bad5b25",class:"heading-content"},"string"==typeof this.state._label&&(null===(e=this.state._label)||void 0===e?void 0:e.length)>0&&index.h(componentNames.KolHeadingWcTag,{key:"f9e7c598243a4868b80b248fdf4dfdeed5d24a2b",_label:this.state._label,_level:this.state._level}),"msg"===this.state._variant&&index.h("div",{key:"b5b70319b6c7747872e9d8072a1fe7565938f7c1",class:"content"},index.h("slot",{key:"b75edf24762d861147d5ee5fa0701b4c5a30eed1"}))),this.state._hasCloser&&index.h(componentNames.KolButtonWcTag,{key:"cd46afacd1afbc415e1184604b3b1ac9af901c97",class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:i18n.translate("kol-close-alert",{placeholders:{label:this.state._label}}),_on:this.on,_tooltipAlign:"left"})),"card"===this.state._variant&&index.h("div",{key:"2a9670974b00907497abd255e02194301df0c0a2",class:"content"},index.h("slot",{key:"9bd3de7e485b9865d5f74dfbce4f421d4b1dc9b5"})))}validateAlert(e){prop_validators.watchBoolean(this,"_alert",e)}validateHasCloser(e){hasCloser.validateHasCloser(this,e)}validateLabel(e){label.validateLabel(this,e)}validateLevel(e){validation.watchHeadingLevel(this,e)}validateOn(e){this.validateOnValue(e)&&prop_validators.setState(this,"_on",{onClose:e.onClose})}validateType(e){prop_validators.watchValidator(this,"_type",(e=>"string"==typeof e&&alertTypeOptions.includes(e)),new Set(`String {${alertTypeOptions.join(", ")}`),e)}validateVariant(e){prop_validators.watchValidator(this,"_variant",(e=>"string"==typeof e&&alertVariantOptions.includes(e)),new Set(`AlertVariant {${alertVariantOptions.join(", ")}`),e)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateType(this._type),this.validateVariant(this._variant)}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}}};exports.kol_alert_wc=KolAlertWc;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-489d4e74.js"),i18n=require("./i18n-e623dc7e.js"),validation=require("./validation-ccf9173b.js"),componentNames=require("./component-names-e841018d.js"),dev_utils=require("./dev.utils-58fde089.js"),prop_validators=require("./prop.validators-37113ad1.js"),hasCloser=require("./has-closer-354720e1.js"),label=require("./label-5ba50d8b.js");require("./i18n-50cc2ee1.js"),require("./reuse-50a5792c.js"),require("./index-1285d2d1.js");const alertTypeOptions=["default","info","success","warning","error"],alertVariantOptions=["card","msg"],Icon=e=>index.h(componentNames.KolIconTag,{class:"heading-icon",_label:"string"==typeof e.label&&e.label.length>0?"":e.ariaLabel,_icons:e.icon}),AlertIcon=e=>{switch(e.type){case"error":return index.h(Icon,{ariaLabel:i18n.translate("kol-error"),icon:"codicon codicon-error",label:e.label});case"info":return index.h(Icon,{ariaLabel:i18n.translate("kol-info"),icon:"codicon codicon-info",label:e.label});case"warning":return index.h(Icon,{ariaLabel:i18n.translate("kol-warning"),icon:"codicon codicon-warning",label:e.label});case"success":return index.h(Icon,{ariaLabel:i18n.translate("kol-success"),icon:"codicon codicon-pass",label:e.label});default:return index.h(Icon,{ariaLabel:i18n.translate("kol-message"),icon:"codicon codicon-comment",label:e.label})}},KolAlertWc=class{constructor(e){index.registerInstance(this,e),this.close=()=>{var e;void 0!==(null===(e=this._on)||void 0===e?void 0:e.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose,this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){var e;if(this.state._alert){try{dev_utils.Log.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(e){dev_utils.Log.debug("Navigator does not support vibration.")}setTimeout((()=>{this.validateAlert(!1)}),1e4)}return index.h(index.Host,{key:"ecb2cd45b14f92cc1c337d2b81382a8cc820e869",class:{"kol-alert-wc":!0,alert:!0,[this.state._type]:!0,[this.state._variant]:!0,hasCloser:!!this.state._hasCloser},role:this.state._alert?"alert":void 0},index.h("div",{key:"b190de9f62c33d970daabc1b5638132da33c936e",class:"heading"},index.h(AlertIcon,{key:"e1da8b194a13ec6f9270efc2234caadcee77e827",label:this.state._label,type:this.state._type}),index.h("div",{key:"7ffd000cfbe218c582791e8646ff5caf9bad5b25",class:"heading-content"},"string"==typeof this.state._label&&(null===(e=this.state._label)||void 0===e?void 0:e.length)>0&&index.h(componentNames.KolHeadingWcTag,{key:"f9e7c598243a4868b80b248fdf4dfdeed5d24a2b",_label:this.state._label,_level:this.state._level}),"msg"===this.state._variant&&index.h("div",{key:"b5b70319b6c7747872e9d8072a1fe7565938f7c1",class:"content"},index.h("slot",{key:"b75edf24762d861147d5ee5fa0701b4c5a30eed1"}))),this.state._hasCloser&&index.h(componentNames.KolButtonWcTag,{key:"cd46afacd1afbc415e1184604b3b1ac9af901c97",class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:i18n.translate("kol-close-alert",{placeholders:{label:this.state._label}}),_on:this.on,_tooltipAlign:"left"})),"card"===this.state._variant&&index.h("div",{key:"2a9670974b00907497abd255e02194301df0c0a2",class:"content"},index.h("slot",{key:"9bd3de7e485b9865d5f74dfbce4f421d4b1dc9b5"})))}validateAlert(e){prop_validators.watchBoolean(this,"_alert",e)}validateHasCloser(e){hasCloser.validateHasCloser(this,e)}validateLabel(e){label.validateLabel(this,e)}validateLevel(e){validation.watchHeadingLevel(this,e)}validateOn(e){this.validateOnValue(e)&&prop_validators.setState(this,"_on",{onClose:e.onClose})}validateType(e){prop_validators.watchValidator(this,"_type",(e=>"string"==typeof e&&alertTypeOptions.includes(e)),new Set(`String {${alertTypeOptions.join(", ")}`),e)}validateVariant(e){prop_validators.watchValidator(this,"_variant",(e=>"string"==typeof e&&alertVariantOptions.includes(e)),new Set(`AlertVariant {${alertVariantOptions.join(", ")}`),e)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateType(this._type),this.validateVariant(this._variant)}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}}};exports.kol_alert_wc=KolAlertWc;

package/dist/cjs/kol-alert.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-2151744b.js"),componentNames=require("./component-names-e841018d.js"),defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid 1px;\n  }\n}",KolAlertDefaultStyle0=defaultStyleCss,KolAlert=class{constructor(n){index.registerInstance(this,n),this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){return index.h(index.Host,{key:"4f87a50275ed8a213086458ce239ab24148b4e95",class:"kol-alert"},index.h(componentNames.KolAlertWcTag,{key:"97764b041f739deb6fda2f01d31993131de5e6ab",_alert:this._alert,_hasCloser:this._hasCloser,_label:this._label,_level:this._level,_on:this._on,_type:this._type,_variant:this._variant},index.h("slot",{key:"3108fc83dd474231a55d3ffaf4bb8fae2ac7719d"})))}};KolAlert.style={default:KolAlertDefaultStyle0},exports.kol_alert=KolAlert;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-489d4e74.js"),componentNames=require("./component-names-e841018d.js"),defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid 1px;\n  }\n}",KolAlertDefaultStyle0=defaultStyleCss,KolAlert=class{constructor(n){index.registerInstance(this,n),this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){return index.h(index.Host,{key:"4f87a50275ed8a213086458ce239ab24148b4e95",class:"kol-alert"},index.h(componentNames.KolAlertWcTag,{key:"97764b041f739deb6fda2f01d31993131de5e6ab",_alert:this._alert,_hasCloser:this._hasCloser,_label:this._label,_level:this._level,_on:this._on,_type:this._type,_variant:this._variant},index.h("slot",{key:"3108fc83dd474231a55d3ffaf4bb8fae2ac7719d"})))}};KolAlert.style={default:KolAlertDefaultStyle0},exports.kol_alert=KolAlert;

package/dist/cjs/kol-avatar-wc.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-2151744b.js"),i18n=require("./i18n-2207af53.js"),imageSource=require("./image-source-d836d9d6.js"),label=require("./label-c3e352c8.js");require("./i18n-50cc2ee1.js"),require("./reuse-daa2baf3.js"),require("./prop.validators-476ef807.js"),require("./index-1285d2d1.js"),require("./dev.utils-3e595d38.js");const formatNameAsInitial=e=>0===e.length?"":e[0].toUpperCase(),formatLabelAsInitials=e=>{const a=e.split(/\s+/),t=a.at(0),i=a.at(-1);return a.length>=2&&t&&i?`${formatNameAsInitial(t)}${formatNameAsInitial(i)}`:formatNameAsInitial(e)},KolAvatarWc=class{constructor(e){index.registerInstance(this,e),this._src=void 0,this._label=void 0,this.state={_src:"",_label:""}}render(){return index.h(index.Host,{key:"672b71c600e54214bbaf86210fe439af3f187c83",class:"kol-avatar-wc"},index.h("div",{key:"8631bb174ac54c1677149d12979f6837dddd692d","aria-label":i18n.translate("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"container",role:"img"},this.state._src?index.h("img",{alt:"","aria-hidden":"true",class:"image",src:this.state._src}):index.h("span",{"aria-hidden":"true",class:"initials"},formatLabelAsInitials(this.state._label.trim()))))}validateSrc(e){imageSource.validateImageSource(this,e)}validateLabel(e){label.validateLabel(this,e,{required:!0})}componentWillLoad(){this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_src:["validateSrc"],_label:["validateLabel"]}}};exports.kol_avatar_wc=KolAvatarWc;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-489d4e74.js"),i18n=require("./i18n-e623dc7e.js"),imageSource=require("./image-source-7ee44fb4.js"),label=require("./label-5ba50d8b.js");require("./i18n-50cc2ee1.js"),require("./reuse-50a5792c.js"),require("./prop.validators-37113ad1.js"),require("./index-1285d2d1.js"),require("./dev.utils-58fde089.js");const formatNameAsInitial=e=>0===e.length?"":e[0].toUpperCase(),formatLabelAsInitials=e=>{const a=e.split(/\s+/),t=a.at(0),i=a.at(-1);return a.length>=2&&t&&i?`${formatNameAsInitial(t)}${formatNameAsInitial(i)}`:formatNameAsInitial(e)},KolAvatarWc=class{constructor(e){index.registerInstance(this,e),this._src=void 0,this._label=void 0,this.state={_src:"",_label:""}}render(){return index.h(index.Host,{key:"672b71c600e54214bbaf86210fe439af3f187c83",class:"kol-avatar-wc"},index.h("div",{key:"8631bb174ac54c1677149d12979f6837dddd692d","aria-label":i18n.translate("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"container",role:"img"},this.state._src?index.h("img",{alt:"","aria-hidden":"true",class:"image",src:this.state._src}):index.h("span",{"aria-hidden":"true",class:"initials"},formatLabelAsInitials(this.state._label.trim()))))}validateSrc(e){imageSource.validateImageSource(this,e)}validateLabel(e){label.validateLabel(this,e,{required:!0})}componentWillLoad(){this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_src:["validateSrc"],_label:["validateLabel"]}}};exports.kol_avatar_wc=KolAvatarWc;

package/dist/cjs/kol-avatar.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-2151744b.js"),componentNames=require("./component-names-e841018d.js"),defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .container {\n    border-radius: 50%;\n    overflow: hidden;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n    /*theme?*/\n    width: 100px;\n    height: 100px;\n  }\n  .image {\n    width: 100%;\n    height: 100%;\n  }\n  .initials {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /*theme?*/\n    background: #d3d3d3;\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolAvatarDefaultStyle0=defaultStyleCss,KolAvatar=class{constructor(n){index.registerInstance(this,n),this._src=void 0,this._label=void 0}render(){return index.h(index.Host,{key:"27dcef5bc7bcb3d600f33e1776e8c1e913ede9d8",class:"kol-avatar"},index.h(componentNames.KolAvatarWcTag,{key:"f8c1eb9c59ef3bbcbe704834ce4325284f8e6e8c",_src:this._src,_label:this._label}))}};KolAvatar.style={default:KolAvatarDefaultStyle0},exports.kol_avatar=KolAvatar;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-489d4e74.js"),componentNames=require("./component-names-e841018d.js"),defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .container {\n    border-radius: 50%;\n    overflow: hidden;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n    /*theme?*/\n    width: 100px;\n    height: 100px;\n  }\n  .image {\n    width: 100%;\n    height: 100%;\n  }\n  .initials {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /*theme?*/\n    background: #d3d3d3;\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolAvatarDefaultStyle0=defaultStyleCss,KolAvatar=class{constructor(n){index.registerInstance(this,n),this._src=void 0,this._label=void 0}render(){return index.h(index.Host,{key:"27dcef5bc7bcb3d600f33e1776e8c1e913ede9d8",class:"kol-avatar"},index.h(componentNames.KolAvatarWcTag,{key:"f8c1eb9c59ef3bbcbe704834ce4325284f8e6e8c",_src:this._src,_label:this._label}))}};KolAvatar.style={default:KolAvatarDefaultStyle0},exports.kol_avatar=KolAvatar;

package/dist/cjs/kol-badge.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-2151744b.js"),componentNames=require("./component-names-e841018d.js"),dev_utils=require("./dev.utils-761c7626.js"),color=require("./color-252ad7e8.js"),prop_validators=require("./prop.validators-476ef807.js");require("./reuse-daa2baf3.js"),require("./dev.utils-3e595d38.js"),require("./index-1285d2d1.js");const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  /* :host implicitly inherits font-size, e.g. for usage in headlines */\n  :host > span {\n    display: inline-flex;\n    place-items: center;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n  }\n  :host > span > .kol-button-wc button {\n    color: inherit;\n  }\n}",KolBadgeDefaultStyle0=defaultStyleCss;prop_validators.featureHint("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const KolBadge=class{constructor(n){index.registerInstance(this,n),this.bgColorStr="#000",this.colorStr="#fff",this.id=dev_utils.nonce(),this.handleColorChange=n=>{const e=color.handleColorChange(n);this.bgColorStr=e.backgroundColor,this.colorStr=e.foregroundColor},this._color="#000",this._icons=void 0,this._label=void 0,this._smartButton=void 0,this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"}}}renderSmartButton(n){return index.h(componentNames.KolButtonWcTag,{_ariaControls:this.id,_customClass:n._customClass,_disabled:n._disabled,_hideLabel:!0,_icons:n._icons,_id:n._id,_label:n._label,_on:n._on,_tooltipAlign:n._tooltipAlign,_variant:n._variant})}render(){const n="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return index.h(index.Host,{key:"0b334746c26463bbc697f08077e165e56b34a97f",class:"kol-badge"},index.h("span",{key:"83210f467b224cb691d844a0311f4a31a1ad6e79",class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},index.h(componentNames.KolSpanWcTag,{key:"d5a3248d67baa494d9671e0da7de918511af084b",id:n?this.id:void 0,_allowMarkdown:!0,_icons:this._icons,_label:this._label}),n&&this.renderSmartButton(this.state._smartButton)))}validateColor(n){color.validateColor(this,n,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(n){prop_validators.objectObjectHandler(n,(()=>{try{n=prop_validators.parseJson(n)}catch(n){}prop_validators.setState(this,"_smartButton",n)}))}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}};KolBadge.style={default:KolBadgeDefaultStyle0},exports.kol_badge=KolBadge;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-489d4e74.js"),componentNames=require("./component-names-e841018d.js"),dev_utils=require("./dev.utils-abeba982.js"),color=require("./color-e9f9368d.js"),prop_validators=require("./prop.validators-37113ad1.js");require("./reuse-50a5792c.js"),require("./dev.utils-58fde089.js"),require("./index-1285d2d1.js");const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  /* :host implicitly inherits font-size, e.g. for usage in headlines */\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span {\n    display: inline-flex;\n    place-items: center;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n  }\n  :host > span > .kol-button-wc button {\n    color: inherit;\n  }\n}",KolBadgeDefaultStyle0=defaultStyleCss;prop_validators.featureHint("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const KolBadge=class{constructor(n){index.registerInstance(this,n),this.bgColorStr="#000",this.colorStr="#fff",this.id=dev_utils.nonce(),this.handleColorChange=n=>{const e=color.handleColorChange(n);this.bgColorStr=e.backgroundColor,this.colorStr=e.foregroundColor},this._color="#000",this._icons=void 0,this._label=void 0,this._smartButton=void 0,this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"}}}renderSmartButton(n){return index.h(componentNames.KolButtonWcTag,{_ariaControls:this.id,_customClass:n._customClass,_disabled:n._disabled,_hideLabel:!0,_icons:n._icons,_id:n._id,_label:n._label,_on:n._on,_tooltipAlign:n._tooltipAlign,_variant:n._variant})}render(){const n="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return index.h(index.Host,{key:"0b334746c26463bbc697f08077e165e56b34a97f",class:"kol-badge"},index.h("span",{key:"83210f467b224cb691d844a0311f4a31a1ad6e79",class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},index.h(componentNames.KolSpanWcTag,{key:"d5a3248d67baa494d9671e0da7de918511af084b",id:n?this.id:void 0,_allowMarkdown:!0,_icons:this._icons,_label:this._label}),n&&this.renderSmartButton(this.state._smartButton)))}validateColor(n){color.validateColor(this,n,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(n){prop_validators.objectObjectHandler(n,(()=>{try{n=prop_validators.parseJson(n)}catch(n){}prop_validators.setState(this,"_smartButton",n)}))}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}};KolBadge.style={default:KolBadgeDefaultStyle0},exports.kol_badge=KolBadge;

package/dist/cjs/kol-badge.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"kol-badge.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,gyIAAgyI,CAAC;AACzzI,8BAAe,eAAe;;ACQ9BA,2BAAW,CAAC,qEAAqE,CAAC,CAAC;MAStE,QAAQ;;;QACZ,eAAU,GAAG,MAAM,CAAC;QACpB,aAAQ,GAAG,MAAM,CAAC;QACT,OAAE,GAAGC,eAAK,EAAE,CAAC;QAkEtB,sBAAiB,GAAG,CAAC,KAAc;YAC1C,MAAM,SAAS,GAAGC,uBAAiB,CAAC,KAAK,CAAC,CAAC;YAC3C,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC,eAAe,CAAC;YAC5C,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,eAAyB,CAAC;SACpD,CAAC;sBA5B+C,MAAM;;;;qBAiBlB;YACpC,MAAM,EAAE;gBACP,eAAe,EAAE,MAAM;gBACvB,eAAe,EAAE,MAAM;aACvB;SACD;;IA9DO,iBAAiB,CAAC,KAAkB;QAC3C,QACCC,QAACC,6BAAc,IACd,aAAa,EAAE,IAAI,CAAC,EAAE,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GACP,EACjB;KACF;IAEM,MAAM;QACZ,MAAM,cAAc,GAAG,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;QACvG,QACCD,QAACE,UAAI,qDAAC,KAAK,EAAC,WAAW,IACtBF,mEACC,KAAK,EAAE;gBACN,cAAc,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,IAAI;aAC/F,EACD,KAAK,EAAE;gBACN,eAAe,EAAE,IAAI,CAAC,UAAU;gBAChC,KAAK,EAAE,IAAI,CAAC,QAAQ;aACpB,IAEDA,QAACG,2BAAY,qDAAC,EAAE,EAAE,cAAc,GAAG,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,cAAc,QAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAiB,EAC/H,cAAc,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,YAA2B,CAAC,CAC3E,CACD,EACN;KACF;IAoCM,aAAa,CAAC,KAA8B;QAClDC,mBAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,YAAY,EAAE,MAAM;YACpB,KAAK,EAAE;gBACN,WAAW,EAAE,IAAI,CAAC,iBAAiB;aACnC;SACD,CAAC,CAAC;KACH;IAGM,mBAAmB,CAAC,KAA4B;QACtDC,mCAAmB,CAAC,KAAK,EAAE;YAC1B,IAAI;gBACH,KAAK,GAAGC,yBAAS,CAAc,KAAe,CAAC,CAAC;aAEhD;YAAC,OAAO,CAAC,EAAE;aAEX;YACDC,wBAAQ,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;SACtC,CAAC,CAAC;KACH;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAC5C;;;;;;;;;;;;","names":["featureHint","nonce","handleColorChange","h","KolButtonWcTag","Host","KolSpanWcTag","validateColor","objectObjectHandler","parseJson","setState"],"sources":["src/components/badge/style.scss?tag=kol-badge&mode=default&encapsulation=shadow","src/components/badge/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t/* :host implicitly inherits font-size, e.g. for usage in headlines */\n\n\t:host > span {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\t/* Visible with forced colors  */\n\t\toutline: transparent solid 1px;\n\t}\n\n\t:host > span > .kol-button-wc button {\n\t\tcolor: inherit;\n\t}\n}\n","import type { BadgeAPI, BadgeStates, ButtonProps, KoliBriIconsProp, LabelPropType, PropColor, Stringified } from '../../schema';\nimport { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { KolSpanWcTag } from '../../core/component-names';\n\nimport { nonce } from '../../utils/dev.utils';\n\nimport type { JSX } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements BadgeAPI {\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\tprivate readonly id = nonce();\n\n\tprivate renderSmartButton(props: ButtonProps): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\t_ariaControls={this.id}\n\t\t\t\t_customClass={props._customClass}\n\t\t\t\t_disabled={props._disabled}\n\t\t\t\t_hideLabel={true}\n\t\t\t\t_icons={props._icons}\n\t\t\t\t_id={props._id}\n\t\t\t\t_label={props._label}\n\t\t\t\t_on={props._on}\n\t\t\t\t_tooltipAlign={props._tooltipAlign}\n\t\t\t\t_variant={props._variant}\n\t\t\t></KolButtonWcTag>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;\n\t\treturn (\n\t\t\t<Host class=\"kol-badge\">\n\t\t\t\t<span\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<KolSpanWcTag id={hasSmartButton ? this.id : undefined} _allowMarkdown _icons={this._icons} _label={this._label}></KolSpanWcTag>\n\t\t\t\t\t{hasSmartButton && this.renderSmartButton(this.state._smartButton as ButtonProps)}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the backgroundColor and foregroundColor.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#000';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t@State() public state: BadgeStates = {\n\t\t_color: {\n\t\t\tbackgroundColor: '#000',\n\t\t\tforegroundColor: '#fff',\n\t\t},\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tconst colorPair = handleColorChange(value);\n\t\tthis.bgColorStr = colorPair.backgroundColor;\n\t\tthis.colorStr = colorPair.foregroundColor as string;\n\t};\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#000',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ButtonProps>(value as string);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"],"version":3}
+{"file":"kol-badge.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,i3IAAi3I,CAAC;AAC14I,8BAAe,eAAe;;ACQ9BA,2BAAW,CAAC,qEAAqE,CAAC,CAAC;MAStE,QAAQ;;;QACZ,eAAU,GAAG,MAAM,CAAC;QACpB,aAAQ,GAAG,MAAM,CAAC;QACT,OAAE,GAAGC,eAAK,EAAE,CAAC;QAkEtB,sBAAiB,GAAG,CAAC,KAAc;YAC1C,MAAM,SAAS,GAAGC,uBAAiB,CAAC,KAAK,CAAC,CAAC;YAC3C,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC,eAAe,CAAC;YAC5C,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,eAAyB,CAAC;SACpD,CAAC;sBA5B+C,MAAM;;;;qBAiBlB;YACpC,MAAM,EAAE;gBACP,eAAe,EAAE,MAAM;gBACvB,eAAe,EAAE,MAAM;aACvB;SACD;;IA9DO,iBAAiB,CAAC,KAAkB;QAC3C,QACCC,QAACC,6BAAc,IACd,aAAa,EAAE,IAAI,CAAC,EAAE,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GACP,EACjB;KACF;IAEM,MAAM;QACZ,MAAM,cAAc,GAAG,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;QACvG,QACCD,QAACE,UAAI,qDAAC,KAAK,EAAC,WAAW,IACtBF,mEACC,KAAK,EAAE;gBACN,cAAc,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,IAAI;aAC/F,EACD,KAAK,EAAE;gBACN,eAAe,EAAE,IAAI,CAAC,UAAU;gBAChC,KAAK,EAAE,IAAI,CAAC,QAAQ;aACpB,IAEDA,QAACG,2BAAY,qDAAC,EAAE,EAAE,cAAc,GAAG,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,cAAc,QAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAiB,EAC/H,cAAc,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,YAA2B,CAAC,CAC3E,CACD,EACN;KACF;IAoCM,aAAa,CAAC,KAA8B;QAClDC,mBAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,YAAY,EAAE,MAAM;YACpB,KAAK,EAAE;gBACN,WAAW,EAAE,IAAI,CAAC,iBAAiB;aACnC;SACD,CAAC,CAAC;KACH;IAGM,mBAAmB,CAAC,KAA4B;QACtDC,mCAAmB,CAAC,KAAK,EAAE;YAC1B,IAAI;gBACH,KAAK,GAAGC,yBAAS,CAAc,KAAe,CAAC,CAAC;aAEhD;YAAC,OAAO,CAAC,EAAE;aAEX;YACDC,wBAAQ,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;SACtC,CAAC,CAAC;KACH;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAC5C;;;;;;;;;;;;","names":["featureHint","nonce","handleColorChange","h","KolButtonWcTag","Host","KolSpanWcTag","validateColor","objectObjectHandler","parseJson","setState"],"sources":["src/components/badge/style.scss?tag=kol-badge&mode=default&encapsulation=shadow","src/components/badge/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t/* :host implicitly inherits font-size, e.g. for usage in headlines */\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t:host > span {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\t/* Visible with forced colors  */\n\t\toutline: transparent solid 1px;\n\t}\n\n\t:host > span > .kol-button-wc button {\n\t\tcolor: inherit;\n\t}\n}\n","import type { BadgeAPI, BadgeStates, ButtonProps, KoliBriIconsProp, LabelPropType, PropColor, Stringified } from '../../schema';\nimport { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { KolSpanWcTag } from '../../core/component-names';\n\nimport { nonce } from '../../utils/dev.utils';\n\nimport type { JSX } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements BadgeAPI {\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\tprivate readonly id = nonce();\n\n\tprivate renderSmartButton(props: ButtonProps): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\t_ariaControls={this.id}\n\t\t\t\t_customClass={props._customClass}\n\t\t\t\t_disabled={props._disabled}\n\t\t\t\t_hideLabel={true}\n\t\t\t\t_icons={props._icons}\n\t\t\t\t_id={props._id}\n\t\t\t\t_label={props._label}\n\t\t\t\t_on={props._on}\n\t\t\t\t_tooltipAlign={props._tooltipAlign}\n\t\t\t\t_variant={props._variant}\n\t\t\t></KolButtonWcTag>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;\n\t\treturn (\n\t\t\t<Host class=\"kol-badge\">\n\t\t\t\t<span\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<KolSpanWcTag id={hasSmartButton ? this.id : undefined} _allowMarkdown _icons={this._icons} _label={this._label}></KolSpanWcTag>\n\t\t\t\t\t{hasSmartButton && this.renderSmartButton(this.state._smartButton as ButtonProps)}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the backgroundColor and foregroundColor.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#000';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t@State() public state: BadgeStates = {\n\t\t_color: {\n\t\t\tbackgroundColor: '#000',\n\t\t\tforegroundColor: '#fff',\n\t\t},\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tconst colorPair = handleColorChange(value);\n\t\tthis.bgColorStr = colorPair.backgroundColor;\n\t\tthis.colorStr = colorPair.foregroundColor as string;\n\t};\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#000',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ButtonProps>(value as string);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"],"version":3}

package/dist/cjs/kol-breadcrumb.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-2151744b.js"),uniqueNavLabels=require("./unique-nav-labels-e8b42978.js"),validation=require("./validation-dbc5028a.js"),componentNames=require("./component-names-e841018d.js"),prop_validators=require("./prop.validators-476ef807.js"),label=require("./label-c3e352c8.js");require("./dev.utils-3e595d38.js"),require("./index-1285d2d1.js");const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  li,\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n  }\n  .kol-icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  .kol-icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}",KolBreadcrumbDefaultStyle0=defaultStyleCss,KolBreadcrumb=class{constructor(e){index.registerInstance(this,e),this.renderLink=(e,n)=>{const t=this.state._links.length-1;return index.h("li",{key:n},0!==n&&index.h(componentNames.KolIconTag,{_label:"",_icons:"codicon codicon-chevron-right"}),n===t?index.h("span",null,e._hideLabel?index.h(componentNames.KolIconTag,{_label:e._label,_icons:"string"==typeof e._icons?e._icons:"codicon codicon-symbol-event"}):index.h(index.Fragment,null,e._label)):index.h(componentNames.KolLinkTag,Object.assign({},e)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return index.h(index.Host,{key:"1cfa36fa9a381d7b470854ec4a550b54817e37d6",class:"kol-breadcrumb"},index.h("nav",{key:"d913f0b8853e65302801b62abb9ee1a7911ba264","aria-label":this.state._label},index.h("ul",{key:"9719d99bcfedb925e819b0abf14977692fdabc76"},0===this.state._links.length&&index.h("li",{key:"1681efdfcdb0eb6d31fe0baf14efa89208ef04e9"},index.h(componentNames.KolIconTag,{key:"21f1969a164aaa85d48a8e985e2e788be10a5135",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(e,n,t=!1){t||uniqueNavLabels.removeNavLabel(this.state._label),label.validateLabel(this,e,{required:!0}),prop_validators.a11yHintLabelingLandmarks(e),uniqueNavLabels.addNavLabel(this.state._label)}validateLinks(e){validation.watchNavLinks("KolBreadcrumb",this,e)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){uniqueNavLabels.removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};KolBreadcrumb.style={default:KolBreadcrumbDefaultStyle0},exports.kol_breadcrumb=KolBreadcrumb;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-489d4e74.js"),uniqueNavLabels=require("./unique-nav-labels-b12ecac7.js"),validation=require("./validation-c5bb8a53.js"),componentNames=require("./component-names-e841018d.js"),prop_validators=require("./prop.validators-37113ad1.js"),label=require("./label-5ba50d8b.js");require("./dev.utils-58fde089.js"),require("./index-1285d2d1.js");const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  li,\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n  }\n  .kol-icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  .kol-icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}",KolBreadcrumbDefaultStyle0=defaultStyleCss,KolBreadcrumb=class{constructor(n){index.registerInstance(this,n),this.renderLink=(n,e)=>{const t=this.state._links.length-1;return index.h("li",{key:e},0!==e&&index.h(componentNames.KolIconTag,{_label:"",_icons:"codicon codicon-chevron-right"}),e===t?index.h("span",null,n._hideLabel?index.h(componentNames.KolIconTag,{_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):index.h(index.Fragment,null,n._label)):index.h(componentNames.KolLinkTag,Object.assign({},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return index.h(index.Host,{key:"1cfa36fa9a381d7b470854ec4a550b54817e37d6",class:"kol-breadcrumb"},index.h("nav",{key:"d913f0b8853e65302801b62abb9ee1a7911ba264","aria-label":this.state._label},index.h("ul",{key:"9719d99bcfedb925e819b0abf14977692fdabc76"},0===this.state._links.length&&index.h("li",{key:"1681efdfcdb0eb6d31fe0baf14efa89208ef04e9"},index.h(componentNames.KolIconTag,{key:"21f1969a164aaa85d48a8e985e2e788be10a5135",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(n,e,t=!1){t||uniqueNavLabels.removeNavLabel(this.state._label),label.validateLabel(this,n,{required:!0}),prop_validators.a11yHintLabelingLandmarks(n),uniqueNavLabels.addNavLabel(this.state._label)}validateLinks(n){validation.watchNavLinks("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){uniqueNavLabels.removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};KolBreadcrumb.style={default:KolBreadcrumbDefaultStyle0},exports.kol_breadcrumb=KolBreadcrumb;

package/dist/cjs/kol-button-group-wc.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-2151744b.js"),KolButtonGroupWc=class{constructor(e){index.registerInstance(this,e),this.state={}}render(){return index.h(index.Host,{key:"d70d07aee8bf780d21f93ad48d5549e65e889f02",class:"kol-button-group-wc"},index.h("slot",{key:"3dfb84fee69b23211aab06b29d28690cdebe5ffc"}))}};exports.kol_button_group_wc=KolButtonGroupWc;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-489d4e74.js"),KolButtonGroupWc=class{constructor(e){index.registerInstance(this,e),this.state={}}render(){return index.h(index.Host,{key:"d70d07aee8bf780d21f93ad48d5549e65e889f02",class:"kol-button-group-wc"},index.h("slot",{key:"3dfb84fee69b23211aab06b29d28690cdebe5ffc"}))}};exports.kol_button_group_wc=KolButtonGroupWc;

package/dist/cjs/kol-button-group.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-2151744b.js"),componentNames=require("./component-names-e841018d.js"),defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > .kol-button-group-wc {\n    display: flex;\n    flex-wrap: wrap;\n  }\n}",KolButtonGroupDefaultStyle0=defaultStyleCss,KolButtonGroup=class{constructor(n){index.registerInstance(this,n)}render(){return index.h(index.Host,{key:"e53bb9644f55447a8d34607dcf23cd22afba7cc3",class:"kol-button-group"},index.h(componentNames.KolButtonGroupWcTag,{key:"b4ddb170e6b597a461a4106d2903ecedc9741e6d"},index.h("slot",{key:"c0297ef635d4a7b87e8c4ab5f2a9e5235eb059ca"})))}};KolButtonGroup.style={default:KolButtonGroupDefaultStyle0},exports.kol_button_group=KolButtonGroup;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-489d4e74.js"),componentNames=require("./component-names-e841018d.js"),defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > .kol-button-group-wc {\n    display: flex;\n    flex-wrap: wrap;\n  }\n}",KolButtonGroupDefaultStyle0=defaultStyleCss,KolButtonGroup=class{constructor(n){index.registerInstance(this,n)}render(){return index.h(index.Host,{key:"e53bb9644f55447a8d34607dcf23cd22afba7cc3",class:"kol-button-group"},index.h(componentNames.KolButtonGroupWcTag,{key:"b4ddb170e6b597a461a4106d2903ecedc9741e6d"},index.h("slot",{key:"c0297ef635d4a7b87e8c4ab5f2a9e5235eb059ca"})))}};KolButtonGroup.style={default:KolButtonGroupDefaultStyle0},exports.kol_button_group=KolButtonGroup;

package/dist/cjs/kol-button-link.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-2151744b.js"),componentNames=require("./component-names-e841018d.js"),defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :is(a, button) {\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  :is(a, button) .kol-span-wc .span-label {\n    text-decoration-line: underline;\n  }\n  a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n  button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n    text-decoration-thickness: 0.2em;\n  }\n  .skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1em;\n  }\n  .skip:focus {\n    background-color: #fff;\n    left: unset;\n    padding: 1em;\n    position: unset;\n  }\n  .kol-icon.external-link-icon {\n    display: inline-flex;\n  }\n}",KolButtonLinkDefaultStyle0=defaultStyleCss,KolButtonLink=class{constructor(n){index.registerInstance(this,n),this.catchRef=n=>{this.buttonWcRef=n},this._accessKey=void 0,this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}async getValue(){return this._value}async focus(){await this.kolFocus()}async kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){return index.h(index.Host,{key:"925b960759838064aebb5519d338b0833f4c9b24",class:"kol-button-link"},index.h(componentNames.KolButtonWcTag,{key:"2eb980bbb032ad55772f90bdfba9f94d2f8d1b73",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:"link",_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},index.h("slot",{key:"52a25c7c8be71f8286313851b3ecdaa404814557",name:"expert",slot:"expert"})))}};KolButtonLink.style={default:KolButtonLinkDefaultStyle0},exports.kol_button_link=KolButtonLink;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-489d4e74.js"),componentNames=require("./component-names-e841018d.js"),defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :is(a, button) {\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  :is(a, button) .kol-span-wc .span-label {\n    text-decoration-line: underline;\n  }\n  a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n  button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n    text-decoration-thickness: 0.2em;\n  }\n  .skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1em;\n  }\n  .skip:focus {\n    background-color: #fff;\n    left: unset;\n    padding: 1em;\n    position: unset;\n  }\n  .kol-icon.external-link-icon {\n    display: inline-flex;\n  }\n}",KolButtonLinkDefaultStyle0=defaultStyleCss,KolButtonLink=class{constructor(n){index.registerInstance(this,n),this.catchRef=n=>{this.buttonWcRef=n},this._accessKey=void 0,this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}async getValue(){return this._value}async focus(){await this.kolFocus()}async kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){return index.h(index.Host,{key:"925b960759838064aebb5519d338b0833f4c9b24",class:"kol-button-link"},index.h(componentNames.KolButtonWcTag,{key:"2eb980bbb032ad55772f90bdfba9f94d2f8d1b73",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:"link",_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},index.h("slot",{key:"52a25c7c8be71f8286313851b3ecdaa404814557",name:"expert",slot:"expert"})))}};KolButtonLink.style={default:KolButtonLinkDefaultStyle0},exports.kol_button_link=KolButtonLink;

package/dist/cjs/kol-button-wc.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-2151744b.js"),events=require("./events-221fcb43.js"),controller=require("./controller-900785e0.js"),associated_controller=require("./associated.controller-1a15290a.js"),componentNames=require("./component-names-e841018d.js"),prop_validators=require("./prop.validators-476ef807.js"),accessKey=require("./access-key-651fa517.js"),ariaExpanded=require("./aria-expanded-42fcd7e7.js"),icons=require("./icons-30925600.js"),reuse=require("./reuse-daa2baf3.js"),customClass=require("./custom-class-70eaa1d7.js"),disabled=require("./disabled-c6505268.js"),hideLabel=require("./hide-label-c2417fe3.js"),label=require("./label-c3e352c8.js"),tabIndex=require("./tab-index-a2eea6a0.js"),tooltipAlign=require("./tooltip-align-ddef1b9d.js");require("./dev.utils-3e595d38.js"),require("./index-1285d2d1.js"),require("./align-e658dfb3.js");const validateAriaControls=(t,e)=>{prop_validators.watchString(t,"_ariaControls",e)},validateAriaSelected=(t,e)=>{prop_validators.watchBoolean(t,"_ariaSelected",e)},validateButtonCallbacks=(t,e)=>{prop_validators.watchValidator(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),e)},buttonTypePropTypeOptions=["button","reset","submit"],validateButtonType=(t,e)=>{prop_validators.watchValidator(t,"_type",(t=>"string"==typeof t&&buttonTypePropTypeOptions.includes(t)),new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(", ")}`]),e)},buttonVariantPropTypeOptions=["primary","secondary","normal","tertiary","danger","ghost","custom"],validateButtonVariant=(t,e)=>{prop_validators.watchValidator(t,"_variant",(t=>"string"==typeof t&&buttonVariantPropTypeOptions.includes(t)),new Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(", ")}`]),e,{defaultValue:"normal"})},KolButtonWc=class{async kolFocus(){var t;null===(t=this.buttonRef)||void 0===t||t.focus()}render(){const t=reuse.showExpertSlot(this.state._label);return index.h(index.Host,{key:"72f9865e9a27e0f31ff94af66f69ab31adc22dd9",class:"kol-button-wc"},index.h("button",Object.assign({key:"88b2d8ed077934acfb1707a7e0c71fc9af4789e1",ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-expanded":prop_validators.mapBoolean2String(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":prop_validators.mapStringOrBoolean2String(this.state._ariaSelected),class:{button:!0,disabled:!0===this.state._disabled,[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"hide-label":!0===this.state._hideLabel},disabled:this.state._disabled,id:this.state._id,name:this.state._name},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),index.h(componentNames.KolSpanWcTag,{key:"425a6e12a5197db406790410cf382bdf6f3df274",class:"button-inner",_accessKey:this.state._accessKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:t?"":this.state._label},index.h("slot",{key:"a70bb86e9824393e81aaddd59fa1fe6f0ef180e3",name:"expert",slot:"expert"}))),index.h(componentNames.KolTooltipWcTag,{key:"6f8bc766511dd57a8b9189b1b083e12f43262a32","aria-hidden":"true",hidden:t||!this.state._hideLabel,_accessKey:this._accessKey,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))}constructor(t){index.registerInstance(this,t),this.catchRef=t=>{this.buttonRef=t},this.onClick=t=>{var e,a;"submit"===this.state._type?controller.propagateSubmitEventToForm({form:this.host,ref:this.buttonRef}):"reset"===this.state._type?controller.propagateResetEventToForm({form:this.host,ref:this.buttonRef}):(events.stopPropagation(t),events.tryToDispatchKoliBriEvent("click",this.host,this.state._value),this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)&&(prop_validators.setEventTarget(t,this.buttonRef),null===(a=this.state._on)||void 0===a||a.onClick(t,this.state._value)))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icons:{},_label:"",_on:{},_type:"button",_variant:"normal"},this.controller=new associated_controller.AssociatedInputController(this,"button",this.host)}validateAccessKey(t){accessKey.validateAccessKey(this,t)}validateAriaControls(t){validateAriaControls(this,t)}validateAriaExpanded(t){ariaExpanded.validateAriaExpanded(this,t)}validateAriaSelected(t){validateAriaSelected(this,t)}validateCustomClass(t){customClass.validateCustomClass(this,t)}validateDisabled(t){disabled.validateDisabled(this,t)}validateHideLabel(t){hideLabel.validateHideLabel(this,t)}validateIcons(t){icons.validateIcons(this,t)}validateId(t){prop_validators.watchString(this,"_id",t)}validateLabel(t){label.validateLabelWithExpertSlot(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){validateButtonCallbacks(this,t)}validateRole(t){ariaExpanded.validateAlternativeButtonLinkRole(this,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){tabIndex.validateTabIndex(this,t)}validateTooltipAlign(t){tooltipAlign.validateTooltipAlign(this,t)}validateType(t){validateButtonType(this,t)}validateValue(t){prop_validators.setState(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){validateButtonVariant(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel),this.validateIcons(this._icons),this.validateId(this._id),this.validateLabel(this._label),this.validateName(this._name),this.validateOn(this._on),this.validateRole(this._role),this.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};exports.kol_button_wc=KolButtonWc;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-489d4e74.js"),events=require("./events-221fcb43.js"),controller=require("./controller-c859dca1.js"),associated_controller=require("./associated.controller-98098f66.js"),componentNames=require("./component-names-e841018d.js"),prop_validators=require("./prop.validators-37113ad1.js"),accessKey=require("./access-key-12589f9b.js"),ariaExpanded=require("./aria-expanded-8331b8d6.js"),icons=require("./icons-3f3e0089.js"),reuse=require("./reuse-50a5792c.js"),customClass=require("./custom-class-5a76b8cc.js"),disabled=require("./disabled-4f7a7b7e.js"),hideLabel=require("./hide-label-7e4f3ef4.js"),label=require("./label-5ba50d8b.js"),tabIndex=require("./tab-index-621163bf.js"),tooltipAlign=require("./tooltip-align-18f90f3f.js");require("./dev.utils-58fde089.js"),require("./index-1285d2d1.js"),require("./common-1ab929ac.js"),require("./align-cf181773.js");const validateAriaControls=(t,e)=>{prop_validators.watchString(t,"_ariaControls",e)},validateAriaSelected=(t,e)=>{prop_validators.watchBoolean(t,"_ariaSelected",e)},validateButtonCallbacks=(t,e)=>{prop_validators.watchValidator(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),e)},buttonTypePropTypeOptions=["button","reset","submit"],validateButtonType=(t,e)=>{prop_validators.watchValidator(t,"_type",(t=>"string"==typeof t&&buttonTypePropTypeOptions.includes(t)),new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(", ")}`]),e)},buttonVariantPropTypeOptions=["primary","secondary","normal","tertiary","danger","ghost","custom"],validateButtonVariant=(t,e)=>{prop_validators.watchValidator(t,"_variant",(t=>"string"==typeof t&&buttonVariantPropTypeOptions.includes(t)),new Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(", ")}`]),e,{defaultValue:"normal"})},KolButtonWc=class{async kolFocus(){var t;null===(t=this.buttonRef)||void 0===t||t.focus()}render(){const t=reuse.showExpertSlot(this.state._label);return index.h(index.Host,{key:"72f9865e9a27e0f31ff94af66f69ab31adc22dd9",class:"kol-button-wc"},index.h("button",Object.assign({key:"88b2d8ed077934acfb1707a7e0c71fc9af4789e1",ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-expanded":prop_validators.mapBoolean2String(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":prop_validators.mapStringOrBoolean2String(this.state._ariaSelected),class:{button:!0,disabled:!0===this.state._disabled,[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"hide-label":!0===this.state._hideLabel},disabled:this.state._disabled,id:this.state._id,name:this.state._name},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),index.h(componentNames.KolSpanWcTag,{key:"425a6e12a5197db406790410cf382bdf6f3df274",class:"button-inner",_accessKey:this.state._accessKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:t?"":this.state._label},index.h("slot",{key:"a70bb86e9824393e81aaddd59fa1fe6f0ef180e3",name:"expert",slot:"expert"}))),index.h(componentNames.KolTooltipWcTag,{key:"6f8bc766511dd57a8b9189b1b083e12f43262a32","aria-hidden":"true",hidden:t||!this.state._hideLabel,_accessKey:this._accessKey,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))}constructor(t){index.registerInstance(this,t),this.catchRef=t=>{this.buttonRef=t},this.onClick=t=>{var e,a;"submit"===this.state._type?controller.propagateSubmitEventToForm({form:this.host,ref:this.buttonRef}):"reset"===this.state._type?controller.propagateResetEventToForm({form:this.host,ref:this.buttonRef}):(events.stopPropagation(t),events.tryToDispatchKoliBriEvent("click",this.host,this.state._value),this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)&&(prop_validators.setEventTarget(t,this.buttonRef),null===(a=this.state._on)||void 0===a||a.onClick(t,this.state._value)))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icons:{},_label:"",_on:{},_type:"button",_variant:"normal"},this.controller=new associated_controller.AssociatedInputController(this,"button",this.host)}validateAccessKey(t){accessKey.validateAccessKey(this,t)}validateAriaControls(t){validateAriaControls(this,t)}validateAriaExpanded(t){ariaExpanded.validateAriaExpanded(this,t)}validateAriaSelected(t){validateAriaSelected(this,t)}validateCustomClass(t){customClass.validateCustomClass(this,t)}validateDisabled(t){disabled.validateDisabled(this,t)}validateHideLabel(t){hideLabel.validateHideLabel(this,t)}validateIcons(t){icons.validateIcons(this,t)}validateId(t){prop_validators.watchString(this,"_id",t)}validateLabel(t){label.validateLabelWithExpertSlot(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){validateButtonCallbacks(this,t)}validateRole(t){ariaExpanded.validateAlternativeButtonLinkRole(this,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){tabIndex.validateTabIndex(this,t)}validateTooltipAlign(t){tooltipAlign.validateTooltipAlign(this,t)}validateType(t){validateButtonType(this,t)}validateValue(t){prop_validators.setState(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){validateButtonVariant(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel),this.validateIcons(this._icons),this.validateId(this._id),this.validateLabel(this._label),this.validateName(this._name),this.validateOn(this._on),this.validateRole(this._role),this.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};exports.kol_button_wc=KolButtonWc;