@public-ui/components 2.1.2 → 2.1.3

package/dist/kolibri/i18n-66b52d13.js

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+const e={error:"Fehler",warning:"Warnung",info:"Hinweis",success:"Erfolg",message:"Nachricht",close:"Schließen","form-description":"Formular-Felder, die mit einem Sternchen (*) gekennzeichnet sind, sind Pflichtangaben.",of:"von",characters:"Zeichen",new:"Neu","no-entries":"Es sind keine Einträge vorhanden.","change-order":"Sortierung von {{colLabel}} ändern","action-running":"Aktion wird ausgeführt...","action-done":"Aktion abgeschlossen",pagination:"Paginierung","page-first":"Direkt zur ersten Seite","page-back":"Eine Seite zurück","page-next":"Eine Seite weiter","page-last":"Direkt zur letzten Seite","entries-per-site":"Einträge pro Seite",page:"Seite","page-current":"Seite {{page}}","page-selected":"Seite {{page}} ist ausgewählt","page-per-site":"{{entries}} Einträge pro Seite","nav-maximize":"Navigation maximieren","nav-minimize":"Navigation minimieren","logo-description":"Logo {{orgShort}}. Bundesadler mit Flaggenstab und Schriftzug {{orgLong}}","open-link-in-tab":"Öffnet in neuem Tab.","kolibri-logo":"Logo von KoliBri","table-pagination-label":"Paginierung für die Tabelle {{label}}","avatar-alt":"Avatar von {{name}}","split-button-dropdown-label-open":"Optionen anzeigen","split-button-dropdown-label-close":"Optionen schließen","toast-close-all":"Alle schließen","error-list":"Fehlerliste","error-list-message":"Bitte korrigieren Sie folgende Fehler:",version:"Versionsnummer","table-visible-range":"Einträge {{start}} bis {{end}} von {{total}}",dropdown:"Auswahlliste","nav-label-open":"Untermenü zu {{label}} öffnen","nav-label-close":"Untermenü zu {{label}} schließen","close-alert":"Benachrichtigung {{label}} schließen","show-password":"einblenden","hide-password":"ausblenden"},n={error:"Error",warning:"Warning",info:"Note",success:"Success",message:"Message",close:"Close","form-description":"Form fields marked with an asterisk (*) are mandatory.",of:"of",characters:"characters",new:"New","no-entries":"No entries available.","change-order":"Change order of {{colLabel}}","action-running":"Action is running...","action-done":"Action done",pagination:"Pagination","page-first":"Directly to the first page","page-back":"One page back","page-next":"One page further","page-last":"Directly to the last page","entries-per-site":"Entries per page",page:"Page","page-current":"Page {{page}}","page-selected":"Page {{page}} is selected","page-per-site":"{{entries}} entries per page","nav-maximize":"Maximize navigation","nav-minimize":"Minimize navigation","logo-description":"Logo {{orgShort}}. Federal eagle with flag staff and lettering {{orgLong}}","open-link-in-tab":"Opens in new tab.","kolibri-logo":"KoliBri logo","table-pagination-label":"Pagination for table {{label}}","avatar-alt":"Avatar of {{name}}","split-button-dropdown-label-open":"Show options","split-button-dropdown-label-close":"Hide options","toast-close-all":"Close all","error-list":"Error list","error-list-message":"Please correct the following errors",version:"Version number","table-visible-range":"Entries {{start}} to {{end}} of {{total}}",dropdown:"Dropdown","nav-label-open":"Submenu for {{label}} open","nav-label-close":"Submenu for {{label}} close","close-alert":"Notification {{label}} close","show-password":"Show","hide-password":"Hide"},i=e=>Object.keys(e).reduce(((n,a)=>(n[`kol-${a}`]=e[a],n)),{}),t=new Set([e=>e("en",i(n)),n=>n("de",i(e))]),a=function(e,n,a){return e.split(n).join(a)};class o{constructor(e){this.resourceMap=new Map,this.language=null!=e?e:"de"}addTranslations(e){Array.isArray(e)?e=new Set(e):"function"==typeof e&&(e=new Set([e])),void 0!==e&&e.forEach((e=>e(((e,n)=>{let a=this.resourceMap.get(e);return a||(a=new Map,this.resourceMap.set(e,a)),Object.entries(n).forEach((([e,n])=>{n&&a.set(e,n)})),e}))))}setLanguage(e){this.language=e}translate(e,n){var i;let r=null===(i=this.resourceMap.get(this.language))||void 0===i?void 0:i.get(e);return r?(null==n?void 0:n.placeholders)&&Object.entries(n.placeholders).forEach((([e,n])=>{r=a(r,`{{${e}}}`,n)})):r=e,r}}let r;const l=()=>r,s=(e,n=t)=>(r=new o(e),r.addTranslations(n),r);export{l as g,s as i};

package/dist/kolibri/i18n-66b52d13.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["locale_de","error","warning","info","success","message","close","of","characters","new","pagination","page","version","dropdown","locale_en","mapLocaleKeys","locale","Object","keys","reduce","a","c","TRANSLATIONS","Set","t","replaceAll","text","search","replacement","split","join","I18nService","constructor","initialLanguage","this","resourceMap","Map","language","addTranslations","translations","Array","isArray","undefined","forEach","l","resources","get","set","entries","k","v","setLanguage","lng","translate","key","options","result","_a","placeholders","i18n","getI18nInstance","initializeI18n"],"sources":["src/locales/de.ts","src/locales/en.ts","src/core/i18n.ts"],"sourcesContent":["export default {\n\terror: 'Fehler',\n\twarning: 'Warnung',\n\tinfo: 'Hinweis',\n\tsuccess: 'Erfolg',\n\tmessage: 'Nachricht',\n\tclose: 'Schließen',\n\t'form-description': 'Formular-Felder, die mit einem Sternchen (*) gekennzeichnet sind, sind Pflichtangaben.',\n\tof: 'von',\n\tcharacters: 'Zeichen',\n\tnew: 'Neu',\n\t'no-entries': 'Es sind keine Einträge vorhanden.',\n\t'change-order': 'Sortierung von {{colLabel}} ändern',\n\t'action-running': 'Aktion wird ausgeführt...',\n\t'action-done': 'Aktion abgeschlossen',\n\tpagination: 'Paginierung',\n\t'page-first': 'Direkt zur ersten Seite',\n\t'page-back': 'Eine Seite zurück',\n\t'page-next': 'Eine Seite weiter',\n\t'page-last': 'Direkt zur letzten Seite',\n\t'entries-per-site': 'Einträge pro Seite',\n\tpage: 'Seite',\n\t'page-current': 'Seite {{page}}',\n\t'page-selected': 'Seite {{page}} ist ausgewählt',\n\t'page-per-site': '{{entries}} Einträge pro Seite',\n\t'nav-maximize': 'Navigation maximieren',\n\t'nav-minimize': 'Navigation minimieren',\n\t'logo-description': 'Logo {{orgShort}}. Bundesadler mit Flaggenstab und Schriftzug {{orgLong}}',\n\t'open-link-in-tab': 'Öffnet in neuem Tab.',\n\t'kolibri-logo': 'Logo von KoliBri',\n\t'table-pagination-label': 'Paginierung für die Tabelle {{label}}',\n\t'avatar-alt': 'Avatar von {{name}}',\n\t'split-button-dropdown-label-open': 'Optionen anzeigen',\n\t'split-button-dropdown-label-close': 'Optionen schließen',\n\t'toast-close-all': 'Alle schließen',\n\t'error-list': 'Fehlerliste',\n\t'error-list-message': 'Bitte korrigieren Sie folgende Fehler:',\n\tversion: 'Versionsnummer',\n\t'table-visible-range': 'Einträge {{start}} bis {{end}} von {{total}}',\n\tdropdown: 'Auswahlliste',\n\t'nav-label-open': 'Untermenü zu {{label}} öffnen',\n\t'nav-label-close': 'Untermenü zu {{label}} schließen',\n\t'close-alert': 'Benachrichtigung {{label}} schließen',\n\t'show-password': 'einblenden',\n\t'hide-password': 'ausblenden',\n};\n","export default {\n\terror: 'Error',\n\twarning: 'Warning',\n\tinfo: 'Note',\n\tsuccess: 'Success',\n\tmessage: 'Message',\n\tclose: 'Close',\n\t'form-description': 'Form fields marked with an asterisk (*) are mandatory.',\n\tof: 'of',\n\tcharacters: 'characters',\n\tnew: 'New',\n\t'no-entries': 'No entries available.',\n\t'change-order': 'Change order of {{colLabel}}',\n\t'action-running': 'Action is running...',\n\t'action-done': 'Action done',\n\tpagination: 'Pagination',\n\t'page-first': 'Directly to the first page',\n\t'page-back': 'One page back',\n\t'page-next': 'One page further',\n\t'page-last': 'Directly to the last page',\n\t'entries-per-site': 'Entries per page',\n\tpage: 'Page',\n\t'page-current': 'Page {{page}}',\n\t'page-selected': 'Page {{page}} is selected',\n\t'page-per-site': '{{entries}} entries per page',\n\t'nav-maximize': 'Maximize navigation',\n\t'nav-minimize': 'Minimize navigation',\n\t'logo-description': 'Logo {{orgShort}}. Federal eagle with flag staff and lettering {{orgLong}}',\n\t'open-link-in-tab': 'Opens in new tab.',\n\t'kolibri-logo': 'KoliBri logo',\n\t'table-pagination-label': 'Pagination for table {{label}}',\n\t'avatar-alt': 'Avatar of {{name}}',\n\t'split-button-dropdown-label-open': 'Show options',\n\t'split-button-dropdown-label-close': 'Hide options',\n\t'toast-close-all': 'Close all',\n\t'error-list': 'Error list',\n\t'error-list-message': 'Please correct the following errors',\n\tversion: 'Version number',\n\t'table-visible-range': 'Entries {{start}} to {{end}} of {{total}}',\n\tdropdown: 'Dropdown',\n\t'nav-label-open': 'Submenu for {{label}} open',\n\t'nav-label-close': 'Submenu for {{label}} close',\n\t'close-alert': 'Notification {{label}} close',\n\t'show-password': 'Show',\n\t'hide-password': 'Hide',\n};\n","import type { Generic } from 'adopted-style-sheets';\nimport locale_de from '../locales/de';\nimport locale_en from '../locales/en';\n\nexport type ResourcePrefix = 'Kol';\nexport type ComponentKeys = keyof typeof locale_de;\n\nconst mapLocaleKeys = (locale: { [K in ComponentKeys]: string }) =>\n\t(Object.keys(locale) as ComponentKeys[]).reduce((a, c) => ((a[`${'kol'}-${c}`] = locale[c]), a), {} as Generic.I18n.Map<ResourcePrefix, ComponentKeys>);\n\nconst TRANSLATIONS = new Set<Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, ResourcePrefix, ComponentKeys>>([\n\t(t: (language: 'en', translationMap: Generic.I18n.Map<ResourcePrefix, ComponentKeys>) => Generic.I18n.Locale.ISO_639_1) => t('en', mapLocaleKeys(locale_en)),\n\t(t: (language: 'de', translationMap: Generic.I18n.Map<ResourcePrefix, ComponentKeys>) => Generic.I18n.Locale.ISO_639_1) => t('de', mapLocaleKeys(locale_de)),\n]);\n\ninterface ITranslationOptions {\n\t/**\n\t * Placeholders to insert into the text. Replacing {{key}} with the specified value if the \"key\".\n\t */\n\tplaceholders?: { [K: string]: string };\n}\n\n// String.replaceAll should be used but is only available with ECMAScript 2021.\nconst replaceAll = function (text: string, search: string, replacement: string) {\n\treturn text.split(search).join(replacement);\n};\n\ntype Resources = Map<string, string>;\n\nexport class I18nService {\n\tprivate resourceMap = new Map<Generic.I18n.Locale.ISO_639_1, Resources>();\n\tlanguage: Generic.I18n.Locale.ISO_639_1;\n\n\tpublic constructor(initialLanguage?: Generic.I18n.Locale.ISO_639_1) {\n\t\tthis.language = initialLanguage ?? 'de';\n\t}\n\n\t/**\n\t * Adds a resource bundle for the specified language.\n\t * @param lng the language the bundle is for\n\t * @param translationMap the translations of the given language\n\t */\n\tpublic addTranslations(\n\t\ttranslations?:\n\t\t\t| Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, string, string>\n\t\t\t| Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, string, string>[]\n\t\t\t| Set<Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, string, string>>,\n\t) {\n\t\tif (Array.isArray(translations)) {\n\t\t\ttranslations = new Set(translations);\n\t\t} else if (typeof translations === 'function') {\n\t\t\ttranslations = new Set([translations]);\n\t\t}\n\n\t\tif (translations !== undefined) {\n\t\t\ttranslations.forEach((t) =>\n\t\t\t\tt((l, t) => {\n\t\t\t\t\tlet resources = this.resourceMap.get(l);\n\t\t\t\t\tif (!resources) {\n\t\t\t\t\t\tresources = new Map<string, string>();\n\t\t\t\t\t\tthis.resourceMap.set(l, resources);\n\t\t\t\t\t}\n\n\t\t\t\t\tObject.entries(t).forEach(([k, v]) => {\n\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\tresources.set(k, v);\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t\treturn l;\n\t\t\t\t}),\n\t\t\t);\n\t\t}\n\t}\n\n\t/**\n\t * Set the current language.\n\t * @param lng the language the bundle is for\n\t */\n\tpublic setLanguage(lng: Generic.I18n.Locale.ISO_639_1) {\n\t\tthis.language = lng;\n\t}\n\n\t/**\n\t * Determines a human-readable translated text for the given resource key.\n\t * @param key the resource key\n\t * @param options optional translation parameters\n\t * @returns the translated text\n\t */\n\tpublic translate(key: string, options?: ITranslationOptions) {\n\t\tlet result = this.resourceMap.get(this.language)?.get(key);\n\t\tif (result) {\n\t\t\tif (options?.placeholders) {\n\t\t\t\tObject.entries(options.placeholders).forEach(([k, v]) => {\n\t\t\t\t\tresult = replaceAll(result!, `{{${k}}}`, v);\n\t\t\t\t});\n\t\t\t}\n\t\t} else {\n\t\t\tresult = key;\n\t\t}\n\t\treturn result;\n\t}\n}\n\nlet i18n: I18nService;\n\nexport const getI18nInstance = () => {\n\treturn i18n;\n};\n\nexport const initializeI18n = (\n\tlng: Generic.I18n.Locale.ISO_639_1,\n\ttranslations:\n\t\t| Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, string, string>\n\t\t| Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, string, string>[]\n\t\t| Set<Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, string, string>> = TRANSLATIONS,\n) => {\n\ti18n = new I18nService(lng);\n\ti18n.addTranslations(translations);\n\treturn i18n;\n};\n"],"mappings":";;;AAAA,MAAAA,EAAe,CACdC,MAAO,SACPC,QAAS,UACTC,KAAM,UACNC,QAAS,SACTC,QAAS,YACTC,MAAO,YACP,mBAAoB,yFACpBC,GAAI,MACJC,WAAY,UACZC,IAAK,MACL,aAAc,oCACd,eAAgB,qCAChB,iBAAkB,4BAClB,cAAe,uBACfC,WAAY,cACZ,aAAc,0BACd,YAAa,oBACb,YAAa,oBACb,YAAa,2BACb,mBAAoB,qBACpBC,KAAM,QACN,eAAgB,iBAChB,gBAAiB,gCACjB,gBAAiB,iCACjB,eAAgB,wBAChB,eAAgB,wBAChB,mBAAoB,4EACpB,mBAAoB,uBACpB,eAAgB,mBAChB,yBAA0B,wCAC1B,aAAc,sBACd,mCAAoC,oBACpC,oCAAqC,qBACrC,kBAAmB,iBACnB,aAAc,cACd,qBAAsB,yCACtBC,QAAS,iBACT,sBAAuB,+CACvBC,SAAU,eACV,iBAAkB,gCAClB,kBAAmB,mCACnB,cAAe,uCACf,gBAAiB,aACjB,gBAAiB,cC5ClB,MAAAC,EAAe,CACdb,MAAO,QACPC,QAAS,UACTC,KAAM,OACNC,QAAS,UACTC,QAAS,UACTC,MAAO,QACP,mBAAoB,yDACpBC,GAAI,KACJC,WAAY,aACZC,IAAK,MACL,aAAc,wBACd,eAAgB,+BAChB,iBAAkB,uBAClB,cAAe,cACfC,WAAY,aACZ,aAAc,6BACd,YAAa,gBACb,YAAa,mBACb,YAAa,4BACb,mBAAoB,mBACpBC,KAAM,OACN,eAAgB,gBAChB,gBAAiB,4BACjB,gBAAiB,+BACjB,eAAgB,sBAChB,eAAgB,sBAChB,mBAAoB,6EACpB,mBAAoB,oBACpB,eAAgB,eAChB,yBAA0B,iCAC1B,aAAc,qBACd,mCAAoC,eACpC,oCAAqC,eACrC,kBAAmB,YACnB,aAAc,aACd,qBAAsB,sCACtBC,QAAS,iBACT,sBAAuB,4CACvBC,SAAU,WACV,iBAAkB,6BAClB,kBAAmB,8BACnB,cAAe,+BACf,gBAAiB,OACjB,gBAAiB,QCrClB,MAAME,EAAiBC,GACrBC,OAAOC,KAAKF,GAA4BG,QAAO,CAACC,EAAGC,KAAQD,EAAE,GAAG,SAASC,KAAOL,EAAOK,GAAKD,IAAI,IAElG,MAAME,EAAe,IAAIC,IAA8F,CACrHC,GAA0HA,EAAE,KAAMT,EAAcD,IAChJU,GAA0HA,EAAE,KAAMT,EAAcf,MAWlJ,MAAMyB,EAAa,SAAUC,EAAcC,EAAgBC,GAC1D,OAAOF,EAAKG,MAAMF,GAAQG,KAAKF,EAChC,E,MAIaG,EAIZ,WAAAC,CAAmBC,GAHXC,KAAAC,YAAc,IAAIC,IAIzBF,KAAKG,SAAWJ,IAAe,MAAfA,SAAe,EAAfA,EAAmB,I,CAQ7B,eAAAK,CACNC,GAKA,GAAIC,MAAMC,QAAQF,GAAe,CAChCA,EAAe,IAAIhB,IAAIgB,E,MACjB,UAAWA,IAAiB,WAAY,CAC9CA,EAAe,IAAIhB,IAAI,CAACgB,G,CAGzB,GAAIA,IAAiBG,UAAW,CAC/BH,EAAaI,SAASnB,GACrBA,GAAE,CAACoB,EAAGpB,KACL,IAAIqB,EAAYX,KAAKC,YAAYW,IAAIF,GACrC,IAAKC,EAAW,CACfA,EAAY,IAAIT,IAChBF,KAAKC,YAAYY,IAAIH,EAAGC,E,CAGzB5B,OAAO+B,QAAQxB,GAAGmB,SAAQ,EAAEM,EAAGC,MAC9B,GAAIA,EAAG,CACNL,EAAUE,IAAIE,EAAGC,E,KAGnB,OAAON,CAAC,K,EAUL,WAAAO,CAAYC,GAClBlB,KAAKG,SAAWe,C,CASV,SAAAC,CAAUC,EAAaC,G,MAC7B,IAAIC,GAASC,EAAAvB,KAAKC,YAAYW,IAAIZ,KAAKG,aAAS,MAAAoB,SAAA,SAAAA,EAAEX,IAAIQ,GACtD,GAAIE,EAAQ,CACX,GAAID,IAAO,MAAPA,SAAO,SAAPA,EAASG,aAAc,CAC1BzC,OAAO+B,QAAQO,EAAQG,cAAcf,SAAQ,EAAEM,EAAGC,MACjDM,EAAS/B,EAAW+B,EAAS,KAAKP,MAAOC,EAAE,G,MAGvC,CACNM,EAASF,C,CAEV,OAAOE,C,EAIT,IAAIG,E,MAESC,EAAkB,IACvBD,E,MAGKE,EAAiB,CAC7BT,EACAb,EAGoFjB,KAEpFqC,EAAO,IAAI5B,EAAYqB,GACvBO,EAAKrB,gBAAgBC,GACrB,OAAOoB,CAAI,S","ignoreList":[]}

package/dist/kolibri/index.esm.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{o as t}from"./index-db4aa6e4.js";export{s as setCurrentLocation}from"./ariaCurrentService-6fe36ebc.js";export{T as ToasterService,b as bootstrap,r as register}from"./toaster-3755abc8.js";export{c as BUNDESAEMTER,e as BUNDESANSTALTEN,a as BUNDESMINISTERIEN,f as BUND_LOGO_TEXT_MAP,b as Bundesamt,d as Bundesanstalt,B as Bundesministerium}from"./bund-ad41b762.js";export{K as KoliBriDevHelper}from"./prop.validators-f2b9a155.js";import"./component-names-e522484e.js";import"./i18n-ebe0c4cb.js";import"./dev.utils-1ca991a2.js";var o,n;!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"}(o||(o={})),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.form=13]="form",e[e.heading=14]="heading",e[e.icon=15]="icon",e[e.image=16]="image",e[e["indented-text"]=17]="indented-text",e[e["input-checkbox"]=18]="input-checkbox",e[e["input-color"]=19]="input-color",e[e["input-date"]=20]="input-date",e[e["input-email"]=21]="input-email",e[e["input-file"]=22]="input-file",e[e["input-number"]=23]="input-number",e[e["input-password"]=24]="input-password",e[e["input-radio"]=25]="input-radio",e[e["input-range"]=26]="input-range",e[e["input-text"]=27]="input-text",e[e.kolibri=28]="kolibri",e[e.link=29]="link",e[e["link-button"]=30]="link-button",e[e["link-group"]=31]="link-group",e[e.logo=32]="logo",e[e.modal=33]="modal",e[e.nav=34]="nav",e[e.pagination=35]="pagination",e[e.progress=36]="progress",e[e.select=37]="select",e[e.separator=38]="separator",e[e["skip-nav"]=39]="skip-nav",e[e.spin=40]="spin",e[e["split-button"]=41]="split-button",e[e.symbol=42]="symbol",e[e.table=43]="table",e[e["table-stateless"]=44]="table-stateless",e[e["table-stateful"]=45]="table-stateful",e[e.tabs=46]="tabs",e[e.textarea=47]="textarea",e[e["toast-container"]=48]="toast-container",e[e.toolbar=49]="toolbar",e[e.tooltip=50]="tooltip",e[e.tree=51]="tree",e[e["tree-item"]=52]="tree-item"}(n||(n={}));const i=new t("kol",o,n);export{i as KoliBri};
+import{o as t,G as i}from"./index-db4aa6e4.js";export{s as setCurrentLocation}from"./ariaCurrentService-6fe36ebc.js";import{s as o,K as n}from"./component-names-e522484e.js";import{i as r}from"./i18n-66b52d13.js";import{L as l}from"./dev.utils-1ca991a2.js";export{c as BUNDESAEMTER,e as BUNDESANSTALTEN,a as BUNDESMINISTERIEN,f as BUND_LOGO_TEXT_MAP,b as Bundesamt,d as Bundesanstalt,B as Bundesministerium}from"./bund-ad41b762.js";export{K as KoliBriDevHelper}from"./prop.validators-f2b9a155.js";var u,p;!function(t){t[t.error=0]="error",t[t.warning=1]="warning",t[t.info=2]="info",t[t.success=3]="success",t[t.message=4]="message",t[t.close=5]="close",t[t["form-description"]=6]="form-description",t[t.of=7]="of",t[t.characters=8]="characters",t[t.new=9]="new",t[t["no-entries"]=10]="no-entries",t[t["change-order"]=11]="change-order",t[t["action-running"]=12]="action-running",t[t["action-done"]=13]="action-done",t[t["page-first"]=14]="page-first",t[t["page-back"]=15]="page-back",t[t["page-next"]=16]="page-next",t[t["page-last"]=17]="page-last",t[t["entries-per-site"]=18]="entries-per-site",t[t["page-current"]=19]="page-current",t[t["page-selected"]=20]="page-selected",t[t["page-per-site"]=21]="page-per-site",t[t["logo-description"]=22]="logo-description",t[t["open-link-in-tab"]=23]="open-link-in-tab",t[t["kolibri-logo"]=24]="kolibri-logo"}(u||(u={})),function(t){t[t.abbr=0]="abbr",t[t.accordion=1]="accordion",t[t["accordion-group"]=2]="accordion-group",t[t.alert=3]="alert",t[t.avatar=4]="avatar",t[t.badge=5]="badge",t[t.breadcrumb=6]="breadcrumb",t[t.button=7]="button",t[t["button-group"]=8]="button-group",t[t["button-link"]=9]="button-link",t[t.card=10]="card",t[t.combobox=11]="combobox",t[t.details=12]="details",t[t.form=13]="form",t[t.heading=14]="heading",t[t.icon=15]="icon",t[t.image=16]="image",t[t["indented-text"]=17]="indented-text",t[t["input-checkbox"]=18]="input-checkbox",t[t["input-color"]=19]="input-color",t[t["input-date"]=20]="input-date",t[t["input-email"]=21]="input-email",t[t["input-file"]=22]="input-file",t[t["input-number"]=23]="input-number",t[t["input-password"]=24]="input-password",t[t["input-radio"]=25]="input-radio",t[t["input-range"]=26]="input-range",t[t["input-text"]=27]="input-text",t[t.kolibri=28]="kolibri",t[t.link=29]="link",t[t["link-button"]=30]="link-button",t[t["link-group"]=31]="link-group",t[t.logo=32]="logo",t[t.modal=33]="modal",t[t.nav=34]="nav",t[t.pagination=35]="pagination",t[t.progress=36]="progress",t[t.select=37]="select",t[t.separator=38]="separator",t[t["skip-nav"]=39]="skip-nav",t[t.spin=40]="spin",t[t["split-button"]=41]="split-button",t[t.symbol=42]="symbol",t[t.table=43]="table",t[t["table-stateless"]=44]="table-stateless",t[t["table-stateful"]=45]="table-stateful",t[t.tabs=46]="tabs",t[t.textarea=47]="textarea",t[t["toast-container"]=48]="toast-container",t[t.toolbar=49]="toolbar",t[t.tooltip=50]="tooltip",t[t.tree=51]="tree",t[t["tree-item"]=52]="tree-item"}(p||(p={}));const m=new t("kol",u,p);let v=!1;const g=async(t,e,n)=>{var a,s;r(null!==(s=null===(a=null==n?void 0:n.translation)||void 0===a?void 0:a.name)&&void 0!==s?s:"de",null==n?void 0:n.translations),(null==n?void 0:n.transformTagName)&&o(null==n?void 0:n.transformTagName);const l=await i(t,e,n);return v=!0,l},h=g,k=()=>v;class x{constructor(t,e){this.document=t,this.options=e,this.toastContainerElement=this.document.createElement(n),this.document.body.prepend(this.toastContainerElement)}static getInstance(t,e){if(!k())throw new Error("Toaster: Call KoliBri bootstrap/register method first.");let n=this.instances.get(t);return n||(n=new x(t,e),this.instances.set(t,n)),n}dispose(){const t=this.toastContainerElement;t?(this.toastContainerElement=void 0,t.remove()):l.warn("Toaster service is already disposed.",{forceLog:!0})}enqueue(t){var e,n;if(this.toastContainerElement&&"function"==typeof this.toastContainerElement.enqueue)return!t.alertVariant&&(null===(e=this.options)||void 0===e?void 0:e.defaultAlertVariant)&&(t.alertVariant=null===(n=this.options)||void 0===n?void 0:n.defaultAlertVariant),this.toastContainerElement.enqueue(t)}closeAll(t=!1){this.toastContainerElement&&"function"==typeof this.toastContainerElement.closeAll&&this.toastContainerElement.closeAll(t)}}x.instances=new Map;export{m as KoliBri,x as ToasterService,g as bootstrap,h as register};

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

@@ -1 +1 @@
-{"version":3,"names":["KeyEnum","TagEnum","KoliBri","Theme"],"sources":["src/schema/i18n-keys.ts","src/schema/tag-names.ts","src/schema/index.ts"],"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'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';\n"],"mappings":";;;mhBAAA,IAAYA,GAAZ,SAAYA,GACXA,IAAA,oBACAA,IAAA,wBACAA,IAAA,kBACAA,IAAA,wBACAA,IAAA,wBACAA,IAAA,oBACAA,IAAA,0CACAA,IAAA,cACAA,IAAA,8BACAA,IAAA,gBACAA,IAAA,+BACAA,IAAA,mCACAA,IAAA,uCACAA,IAAA,iCACAA,IAAA,+BACAA,IAAA,6BACAA,IAAA,6BACAA,IAAA,6BACAA,IAAA,2CACAA,IAAA,mCACAA,IAAA,qCACAA,IAAA,qCACAA,IAAA,2CACAA,IAAA,2CACAA,IAAA,kCACA,EA1BD,CAAYA,MAAO,KCAnB,IAAYC,GAAZ,SAAYA,GACXA,IAAA,kBACAA,IAAA,4BACAA,IAAA,wCACAA,IAAA,oBACAA,IAAA,sBACAA,IAAA,oBACAA,IAAA,8BACAA,IAAA,sBACAA,IAAA,kCACAA,IAAA,gCACAA,IAAA,mBACAA,IAAA,2BACAA,IAAA,yBACAA,IAAA,mBACAA,IAAA,yBACAA,IAAA,mBACAA,IAAA,qBACAA,IAAA,qCACAA,IAAA,uCACAA,IAAA,iCACAA,IAAA,+BACAA,IAAA,iCACAA,IAAA,+BACAA,IAAA,mCACAA,IAAA,uCACAA,IAAA,iCACAA,IAAA,iCACAA,IAAA,+BACAA,IAAA,yBACAA,IAAA,mBACAA,IAAA,iCACAA,IAAA,+BACAA,IAAA,mBACAA,IAAA,qBACAA,IAAA,iBACAA,IAAA,+BACAA,IAAA,2BACAA,IAAA,uBACAA,IAAA,6BACAA,IAAA,2BACAA,IAAA,mBACAA,IAAA,mCACAA,IAAA,uBACAA,IAAA,qBACAA,IAAA,yCACAA,IAAA,uCACAA,IAAA,mBACAA,IAAA,2BACAA,IAAA,yCACAA,IAAA,yBACAA,IAAA,yBACAA,IAAA,mBACAA,IAAA,4BACA,EAtDD,CAAYA,MAAO,K,MCKNC,EAAU,IAAIC,EAAyD,MAAOH,EAASC,U","ignoreList":[]}
+{"version":3,"names":["KeyEnum","TagEnum","KoliBri","Theme","initialized","bootstrap","async","themes","loaders","options","initializeI18n","_b","_a","translation","name","translations","transformTagName","setCustomTagNames","coreRegisterReturnValue","coreRegister","register","isInitialized","ToasterService","constructor","document","this","toastContainerElement","createElement","KolToastContainerTag","body","prepend","getInstance","Error","instance","instances","get","set","dispose","element","undefined","remove","Log","warn","forceLog","enqueue","toast","alertVariant","defaultAlertVariant","closeAll","immediate","Map"],"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'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';\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"],"mappings":";;;ifAAA,IAAYA,GAAZ,SAAYA,GACXA,IAAA,oBACAA,IAAA,wBACAA,IAAA,kBACAA,IAAA,wBACAA,IAAA,wBACAA,IAAA,oBACAA,IAAA,0CACAA,IAAA,cACAA,IAAA,8BACAA,IAAA,gBACAA,IAAA,+BACAA,IAAA,mCACAA,IAAA,uCACAA,IAAA,iCACAA,IAAA,+BACAA,IAAA,6BACAA,IAAA,6BACAA,IAAA,6BACAA,IAAA,2CACAA,IAAA,mCACAA,IAAA,qCACAA,IAAA,qCACAA,IAAA,2CACAA,IAAA,2CACAA,IAAA,kCACA,EA1BD,CAAYA,MAAO,KCAnB,IAAYC,GAAZ,SAAYA,GACXA,IAAA,kBACAA,IAAA,4BACAA,IAAA,wCACAA,IAAA,oBACAA,IAAA,sBACAA,IAAA,oBACAA,IAAA,8BACAA,IAAA,sBACAA,IAAA,kCACAA,IAAA,gCACAA,IAAA,mBACAA,IAAA,2BACAA,IAAA,yBACAA,IAAA,mBACAA,IAAA,yBACAA,IAAA,mBACAA,IAAA,qBACAA,IAAA,qCACAA,IAAA,uCACAA,IAAA,iCACAA,IAAA,+BACAA,IAAA,iCACAA,IAAA,+BACAA,IAAA,mCACAA,IAAA,uCACAA,IAAA,iCACAA,IAAA,iCACAA,IAAA,+BACAA,IAAA,yBACAA,IAAA,mBACAA,IAAA,iCACAA,IAAA,+BACAA,IAAA,mBACAA,IAAA,qBACAA,IAAA,iBACAA,IAAA,+BACAA,IAAA,2BACAA,IAAA,uBACAA,IAAA,6BACAA,IAAA,2BACAA,IAAA,mBACAA,IAAA,mCACAA,IAAA,uBACAA,IAAA,qBACAA,IAAA,yCACAA,IAAA,uCACAA,IAAA,mBACAA,IAAA,2BACAA,IAAA,yCACAA,IAAA,yBACAA,IAAA,yBACAA,IAAA,mBACAA,IAAA,4BACA,EAtDD,CAAYA,MAAO,K,MCKNC,EAAU,IAAIC,EAAyD,MAAOH,EAASC,GCApG,IAAIG,EAAc,M,MAMLC,EAAYC,MACxBC,EAIAC,EACAC,K,QAEAC,GAAeC,GAAAC,EAAAH,IAAO,MAAPA,SAAO,SAAPA,EAASI,eAAW,MAAAD,SAAA,SAAAA,EAAEE,QAAI,MAAAH,SAAA,EAAAA,EAAI,KAAMF,IAAO,MAAPA,SAAO,SAAPA,EAASM,cAC5D,GAAIN,IAAO,MAAPA,SAAO,SAAPA,EAASO,iBAAkB,CAC9BC,EAAkBR,IAAO,MAAPA,SAAO,SAAPA,EAASO,iB,CAE5B,MAAME,QAAgCC,EAAaZ,EAAQC,EAASC,GACpEL,EAAc,KAEd,OAAOc,CAAuB,E,MAGlBE,EAAWf,EACjB,MAAMgB,EAAgB,IAAMjB,E,MCzBtBkB,EAKZ,WAAAC,CACkBC,EACAf,GADAgB,KAAAD,WACAC,KAAAhB,UAEjBgB,KAAKC,sBAAwBD,KAAKD,SAASG,cAAcC,GACzDH,KAAKD,SAASK,KAAKC,QAAQL,KAAKC,sB,CAM1B,kBAAOK,CAAYP,EAAoBf,GAC7C,IAAKY,IAAiB,CACrB,MAAM,IAAIW,MAAM,yD,CAGjB,IAAIC,EAAWR,KAAKS,UAAUC,IAAIX,GAClC,IAAKS,EAAU,CACdA,EAAW,IAAIX,EAAeE,EAAUf,GACxCgB,KAAKS,UAAUE,IAAIZ,EAAUS,E,CAE9B,OAAOA,C,CAGD,OAAAI,GACN,MAAMC,EAAUb,KAAKC,sBACrB,GAAIY,EAAS,CACZb,KAAKC,sBAAwBa,UAC7BD,EAAQE,Q,KACF,CACNC,EAAIC,KAAK,uCAAwC,CAAEC,SAAU,M,EAIxD,OAAAC,CAAQC,G,QAKd,GAAIpB,KAAKC,8BAAgCD,KAAKC,sBAAsBkB,UAAY,WAAY,CAC3F,IAAKC,EAAMC,gBAAgBlC,EAAAa,KAAKhB,WAAO,MAAAG,SAAA,SAAAA,EAAEmC,qBAAqB,CAC7DF,EAAMC,cAAenC,EAAAc,KAAKhB,WAAO,MAAAE,SAAA,SAAAA,EAAEoC,mB,CAGpC,OAAOtB,KAAKC,sBAAsBkB,QAAQC,E,EAIrC,QAAAG,CAASC,EAAqB,OACpC,GAAIxB,KAAKC,8BAAgCD,KAAKC,sBAAsBsB,WAAa,WAAY,MACvFvB,KAAKC,sBAAsBsB,SAASC,E,GAtDnB3B,EAAAY,UAA2C,IAAIgB,W","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-360ad69b.js";import{n as i}from"./dev.utils-eeeb0158.js";import{a as o}from"./component-names-e522484e.js";import{v as a}from"./label-452f8c01.js";import{v as s}from"./tooltip-align-676fe651.js";import"./dev.utils-1ca991a2.js";import"./reuse-b66836de.js";import"./prop.validators-f2b9a155.js";import"./index-db4aa6e4.js";import"./align-6595a6d6.js";const l="/*\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}",r=l,d=class{constructor(e){n(this,e),this.nonce=i(),this._label=void 0,this._tooltipAlign="top",this.state={_label:"",_tooltipAlign:"top"}}render(){return e(t,{key:"598d706f074db11649d068894821a214d3373d11",class:"kol-abbr"},e("abbr",{key:"cea033577a07ea9cbc48cf32f2afa798b2f70c1b","aria-labelledby":this.nonce,role:"definition",tabindex:"0",title:this.state._label},e("span",{key:"f28a0dacfb9e1d5807f763e03401e1b71c0414c3",title:""},e("slot",{key:"c72ee140bfc1c43d781a5309c07f9a47689d6f4e"}))),e(o,{key:"2743bb91c1b770375bda8e19668e7ad698b10baa",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._label}))}validateLabel(n){a(this,n,{required:!0})}validateTooltipAlign(n){s(this,n)}componentWillLoad(){this.validateLabel(this._label),this.validateTooltipAlign(this._tooltipAlign)}static get watchers(){return{_label:["validateLabel"],_tooltipAlign:["validateTooltipAlign"]}}};d.style={default:r};export{d as kol_abbr};
+import{r as n,h as e,H as t}from"./index-360ad69b.js";import{n as i}from"./dev.utils-698b2d79.js";import{a as o}from"./component-names-e522484e.js";import{v as a}from"./label-452f8c01.js";import{v as s}from"./tooltip-align-676fe651.js";import"./reuse-b66836de.js";import"./dev.utils-1ca991a2.js";import"./prop.validators-f2b9a155.js";import"./index-db4aa6e4.js";import"./align-6595a6d6.js";const l="/*\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}",r=l,d=class{constructor(e){n(this,e),this.nonce=i(),this._label=void 0,this._tooltipAlign="top",this.state={_label:"",_tooltipAlign:"top"}}render(){return e(t,{key:"598d706f074db11649d068894821a214d3373d11",class:"kol-abbr"},e("abbr",{key:"cea033577a07ea9cbc48cf32f2afa798b2f70c1b","aria-labelledby":this.nonce,role:"definition",tabindex:"0",title:this.state._label},e("span",{key:"f28a0dacfb9e1d5807f763e03401e1b71c0414c3",title:""},e("slot",{key:"c72ee140bfc1c43d781a5309c07f9a47689d6f4e"}))),e(o,{key:"2743bb91c1b770375bda8e19668e7ad698b10baa",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._label}))}validateLabel(n){a(this,n,{required:!0})}validateTooltipAlign(n){s(this,n)}componentWillLoad(){this.validateLabel(this._label),this.validateTooltipAlign(this._tooltipAlign)}static get watchers(){return{_label:["validateLabel"],_tooltipAlign:["validateTooltipAlign"]}}};d.style={default:r};export{d as kol_abbr};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t,g as i}from"./index-360ad69b.js";import{n as o}from"./dev.utils-eeeb0158.js";import{w as a}from"./validation-00baa068.js";import{b as s,c as r}from"./component-names-e522484e.js";import{f as l,s as d}from"./prop.validators-f2b9a155.js";import{a as c}from"./reuse-b66836de.js";import{v as h}from"./disabled-7ce039e2.js";import{v as p}from"./open-ef237788.js";import{v as b}from"./label-452f8c01.js";import"./dev.utils-1ca991a2.js";import"./index-db4aa6e4.js";const f="/*\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}",u=f;l("[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"),l("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const m=class{constructor(e){n(this,e),this.nonce=o(),this.catchRef=n=>{c(this.host,n)},this.onClick=n=>{this._open=!this._open,setTimeout((()=>{var e;"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)&&this.state._on.onClick(n,!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}}render(){return e(t,{key:"f1672f2cf8b9aa85b1f63ab68d00300b74638dd8",class:"kol-accordion"},e("div",{key:"e80bb532a6f148e9608b9d5b4eca382cf8c01e8d",class:{accordion:!0,disabled:!0===this.state._disabled,open:!0===this.state._open}},e(s,{key:"e221fc0ccd86504a3e491a8e32c55da5fa76a365",_label:"",_level:this.state._level,class:"accordion-heading"},e(r,{key:"f65af86aab71ff029bba8108495477d7be05c2f3",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}})),e("div",{key:"5435d015a21707724c7180dbb96e7a0af30f9d42",class:"wrapper"},e("div",{key:"5a9958a91c49d8b807627f7029ad975e52c6e1ea",class:"animation-wrapper"},e("div",{key:"367a024dca25373063df9ec0e679161ad26bffb8","aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce},e("slot",{key:"dfbbf47f20297d5f5052d7df8f74bd659ce054fd"}))))))}validateDisabled(n){h(this,n)}validateLabel(n){b(this,n,{required:!0})}validateLevel(n){a(this,n)}validateOn(n){"object"==typeof n&&null!==n&&"function"==typeof n.onClick&&d(this,"_on",n)}validateOpen(n){p(this,n)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}get host(){return i(this)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};m.style={default:u};export{m as kol_accordion};
+import{r as n,h as e,H as t,g as i}from"./index-360ad69b.js";import{n as o}from"./dev.utils-698b2d79.js";import{w as a}from"./validation-00baa068.js";import{b as s,c as r}from"./component-names-e522484e.js";import{f as l,s as d}from"./prop.validators-f2b9a155.js";import{a as c}from"./reuse-b66836de.js";import{v as h}from"./disabled-7ce039e2.js";import{v as p}from"./open-ef237788.js";import{v as b}from"./label-452f8c01.js";import"./dev.utils-1ca991a2.js";import"./index-db4aa6e4.js";const f="/*\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}",u=f;l("[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"),l("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const m=class{constructor(e){n(this,e),this.nonce=o(),this.catchRef=n=>{c(this.host,n)},this.onClick=n=>{this._open=!this._open,setTimeout((()=>{var e;"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)&&this.state._on.onClick(n,!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}}render(){return e(t,{key:"f1672f2cf8b9aa85b1f63ab68d00300b74638dd8",class:"kol-accordion"},e("div",{key:"e80bb532a6f148e9608b9d5b4eca382cf8c01e8d",class:{accordion:!0,disabled:!0===this.state._disabled,open:!0===this.state._open}},e(s,{key:"e221fc0ccd86504a3e491a8e32c55da5fa76a365",_label:"",_level:this.state._level,class:"accordion-heading"},e(r,{key:"f65af86aab71ff029bba8108495477d7be05c2f3",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}})),e("div",{key:"5435d015a21707724c7180dbb96e7a0af30f9d42",class:"wrapper"},e("div",{key:"5a9958a91c49d8b807627f7029ad975e52c6e1ea",class:"animation-wrapper"},e("div",{key:"367a024dca25373063df9ec0e679161ad26bffb8","aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce},e("slot",{key:"dfbbf47f20297d5f5052d7df8f74bd659ce054fd"}))))))}validateDisabled(n){h(this,n)}validateLabel(n){b(this,n,{required:!0})}validateLevel(n){a(this,n)}validateOn(n){"object"==typeof n&&null!==n&&"function"==typeof n.onClick&&d(this,"_on",n)}validateOpen(n){p(this,n)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}get host(){return i(this)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};m.style={default:u};export{m as kol_accordion};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as a,H as t}from"./index-360ad69b.js";import{t as i}from"./i18n-342bc196.js";import{w as s}from"./validation-00baa068.js";import{b as o,c as l,g as c}from"./component-names-e522484e.js";import{L as r}from"./dev.utils-1ca991a2.js";import{b as n,s as d,w as h}from"./prop.validators-f2b9a155.js";import{v as b}from"./has-closer-b81b200a.js";import{v as f}from"./label-452f8c01.js";import"./i18n-ebe0c4cb.js";import"./reuse-b66836de.js";import"./index-db4aa6e4.js";const v=["default","info","success","warning","error"],p=["card","msg"],u=e=>a(c,{class:"heading-icon",_label:"string"==typeof e.label&&e.label.length>0?"":e.ariaLabel,_icons:e.icon}),m=e=>{switch(e.type){case"error":return a(u,{ariaLabel:i("kol-error"),icon:"codicon codicon-error",label:e.label});case"info":return a(u,{ariaLabel:i("kol-info"),icon:"codicon codicon-info",label:e.label});case"warning":return a(u,{ariaLabel:i("kol-warning"),icon:"codicon codicon-warning",label:e.label});case"success":return a(u,{ariaLabel:i("kol-success"),icon:"codicon codicon-pass",label:e.label});default:return a(u,{ariaLabel:i("kol-message"),icon:"codicon codicon-comment",label:e.label})}},_=class{constructor(a){e(this,a),this.close=()=>{var a;void 0!==(null===(a=this._on)||void 0===a?void 0:a.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=a=>"object"==typeof a&&null!==a&&"function"==typeof a.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{r.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(e){r.debug("Navigator does not support vibration.")}setTimeout((()=>{this.validateAlert(!1)}),1e4)}return a(t,{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},a("div",{key:"b190de9f62c33d970daabc1b5638132da33c936e",class:"heading"},a(m,{key:"e1da8b194a13ec6f9270efc2234caadcee77e827",label:this.state._label,type:this.state._type}),a("div",{key:"7ffd000cfbe218c582791e8646ff5caf9bad5b25",class:"heading-content"},"string"==typeof this.state._label&&(null===(e=this.state._label)||void 0===e?void 0:e.length)>0&&a(o,{key:"f9e7c598243a4868b80b248fdf4dfdeed5d24a2b",_label:this.state._label,_level:this.state._level}),"msg"===this.state._variant&&a("div",{key:"b5b70319b6c7747872e9d8072a1fe7565938f7c1",class:"content"},a("slot",{key:"b75edf24762d861147d5ee5fa0701b4c5a30eed1"}))),this.state._hasCloser&&a(l,{key:"cd46afacd1afbc415e1184604b3b1ac9af901c97",class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:i("kol-close-alert",{placeholders:{label:this.state._label}}),_on:this.on,_tooltipAlign:"left"})),"card"===this.state._variant&&a("div",{key:"2a9670974b00907497abd255e02194301df0c0a2",class:"content"},a("slot",{key:"9bd3de7e485b9865d5f74dfbce4f421d4b1dc9b5"})))}validateAlert(a){n(this,"_alert",a)}validateHasCloser(a){b(this,a)}validateLabel(a){f(this,a)}validateLevel(a){s(this,a)}validateOn(a){this.validateOnValue(a)&&d(this,"_on",{onClose:a.onClose})}validateType(a){h(this,"_type",(a=>"string"==typeof a&&v.includes(a)),new Set(`String {${v.join(", ")}`),a)}validateVariant(a){h(this,"_variant",(a=>"string"==typeof a&&p.includes(a)),new Set(`AlertVariant {${p.join(", ")}`),a)}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"]}}};export{_ as kol_alert_wc};
+import{r as e,h as a,H as t}from"./index-360ad69b.js";import{t as i}from"./i18n-112381e9.js";import{w as s}from"./validation-00baa068.js";import{b as o,c as l,g as c}from"./component-names-e522484e.js";import{L as r}from"./dev.utils-1ca991a2.js";import{b as n,s as d,w as h}from"./prop.validators-f2b9a155.js";import{v as b}from"./has-closer-b81b200a.js";import{v as f}from"./label-452f8c01.js";import"./i18n-66b52d13.js";import"./reuse-b66836de.js";import"./index-db4aa6e4.js";const v=["default","info","success","warning","error"],p=["card","msg"],u=e=>a(c,{class:"heading-icon",_label:"string"==typeof e.label&&e.label.length>0?"":e.ariaLabel,_icons:e.icon}),m=e=>{switch(e.type){case"error":return a(u,{ariaLabel:i("kol-error"),icon:"codicon codicon-error",label:e.label});case"info":return a(u,{ariaLabel:i("kol-info"),icon:"codicon codicon-info",label:e.label});case"warning":return a(u,{ariaLabel:i("kol-warning"),icon:"codicon codicon-warning",label:e.label});case"success":return a(u,{ariaLabel:i("kol-success"),icon:"codicon codicon-pass",label:e.label});default:return a(u,{ariaLabel:i("kol-message"),icon:"codicon codicon-comment",label:e.label})}},_=class{constructor(a){e(this,a),this.close=()=>{var a;void 0!==(null===(a=this._on)||void 0===a?void 0:a.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=a=>"object"==typeof a&&null!==a&&"function"==typeof a.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{r.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(e){r.debug("Navigator does not support vibration.")}setTimeout((()=>{this.validateAlert(!1)}),1e4)}return a(t,{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},a("div",{key:"b190de9f62c33d970daabc1b5638132da33c936e",class:"heading"},a(m,{key:"e1da8b194a13ec6f9270efc2234caadcee77e827",label:this.state._label,type:this.state._type}),a("div",{key:"7ffd000cfbe218c582791e8646ff5caf9bad5b25",class:"heading-content"},"string"==typeof this.state._label&&(null===(e=this.state._label)||void 0===e?void 0:e.length)>0&&a(o,{key:"f9e7c598243a4868b80b248fdf4dfdeed5d24a2b",_label:this.state._label,_level:this.state._level}),"msg"===this.state._variant&&a("div",{key:"b5b70319b6c7747872e9d8072a1fe7565938f7c1",class:"content"},a("slot",{key:"b75edf24762d861147d5ee5fa0701b4c5a30eed1"}))),this.state._hasCloser&&a(l,{key:"cd46afacd1afbc415e1184604b3b1ac9af901c97",class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:i("kol-close-alert",{placeholders:{label:this.state._label}}),_on:this.on,_tooltipAlign:"left"})),"card"===this.state._variant&&a("div",{key:"2a9670974b00907497abd255e02194301df0c0a2",class:"content"},a("slot",{key:"9bd3de7e485b9865d5f74dfbce4f421d4b1dc9b5"})))}validateAlert(a){n(this,"_alert",a)}validateHasCloser(a){b(this,a)}validateLabel(a){f(this,a)}validateLevel(a){s(this,a)}validateOn(a){this.validateOnValue(a)&&d(this,"_on",{onClose:a.onClose})}validateType(a){h(this,"_type",(a=>"string"==typeof a&&v.includes(a)),new Set(`String {${v.join(", ")}`),a)}validateVariant(a){h(this,"_variant",(a=>"string"==typeof a&&p.includes(a)),new Set(`AlertVariant {${p.join(", ")}`),a)}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"]}}};export{_ as kol_alert_wc};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as a,h as t,H as s}from"./index-360ad69b.js";import{t as e}from"./i18n-342bc196.js";import{v as r}from"./image-source-3bde4a5d.js";import{v as i}from"./label-452f8c01.js";import"./i18n-ebe0c4cb.js";import"./reuse-b66836de.js";import"./prop.validators-f2b9a155.js";import"./index-db4aa6e4.js";import"./dev.utils-1ca991a2.js";const c=a=>0===a.length?"":a[0].toUpperCase(),o=a=>{const t=a.split(/\s+/),s=t.at(0),e=t.at(-1);return t.length>=2&&s&&e?`${c(s)}${c(e)}`:c(a)},d=class{constructor(t){a(this,t),this._src=void 0,this._label=void 0,this.state={_src:"",_label:""}}render(){return t(s,{key:"672b71c600e54214bbaf86210fe439af3f187c83",class:"kol-avatar-wc"},t("div",{key:"8631bb174ac54c1677149d12979f6837dddd692d","aria-label":e("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"container",role:"img"},this.state._src?t("img",{alt:"","aria-hidden":"true",class:"image",src:this.state._src}):t("span",{"aria-hidden":"true",class:"initials"},o(this.state._label.trim()))))}validateSrc(a){r(this,a)}validateLabel(a){i(this,a,{required:!0})}componentWillLoad(){this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_src:["validateSrc"],_label:["validateLabel"]}}};export{d as kol_avatar_wc};
+import{r as a,h as t,H as s}from"./index-360ad69b.js";import{t as r}from"./i18n-112381e9.js";import{v as e}from"./image-source-3bde4a5d.js";import{v as i}from"./label-452f8c01.js";import"./i18n-66b52d13.js";import"./reuse-b66836de.js";import"./prop.validators-f2b9a155.js";import"./index-db4aa6e4.js";import"./dev.utils-1ca991a2.js";const o=a=>0===a.length?"":a[0].toUpperCase(),d=a=>{const t=a.split(/\s+/),s=t.at(0),e=t.at(-1);return t.length>=2&&s&&e?`${o(s)}${o(e)}`:o(a)},c=class{constructor(t){a(this,t),this._src=void 0,this._label=void 0,this.state={_src:"",_label:""}}render(){return t(s,{key:"672b71c600e54214bbaf86210fe439af3f187c83",class:"kol-avatar-wc"},t("div",{key:"8631bb174ac54c1677149d12979f6837dddd692d","aria-label":r("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"container",role:"img"},this.state._src?t("img",{alt:"","aria-hidden":"true",class:"image",src:this.state._src}):t("span",{"aria-hidden":"true",class:"initials"},d(this.state._label.trim()))))}validateSrc(a){e(this,a)}validateLabel(a){i(this,a,{required:!0})}componentWillLoad(){this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_src:["validateSrc"],_label:["validateLabel"]}}};export{c as kol_avatar_wc};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-360ad69b.js";import{c as i,f as o}from"./component-names-e522484e.js";import{n as a}from"./dev.utils-eeeb0158.js";import{h as s,v as l}from"./color-e0b3e0c8.js";import{f as r,o as d,p as h,s as c}from"./prop.validators-f2b9a155.js";import"./dev.utils-1ca991a2.js";import"./reuse-b66836de.js";import"./index-db4aa6e4.js";const u="/*\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}",p=u;r("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const b=class{constructor(t){n(this,t),this.bgColorStr="#000",this.colorStr="#fff",this.id=a(),this.handleColorChange=n=>{const t=s(n);this.bgColorStr=t.backgroundColor,this.colorStr=t.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 e(i,{_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 e(t,{key:"0b334746c26463bbc697f08077e165e56b34a97f",class:"kol-badge"},e("span",{key:"83210f467b224cb691d844a0311f4a31a1ad6e79",class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},e(o,{key:"d5a3248d67baa494d9671e0da7de918511af084b",id:n?this.id:void 0,_allowMarkdown:!0,_icons:this._icons,_label:this._label}),n&&this.renderSmartButton(this.state._smartButton)))}validateColor(n){l(this,n,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(n){d(n,(()=>{try{n=h(n)}catch(n){}c(this,"_smartButton",n)}))}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}};b.style={default:p};export{b as kol_badge};
+import{r as n,h as e,H as t}from"./index-360ad69b.js";import{c as i,f as o}from"./component-names-e522484e.js";import{n as a}from"./dev.utils-698b2d79.js";import{h as s,v as l}from"./color-1d05d57c.js";import{f as r,o as d,p as h,s as c}from"./prop.validators-f2b9a155.js";import"./reuse-b66836de.js";import"./dev.utils-1ca991a2.js";import"./index-db4aa6e4.js";const u="/*\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}",p=u;r("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const b=class{constructor(t){n(this,t),this.bgColorStr="#000",this.colorStr="#fff",this.id=a(),this.handleColorChange=n=>{const t=s(n);this.bgColorStr=t.backgroundColor,this.colorStr=t.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 e(i,{_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 e(t,{key:"0b334746c26463bbc697f08077e165e56b34a97f",class:"kol-badge"},e("span",{key:"83210f467b224cb691d844a0311f4a31a1ad6e79",class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},e(o,{key:"d5a3248d67baa494d9671e0da7de918511af084b",id:n?this.id:void 0,_allowMarkdown:!0,_icons:this._icons,_label:this._label}),n&&this.renderSmartButton(this.state._smartButton)))}validateColor(n){l(this,n,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(n){d(n,(()=>{try{n=h(n)}catch(n){}c(this,"_smartButton",n)}))}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}};b.style={default:p};export{b as kol_badge};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,F as t,H as i}from"./index-360ad69b.js";import{r as a,a as o}from"./unique-nav-labels-62d9802d.js";import{w as s}from"./validation-3f609300.js";import{g as l,h as r}from"./component-names-e522484e.js";import{e as d}from"./prop.validators-f2b9a155.js";import{v as h}from"./label-452f8c01.js";import"./index-db4aa6e4.js";import"./dev.utils-1ca991a2.js";const c="/*\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}",b=c,p=class{constructor(i){n(this,i),this.renderLink=(n,i)=>{const a=this.state._links.length-1;return e("li",{key:i},0!==i&&e(l,{_label:"",_icons:"codicon codicon-chevron-right"}),i===a?e("span",null,n._hideLabel?e(l,{_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):e(t,null,n._label)):e(r,Object.assign({},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return e(i,{key:"1cfa36fa9a381d7b470854ec4a550b54817e37d6",class:"kol-breadcrumb"},e("nav",{key:"d913f0b8853e65302801b62abb9ee1a7911ba264","aria-label":this.state._label},e("ul",{key:"9719d99bcfedb925e819b0abf14977692fdabc76"},0===this.state._links.length&&e("li",{key:"1681efdfcdb0eb6d31fe0baf14efa89208ef04e9"},e(l,{key:"21f1969a164aaa85d48a8e985e2e788be10a5135",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(n,e,t=!1){t||a(this.state._label),h(this,n,{required:!0}),d(n),o(this.state._label)}validateLinks(n){s("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){a(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};p.style={default:b};export{p as kol_breadcrumb};
+import{r as n,h as e,F as t,H as i}from"./index-360ad69b.js";import{r as a,a as o}from"./unique-nav-labels-29aef441.js";import{w as s}from"./validation-3f609300.js";import{g as l,h as r}from"./component-names-e522484e.js";import{e as d}from"./prop.validators-f2b9a155.js";import{v as h}from"./label-452f8c01.js";import"./dev.utils-1ca991a2.js";import"./index-db4aa6e4.js";const c="/*\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}",b=c,p=class{constructor(i){n(this,i),this.renderLink=(n,i)=>{const a=this.state._links.length-1;return e("li",{key:i},0!==i&&e(l,{_label:"",_icons:"codicon codicon-chevron-right"}),i===a?e("span",null,n._hideLabel?e(l,{_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):e(t,null,n._label)):e(r,Object.assign({},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return e(i,{key:"1cfa36fa9a381d7b470854ec4a550b54817e37d6",class:"kol-breadcrumb"},e("nav",{key:"d913f0b8853e65302801b62abb9ee1a7911ba264","aria-label":this.state._label},e("ul",{key:"9719d99bcfedb925e819b0abf14977692fdabc76"},0===this.state._links.length&&e("li",{key:"1681efdfcdb0eb6d31fe0baf14efa89208ef04e9"},e(l,{key:"21f1969a164aaa85d48a8e985e2e788be10a5135",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(n,e,t=!1){t||a(this.state._label),h(this,n,{required:!0}),d(n),o(this.state._label)}validateLinks(n){s("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){a(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};p.style={default:b};export{p as kol_breadcrumb};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t,g as i}from"./index-360ad69b.js";import{c as o}from"./component-names-e522484e.js";import{a as s}from"./reuse-b66836de.js";const a="/*\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: underline;\n  }\n  a:is(:focus, :hover):not([aria-disabled]),\n  button:is(:focus, :hover):not([disabled]) {\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}",l=a,d=class{constructor(e){n(this,e),this.catchRef=n=>{s(this.host,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}render(){return e(t,{key:"bcca14709dca36d36884f1bda80d249ef151cf03",class:"kol-button-link"},e(o,{key:"1601a8be9c9c8c85cb776f95aa3981ccc388d978",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},e("slot",{key:"dd476ba7cf6a6d3b08553cc7490ee51d4f08fff0",name:"expert",slot:"expert"})))}get host(){return i(this)}};d.style={default:l};export{d as kol_button_link};
+import{r as n,h as e,H as t,g as i}from"./index-360ad69b.js";import{c as o}from"./component-names-e522484e.js";import{a as s}from"./reuse-b66836de.js";const a="/*\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}",l=a,d=class{constructor(e){n(this,e),this.catchRef=n=>{s(this.host,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}render(){return e(t,{key:"bcca14709dca36d36884f1bda80d249ef151cf03",class:"kol-button-link"},e(o,{key:"1601a8be9c9c8c85cb776f95aa3981ccc388d978",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},e("slot",{key:"dd476ba7cf6a6d3b08553cc7490ee51d4f08fff0",name:"expert",slot:"expert"})))}get host(){return i(this)}};d.style={default:l};export{d as kol_button_link};

package/dist/kolibri/kol-button-link.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolButtonLinkDefaultStyle0","KolButtonLink","this","catchRef","ref","propagateFocus","host","getValue","_value","render","h","Host","key","class","KolButtonWcTag","_accessKey","_ariaControls","_ariaExpanded","_ariaSelected","_disabled","_icons","_hideLabel","_id","_label","_name","_on","_role","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","name","slot"],"sources":["src/components/button-link/style.scss?tag=kol-button-link&mode=default&encapsulation=shadow","src/components/button-link/shadow.tsx"],"sourcesContent":["@import '../link';\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tButtonCallbacksPropType,\n\tButtonLinkProps,\n\tButtonTypePropType,\n\tIconsPropType,\n\tIdPropType,\n\tLabelWithExpertSlotPropType,\n\tNamePropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { propagateFocus } from '../../schema';\nimport { Component, Element, h, Host, Method, Prop } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolButtonLink implements ButtonLinkProps {\n\t@Element() private readonly host?: HTMLKolButtonLinkElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<Stringified<StencilUnknown> | undefined> {\n\t\treturn this._value;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-button-link\">\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role=\"link\"\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolButtonWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the elements access key.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t * @TODO: Change type back to `AriaExpandedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t * @TODO: Change type back to `AriaSelectedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n}\n"],"mappings":";;;uJAAA,MAAMA,EAAkB,2sJACxB,MAAAC,EAAeD,E,MC0BFE,EAAa,M,yBAGRC,KAAAC,SAAYC,IAC5BC,EAAeH,KAAKI,KAAMF,EAAI,E,gIAgEM,M,gBAOC,M,4MA8CgB,M,WAKV,S,sBArHrC,cAAMG,GACZ,OAAOL,KAAKM,M,CAGN,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,mBACXH,EAACI,EAAc,CAAAF,IAAA,2CACdR,IAAKF,KAAKC,SACVY,WAAYb,KAAKa,WACjBC,cAAed,KAAKc,cACpBC,cAAef,KAAKe,cACpBC,cAAehB,KAAKgB,cACpBC,UAAWjB,KAAKiB,UAChBC,OAAQlB,KAAKkB,OACbC,WAAYnB,KAAKmB,WACjBC,IAAKpB,KAAKoB,IACVC,OAAQrB,KAAKqB,OACbC,MAAOtB,KAAKsB,MACZC,IAAKvB,KAAKuB,IACVC,MAAM,OACNC,qBAAsBzB,KAAKyB,qBAC3BC,UAAW1B,KAAK0B,UAChBC,cAAe3B,KAAK2B,cACpBC,MAAO5B,KAAK4B,MACZtB,OAAQN,KAAKM,QAEbE,EAAA,QAAAE,IAAA,2CAAMmB,KAAK,SAASC,KAAK,Y","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolButtonLinkDefaultStyle0","KolButtonLink","this","catchRef","ref","propagateFocus","host","getValue","_value","render","h","Host","key","class","KolButtonWcTag","_accessKey","_ariaControls","_ariaExpanded","_ariaSelected","_disabled","_icons","_hideLabel","_id","_label","_name","_on","_role","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","name","slot"],"sources":["src/components/button-link/style.scss?tag=kol-button-link&mode=default&encapsulation=shadow","src/components/button-link/shadow.tsx"],"sourcesContent":["@import '../link';\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tButtonCallbacksPropType,\n\tButtonLinkProps,\n\tButtonTypePropType,\n\tIconsPropType,\n\tIdPropType,\n\tLabelWithExpertSlotPropType,\n\tNamePropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { propagateFocus } from '../../schema';\nimport { Component, Element, h, Host, Method, Prop } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolButtonLink implements ButtonLinkProps {\n\t@Element() private readonly host?: HTMLKolButtonLinkElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<Stringified<StencilUnknown> | undefined> {\n\t\treturn this._value;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-button-link\">\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role=\"link\"\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolButtonWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the elements access key.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t * @TODO: Change type back to `AriaExpandedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t * @TODO: Change type back to `AriaSelectedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n}\n"],"mappings":";;;uJAAA,MAAMA,EAAkB,g1JACxB,MAAAC,EAAeD,E,MC0BFE,EAAa,M,yBAGRC,KAAAC,SAAYC,IAC5BC,EAAeH,KAAKI,KAAMF,EAAI,E,gIAgEM,M,gBAOC,M,4MA8CgB,M,WAKV,S,sBArHrC,cAAMG,GACZ,OAAOL,KAAKM,M,CAGN,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,mBACXH,EAACI,EAAc,CAAAF,IAAA,2CACdR,IAAKF,KAAKC,SACVY,WAAYb,KAAKa,WACjBC,cAAed,KAAKc,cACpBC,cAAef,KAAKe,cACpBC,cAAehB,KAAKgB,cACpBC,UAAWjB,KAAKiB,UAChBC,OAAQlB,KAAKkB,OACbC,WAAYnB,KAAKmB,WACjBC,IAAKpB,KAAKoB,IACVC,OAAQrB,KAAKqB,OACbC,MAAOtB,KAAKsB,MACZC,IAAKvB,KAAKuB,IACVC,MAAM,OACNC,qBAAsBzB,KAAKyB,qBAC3BC,UAAW1B,KAAK0B,UAChBC,cAAe3B,KAAK2B,cACpBC,MAAO5B,KAAK4B,MACZtB,OAAQN,KAAKM,QAEbE,EAAA,QAAAE,IAAA,2CAAMmB,KAAK,SAASC,KAAK,Y","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as i,r as s,g as e}from"./index-360ad69b.js";import{s as a,t as o}from"./events-29e84d75.js";import{p as d,a as h}from"./controller-f204bd94.js";import{A as l}from"./associated.controller-ad89c814.js";import{a as n,f as r}from"./component-names-e522484e.js";import{i as c,b as f,w as u,x as v,y as b,q as m,s as p}from"./prop.validators-f2b9a155.js";import{v as _}from"./access-key-e22ec35a.js";import{v as y}from"./icons-9784d978.js";import{v as j}from"./alternative-button-link-role-435f91d3.js";import{s as g,a as x}from"./reuse-b66836de.js";import{v as k}from"./custom-class-9daf0e87.js";import{v as A}from"./disabled-7ce039e2.js";import{v as C}from"./hide-label-f5e03637.js";import{a as S}from"./label-452f8c01.js";import{v as w}from"./tab-index-bffbd9f3.js";import{v as V}from"./tooltip-align-676fe651.js";import"./dev.utils-1ca991a2.js";import"./index-db4aa6e4.js";import"./align-6595a6d6.js";const B=(t,a)=>{c(t,"_ariaControls",a)},I=(t,a)=>{f(t,"_ariaExpanded",a)},K=(t,a)=>{f(t,"_ariaSelected",a)},T=(t,a)=>{u(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),a)},L=["button","reset","submit"],E=(t,a)=>{u(t,"_type",(t=>"string"==typeof t&&L.includes(t)),new Set([`KoliBriButtonType {${L.join(", ")}`]),a)},D=["primary","secondary","normal","tertiary","danger","ghost","custom"],H=(t,a)=>{u(t,"_variant",(t=>"string"==typeof t&&D.includes(t)),new Set([`KoliBriButtonVariant {${D.join(", ")}`]),a,{defaultValue:"normal"})},O=class{render(){const a=g(this.state._label);return t(i,{key:"c0d16e55ccda6586451460ed73035afc5094a20c",class:"kol-button-wc"},t("button",Object.assign({key:"6ee3c6aa4c7eb2870b69369ae303b344f9243615",ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-expanded":v(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":b(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}),t(r,{key:"89e898b52482ab8f2b991ee630d3c01eba2c5673",class:"button-inner",_accessKey:this.state._accessKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:a?"":this.state._label},t("slot",{key:"c7f11890216223942c6adea500e5904409877564",name:"expert",slot:"expert"}))),t(n,{key:"31d7ab91f54a8046442ffdb435f55cb4681d1b32","aria-hidden":"true",hidden:a||!this.state._hideLabel,_accessKey:this._accessKey,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))}constructor(t){s(this,t),this.catchRef=t=>{this.ref=t,x(this.host,this.ref)},this.onClick=t=>{var e,s;"submit"===this.state._type?d({form:this.host,ref:this.ref}):"reset"===this.state._type?h({form:this.host,ref:this.ref}):(a(t),o("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)&&(m(t,this.ref),null===(s=this.state._on)||void 0===s||s.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 l(this,"button",this.host)}validateAccessKey(t){_(this,t)}validateAriaControls(t){B(this,t)}validateAriaExpanded(t){I(this,t)}validateAriaSelected(t){K(this,t)}validateCustomClass(t){k(this,t)}validateDisabled(t){A(this,t)}validateHideLabel(t){C(this,t)}validateIcons(t){y(this,t)}validateId(t){c(this,"_id",t)}validateLabel(t){S(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){T(this,t)}validateRole(t){j(this,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){w(this,t)}validateTooltipAlign(t){V(this,t)}validateType(t){E(this,t)}validateValue(t){p(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){H(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 e(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"]}}};export{O as kol_button_wc};
+import{h as t,H as i,r as s,g as e}from"./index-360ad69b.js";import{s as a,t as o}from"./events-29e84d75.js";import{p as d,a as h}from"./controller-b76f9bb2.js";import{A as l}from"./associated.controller-ad89c814.js";import{a as n,f as r}from"./component-names-e522484e.js";import{i as c,b as f,w as u,x as v,y as b,q as m,s as p}from"./prop.validators-f2b9a155.js";import{v as _}from"./access-key-e22ec35a.js";import{v as y}from"./icons-9784d978.js";import{v as j}from"./alternative-button-link-role-435f91d3.js";import{s as g,a as x}from"./reuse-b66836de.js";import{v as k}from"./custom-class-9daf0e87.js";import{v as A}from"./disabled-7ce039e2.js";import{v as C}from"./hide-label-f5e03637.js";import{a as S}from"./label-452f8c01.js";import{v as w}from"./tab-index-bffbd9f3.js";import{v as V}from"./tooltip-align-676fe651.js";import"./dev.utils-1ca991a2.js";import"./index-db4aa6e4.js";import"./align-6595a6d6.js";const B=(t,a)=>{c(t,"_ariaControls",a)},I=(t,a)=>{f(t,"_ariaExpanded",a)},K=(t,a)=>{f(t,"_ariaSelected",a)},T=(t,a)=>{u(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),a)},L=["button","reset","submit"],E=(t,a)=>{u(t,"_type",(t=>"string"==typeof t&&L.includes(t)),new Set([`KoliBriButtonType {${L.join(", ")}`]),a)},D=["primary","secondary","normal","tertiary","danger","ghost","custom"],H=(t,a)=>{u(t,"_variant",(t=>"string"==typeof t&&D.includes(t)),new Set([`KoliBriButtonVariant {${D.join(", ")}`]),a,{defaultValue:"normal"})},O=class{render(){const a=g(this.state._label);return t(i,{key:"c0d16e55ccda6586451460ed73035afc5094a20c",class:"kol-button-wc"},t("button",Object.assign({key:"6ee3c6aa4c7eb2870b69369ae303b344f9243615",ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-expanded":v(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":b(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}),t(r,{key:"89e898b52482ab8f2b991ee630d3c01eba2c5673",class:"button-inner",_accessKey:this.state._accessKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:a?"":this.state._label},t("slot",{key:"c7f11890216223942c6adea500e5904409877564",name:"expert",slot:"expert"}))),t(n,{key:"31d7ab91f54a8046442ffdb435f55cb4681d1b32","aria-hidden":"true",hidden:a||!this.state._hideLabel,_accessKey:this._accessKey,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))}constructor(t){s(this,t),this.catchRef=t=>{this.ref=t,x(this.host,this.ref)},this.onClick=t=>{var e,s;"submit"===this.state._type?d({form:this.host,ref:this.ref}):"reset"===this.state._type?h({form:this.host,ref:this.ref}):(a(t),o("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)&&(m(t,this.ref),null===(s=this.state._on)||void 0===s||s.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 l(this,"button",this.host)}validateAccessKey(t){_(this,t)}validateAriaControls(t){B(this,t)}validateAriaExpanded(t){I(this,t)}validateAriaSelected(t){K(this,t)}validateCustomClass(t){k(this,t)}validateDisabled(t){A(this,t)}validateHideLabel(t){C(this,t)}validateIcons(t){y(this,t)}validateId(t){c(this,"_id",t)}validateLabel(t){S(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){T(this,t)}validateRole(t){j(this,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){w(this,t)}validateTooltipAlign(t){V(this,t)}validateType(t){E(this,t)}validateValue(t){p(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){H(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 e(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"]}}};export{O as kol_button_wc};

package/dist/kolibri/kol-card.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-360ad69b.js";import{t as i}from"./i18n-342bc196.js";import{w as o}from"./validation-00baa068.js";import{b as a,c as s}from"./component-names-e522484e.js";import{v as l}from"./has-closer-b81b200a.js";import{s as r}from"./prop.validators-f2b9a155.js";import{v as d}from"./label-452f8c01.js";import"./i18n-ebe0c4cb.js";import"./reuse-b66836de.js";import"./index-db4aa6e4.js";import"./dev.utils-1ca991a2.js";const h="/*\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 > div.card {\n    height: 100%;\n    position: relative;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n  }\n  .close {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n}",c=h,b=class{constructor(e){n(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._on=void 0,this._hasCloser=!1,this._label=void 0,this._level=1,this.state={_label:""}}render(){return e(t,{key:"6a075e6c225c33dbfab5bbc6e78751eb1a2ee474",class:"kol-card"},e("div",{key:"a3aee1a0c51e4aadd5bab63252686a9adfa7cfb6",class:"card"},e("div",{key:"1f73f4e0302ba9bb5b7fb5e0cbc6b00e7a3abdde",class:"header"},e(a,{key:"0d077a8431e89744ed58c51d5e645f445e009169",_label:this.state._label,_level:this.state._level})),e("div",{key:"aef0ace6767b8978efd6a14967d51808660cdcad",class:"content"},e("slot",{key:"7fe022672f6e418364f63cb0a72dfbed09207c8e"})),this.state._hasCloser&&e(s,{key:"ff59bb6a947d9d435f4c2a2cf968daa5064ec2d3",class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:i("kol-close"),_on:this.on,_tooltipAlign:"left"})))}validateOn(e){this.validateOnValue(e)&&r(this,"_on",{onClose:e.onClose})}validateHasCloser(e){l(this,e)}validateLabel(e){d(this,e,{required:!0})}validateLevel(e){o(this,e)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}}};b.style={default:c};export{b as kol_card};
+import{r as n,h as e,H as t}from"./index-360ad69b.js";import{t as i}from"./i18n-112381e9.js";import{w as o}from"./validation-00baa068.js";import{b as a,c as s}from"./component-names-e522484e.js";import{v as l}from"./has-closer-b81b200a.js";import{s as r}from"./prop.validators-f2b9a155.js";import{v as d}from"./label-452f8c01.js";import"./i18n-66b52d13.js";import"./reuse-b66836de.js";import"./index-db4aa6e4.js";import"./dev.utils-1ca991a2.js";const h="/*\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 > div.card {\n    height: 100%;\n    position: relative;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n  }\n  .close {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n}",c=h,b=class{constructor(e){n(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._on=void 0,this._hasCloser=!1,this._label=void 0,this._level=1,this.state={_label:""}}render(){return e(t,{key:"6a075e6c225c33dbfab5bbc6e78751eb1a2ee474",class:"kol-card"},e("div",{key:"a3aee1a0c51e4aadd5bab63252686a9adfa7cfb6",class:"card"},e("div",{key:"1f73f4e0302ba9bb5b7fb5e0cbc6b00e7a3abdde",class:"header"},e(a,{key:"0d077a8431e89744ed58c51d5e645f445e009169",_label:this.state._label,_level:this.state._level})),e("div",{key:"aef0ace6767b8978efd6a14967d51808660cdcad",class:"content"},e("slot",{key:"7fe022672f6e418364f63cb0a72dfbed09207c8e"})),this.state._hasCloser&&e(s,{key:"ff59bb6a947d9d435f4c2a2cf968daa5064ec2d3",class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:i("kol-close"),_on:this.on,_tooltipAlign:"left"})))}validateOn(e){this.validateOnValue(e)&&r(this,"_on",{onClose:e.onClose})}validateHasCloser(e){l(this,e)}validateLabel(e){d(this,e,{required:!0})}validateLevel(e){o(this,e)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}}};b.style={default:c};export{b as kol_card};

package/dist/kolibri/kol-combobox.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as e,F as t,H as n,r as i,g as s}from"./index-360ad69b.js";import{n as a}from"./dev.utils-eeeb0158.js";import{s as o,t as l}from"./events-29e84d75.js";import{I as r}from"./controller-icon-a494ea46.js";import{v as d}from"./suggestions-602b6090.js";import{b as h,i as c}from"./prop.validators-f2b9a155.js";import{v as p,g as u}from"./controller-a8e66789.js";import{l as b,g as f}from"./component-names-e522484e.js";import{I as m}from"./InternalUnderlinedAccessKey-d35d1ac0.js";import{t as y}from"./i18n-342bc196.js";import{s as v}from"./reuse-b66836de.js";import"./dev.utils-1ca991a2.js";import"./icons-9784d978.js";import"./index-db4aa6e4.js";import"./associated.controller-ad89c814.js";import"./hide-label-f5e03637.js";import"./label-452f8c01.js";import"./tab-index-bffbd9f3.js";import"./tooltip-align-676fe651.js";import"./align-6595a6d6.js";import"./i18n-ebe0c4cb.js";class g extends r{constructor(e,t,i){super(e,t,i),this.component=e}validateSuggestions(e){d(this.component,e)}validateRequired(e){h(this.component,"_required",e)}validateValue(e){c(this.component,"_value",e)}validateMsg(e){p(this.component,e)}validatePlaceholder(e){c(this.component,"_placeholder",e)}componentWillLoad(){super.componentWillLoad(),this.validateSuggestions(this.component._suggestions),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder)}}const k="/*\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  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox {\n    position: relative;\n  }\n  .combobox.disabled, .combobox.disabled * {\n    cursor: not-allowed !important;\n  }\n  .combobox.disabled {\n    opacity: 0.5;\n    outline: none;\n  }\n  .combobox__group {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  .combobox__input {\n    flex-grow: 1;\n  }\n  .combobox__listbox {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n}",x=k,w=class{async getValue(){return this._value}selectOption(e){this.state._value=e}onInput(e){const t=e.target;this._value=t.value,this.setFilteredSuggestionsByQuery(t.value)}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredSuggestionsByQuery(e){""===e.trim()?this._filteredSuggestions=[...this._suggestions]:(this._filteredSuggestions=this._suggestions.filter((t=>t.toLowerCase().includes(e.toLowerCase()))),this._isOpen=this._filteredSuggestions&&this._filteredSuggestions.length>0)}moveFocus(e){if(console.log(this._focusedOptionIndex),!this._filteredSuggestions)return;let t=this._focusedOptionIndex+e;t>=this._filteredSuggestions.length&&(t=0),t<0&&(t=this._filteredSuggestions.length-1),this._focusedOptionIndex=t,this.focusOption(this._focusedOptionIndex)}focusOption(e){if(this.refSuggestions){const t=this.refSuggestions[e];null==t||t.focus(),this._value=t.textContent||""}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),i=Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.findIndex((e=>e.toLowerCase().startsWith(t)));"number"==typeof i&&(this._focusedOptionIndex=i,this.focusOption(i))}render(){const i=v(this.state._label),{ariaDescribedBy:s}=u(this.state);return e(n,{key:"1af2b8f8c476758f027d42cf7e6416b9d6c3ae12",class:"kol-combobox"},e("div",{key:"c9d69c60e32ab7d7fe200573633c4da7b5998df7",class:`combobox ${!0===this.state._disabled?"disabled":""} `},e(b,{key:"1c6606677208f5f52574d313fe8713d8cbe997b8",_accessKey:this.state._accessKey,_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.ref)||void 0===e?void 0:e.focus()},role:"presentation"},e("span",{key:"a1a8ec632be8e3762a541c24ce222bdf8322f51a",slot:"label"},i?e("slot",{name:"expert"}):"string"==typeof this.state._accessKey?e(t,null,e(m,{accessKey:this.state._accessKey,label:this.state._label})," ",e("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):e("span",null,this.state._label)),e("div",{key:"279f24fdddbbaa57ccf9bcfb37d443f5d8b1fc77",slot:"input"},e("div",{key:"b910a87bcba22d01e9bdfec5fcfd3df615118052",class:"combobox__group"},e("input",Object.assign({key:"dbc9ba00e3ca432b4c7d5b06d24df573b682548d",class:"combobox__input",type:"text",role:"combobox","aria-autocomplete":"both","aria-expanded":this._isOpen?"true":"false","aria-controls":"listbox",value:this.state._value,accessKey:this.state._accessKey,"aria-describedby":s.length>0?s.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-labelledby":this.state._id,"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,name:this.state._name,required:this.state._required,spellcheck:"false"},this.controller.onFacade,{onInput:this.onInput.bind(this),onClick:this.toggleListbox.bind(this),onChange:this.onChange.bind(this),placeholder:this.state._placeholder})),e("span",{key:"7b93670b4bb63730fc7411579bdc8ed0c6d9bdc5",class:{combobox__icon:!0}},e(f,{key:"c555963b3e56c67932e81df6e3ad7502c86bc232",_icons:"codicon codicon-triangle-down",_label:y("kol-dropdown"),onClick:this.toggleListbox.bind(this)}))),this._isOpen&&!(!0===this.state._disabled)&&e("ul",{key:"ac189288aa30581c45bc1d7b4fc0d49353755c7c",role:"listbox","aria-label":"",class:{combobox__listbox:!0},onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.map(((t,i)=>e("li",{id:`option-${i}`,key:`-${i}`,ref:e=>{e&&(this.refSuggestions[i]=e)},"data-index":i,tabIndex:0,role:"option","aria-selected":this.state._value===t,onClick:()=>{this.selectOption(t),this.toggleListbox()},class:"combobox__item",onKeyDown:e=>{"Enter"!==e.key&&"NumpadEnter"!==e.key||(this.selectOption(t),e.preventDefault())}},t))))))))}handleKeyDown(e){const t=(t,i)=>{e.preventDefault(),void 0!==t&&(this._isOpen=t),null==i||i()};switch(e.key){case"Down":case"ArrowDown":t(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":t(!0,(()=>this.moveFocus(-1)));break;case"Esc":case"Escape":t(!1);break;case"NumpadEnter":case"Enter":this.toggleListbox();break;case"Home":t(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))}));break;case"End":t(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredSuggestions?this._filteredSuggestions.length-1:0,this.focusOption(this._focusedOptionIndex))}));break;case"PageUp":t(void 0,(()=>this._isOpen&&this.moveFocus(10)));break;case"PageDown":t(void 0,(()=>this._isOpen&&this.moveFocus(-10)))}}handleWindowClick(e){null==this.host||this.host.contains(e.target)||(this._isOpen=!1)}constructor(e){i(this,e),this.refSuggestions=[],this.toggleListbox=()=>{if(!0===this.state._disabled)this._isOpen=!1;else if(this._isOpen=!this._isOpen,this._isOpen&&Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0){const e=this._filteredSuggestions.findIndex((e=>e===this._value));this._focusedOptionIndex=e>=0?e:0,this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._filteredSuggestions=void 0,this._accessKey=void 0,this._placeholder=void 0,this._alert=!0,this._disabled=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._suggestions=void 0,this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${a()}`,_label:"",_suggestions:[],_value:""},this.controller=new g(this,"select",this.host),this.onInput=this.onInput.bind(this)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this.refSuggestions=[],this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e)),this._filteredSuggestions=this.state._suggestions}onChange(e){var t;o(e),l("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)&&this.state._on.onChange(e,this._value)}get host(){return s(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_suggestions:["validateSuggestions"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};w.style={default:x};export{w as kol_combobox};
+import{h as e,F as t,H as n,r as i,g as s}from"./index-360ad69b.js";import{n as a}from"./dev.utils-698b2d79.js";import{s as o,t as l}from"./events-29e84d75.js";import{I as r}from"./controller-icon-a494ea46.js";import{v as d}from"./suggestions-602b6090.js";import{b as h,i as c}from"./prop.validators-f2b9a155.js";import{v as p,g as u}from"./controller-a8e66789.js";import{l as b,g as f}from"./component-names-e522484e.js";import{I as m}from"./InternalUnderlinedAccessKey-d35d1ac0.js";import{t as y}from"./i18n-112381e9.js";import{s as v}from"./reuse-b66836de.js";import"./dev.utils-1ca991a2.js";import"./icons-9784d978.js";import"./index-db4aa6e4.js";import"./associated.controller-ad89c814.js";import"./hide-label-f5e03637.js";import"./label-452f8c01.js";import"./tab-index-bffbd9f3.js";import"./tooltip-align-676fe651.js";import"./align-6595a6d6.js";import"./i18n-66b52d13.js";class g extends r{constructor(e,t,i){super(e,t,i),this.component=e}validateSuggestions(e){d(this.component,e)}validateRequired(e){h(this.component,"_required",e)}validateValue(e){c(this.component,"_value",e)}validateMsg(e){p(this.component,e)}validatePlaceholder(e){c(this.component,"_placeholder",e)}componentWillLoad(){super.componentWillLoad(),this.validateSuggestions(this.component._suggestions),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder)}}const k="/*\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  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox {\n    position: relative;\n  }\n  .combobox.disabled, .combobox.disabled * {\n    cursor: not-allowed !important;\n  }\n  .combobox.disabled {\n    opacity: 0.5;\n    outline: none;\n  }\n  .combobox__group {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  .combobox__input {\n    flex-grow: 1;\n  }\n  .combobox__listbox {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n}",x=k,w=class{async getValue(){return this._value}selectOption(e){this.state._value=e}onInput(e){const t=e.target;this._value=t.value,this.setFilteredSuggestionsByQuery(t.value)}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredSuggestionsByQuery(e){""===e.trim()?this._filteredSuggestions=[...this._suggestions]:(this._filteredSuggestions=this._suggestions.filter((t=>t.toLowerCase().includes(e.toLowerCase()))),this._isOpen=this._filteredSuggestions&&this._filteredSuggestions.length>0)}moveFocus(e){if(!this._filteredSuggestions)return;let t=this._focusedOptionIndex+e;t>=this._filteredSuggestions.length&&(t=0),t<0&&(t=this._filteredSuggestions.length-1),this._focusedOptionIndex=t,this.focusOption(this._focusedOptionIndex)}focusOption(e){if(this.refSuggestions){const t=this.refSuggestions[e];null==t||t.focus(),this._value=t.textContent||""}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),i=Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.findIndex((e=>e.toLowerCase().startsWith(t)));"number"==typeof i&&(this._focusedOptionIndex=i,this.focusOption(i))}render(){const i=v(this.state._label),{ariaDescribedBy:s}=u(this.state);return e(n,{key:"704090cd2a268049146c3beb049a6b7c31f20489",class:"kol-combobox"},e("div",{key:"274df37ac0efd60063add6442119417815237090",class:`combobox ${!0===this.state._disabled?"disabled":""} `},e(b,{key:"a208f04cd5a3b8a77b3fef2cde01b6ee60c787d9",_accessKey:this.state._accessKey,_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.ref)||void 0===e?void 0:e.focus()},role:"presentation"},e("span",{key:"2fe387ffa8d894ecd48e86d3477f3ad0bc5ca8c2",slot:"label"},i?e("slot",{name:"expert"}):"string"==typeof this.state._accessKey?e(t,null,e(m,{accessKey:this.state._accessKey,label:this.state._label})," ",e("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):e("span",null,this.state._label)),e("div",{key:"52c6eb36e536839e87bce8f2142ecaa99a878619",slot:"input"},e("div",{key:"40ad24ed304eda6677585902534fc3ffc9a5a6b9",class:"combobox__group"},e("input",Object.assign({key:"c98bee5037381d8fcc85f5f5b2c2f2baa3edf7ee",class:"combobox__input",type:"text",role:"combobox","aria-autocomplete":"both","aria-expanded":this._isOpen?"true":"false","aria-controls":"listbox",value:this.state._value,accessKey:this.state._accessKey,"aria-describedby":s.length>0?s.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-labelledby":this.state._id,"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,name:this.state._name,required:this.state._required,spellcheck:"false"},this.controller.onFacade,{onInput:this.onInput.bind(this),onClick:this.toggleListbox.bind(this),onChange:this.onChange.bind(this),placeholder:this.state._placeholder})),e("span",{key:"0dea84633da8b79af3e5edd65987a57a99ec15d4",class:{combobox__icon:!0}},e(f,{key:"ed839aa136a761c491aef51e8c8ab4770d922824",_icons:"codicon codicon-triangle-down",_label:y("kol-dropdown"),onClick:this.toggleListbox.bind(this)}))),this._isOpen&&!(!0===this.state._disabled)&&e("ul",{key:"7fae643dfa418239be55b2b2f754ce4de38e0cdb",role:"listbox","aria-label":"",class:{combobox__listbox:!0},onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.map(((t,i)=>e("li",{id:`option-${i}`,key:`-${i}`,ref:e=>{e&&(this.refSuggestions[i]=e)},"data-index":i,tabIndex:0,role:"option","aria-selected":this.state._value===t,onClick:()=>{this.selectOption(t),this.toggleListbox()},class:"combobox__item",onKeyDown:e=>{"Enter"!==e.key&&"NumpadEnter"!==e.key||(this.selectOption(t),e.preventDefault())}},t))))))))}handleKeyDown(e){const t=(t,i)=>{e.preventDefault(),void 0!==t&&(this._isOpen=t),null==i||i()};switch(e.key){case"Down":case"ArrowDown":t(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":t(!0,(()=>this.moveFocus(-1)));break;case"Esc":case"Escape":t(!1);break;case"NumpadEnter":case"Enter":this.toggleListbox();break;case"Home":t(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))}));break;case"End":t(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredSuggestions?this._filteredSuggestions.length-1:0,this.focusOption(this._focusedOptionIndex))}));break;case"PageUp":t(void 0,(()=>this._isOpen&&this.moveFocus(10)));break;case"PageDown":t(void 0,(()=>this._isOpen&&this.moveFocus(-10)))}}handleWindowClick(e){null==this.host||this.host.contains(e.target)||(this._isOpen=!1)}constructor(e){i(this,e),this.refSuggestions=[],this.toggleListbox=()=>{if(!0===this.state._disabled)this._isOpen=!1;else if(this._isOpen=!this._isOpen,this._isOpen&&Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0){const e=this._filteredSuggestions.findIndex((e=>e===this._value));this._focusedOptionIndex=e>=0?e:0,this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._filteredSuggestions=void 0,this._accessKey=void 0,this._placeholder=void 0,this._alert=!0,this._disabled=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._suggestions=void 0,this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${a()}`,_label:"",_suggestions:[],_value:""},this.controller=new g(this,"select",this.host),this.onInput=this.onInput.bind(this)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this.refSuggestions=[],this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e)),this._filteredSuggestions=this.state._suggestions}onChange(e){var t;o(e),l("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)&&this.state._on.onChange(e,this._value)}get host(){return s(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_suggestions:["validateSuggestions"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};w.style={default:x};export{w as kol_combobox};