@public-ui/components 2.1.8 → 2.1.9-rc.0

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

@@ -1 +1 @@
-{"version":3,"names":["alertTypeOptions","alertVariantOptions","Icon","props","h","KolIconTag","class","_label","label","length","ariaLabel","_icons","icon","AlertIcon","type","translate","KolAlertWc","this","close","_a","_on","onClose","undefined","Event","on","onClick","validateOnValue","value","_level","render","state","_alert","Log","debug","navigator","vibrate","e","setTimeout","validateAlert","Host","key","alert","_type","_variant","hasCloser","_hasCloser","role","KolHeadingWcTag","KolButtonWcTag","_ariaDescription","_b","trim","_hideLabel","left","_tooltipAlign","watchBoolean","validateHasCloser","validateLabel","validateLevel","watchHeadingLevel","validateOn","setState","validateType","watchValidator","includes","Set","join","validateVariant","componentWillLoad"],"sources":["src/schema/components/alert.ts","src/components/alert/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { HeadingLevel, PropAlert, PropHasCloser, PropLabel } from '../props';\nimport type { EventCallback } from '../types';\n\nexport const alertTypeOptions = ['default', 'info', 'success', 'warning', 'error'] as const;\nexport type AlertType = (typeof alertTypeOptions)[number];\n\nexport const alertVariantOptions = ['card', 'msg'] as const;\nexport type AlertVariant = (typeof alertVariantOptions)[number];\n\nexport type KoliBriAlertEventCallbacks = {\n\tonClose?: EventCallback<Event>;\n};\n\ntype RequiredAlertProps = NonNullable<unknown>;\ntype OptionalAlertProps = {\n\tlevel: HeadingLevel;\n\ton: KoliBriAlertEventCallbacks;\n\ttype: AlertType;\n\tvariant: AlertVariant;\n} & PropLabel &\n\tPropAlert &\n\tPropHasCloser;\n\ntype RequiredAlertStates = RequiredAlertProps;\ntype OptionalAlertStates = OptionalAlertProps;\n\nexport type AlertProps = Generic.Element.Members<RequiredAlertProps, OptionalAlertProps>;\nexport type AlertStates = Generic.Element.Members<RequiredAlertStates, OptionalAlertStates>;\nexport type AlertAPI = Generic.Element.ComponentApi<RequiredAlertProps, OptionalAlertProps, RequiredAlertStates, OptionalAlertStates>;\n","import type { JSX } from '@stencil/core';\nimport { Log, alertTypeOptions, alertVariantOptions, setState, validateHasCloser, validateLabel, watchBoolean, watchValidator } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { KolIconTag, KolHeadingWcTag, KolButtonWcTag } from '../../core/component-names';\n\nimport type { AlertAPI, AlertStates, AlertType, AlertVariant, HasCloserPropType, HeadingLevel, KoliBriAlertEventCallbacks, LabelPropType } from '../../schema';\nconst Icon = (props: { ariaLabel: string; icon: string; label?: string }) => {\n\treturn <KolIconTag class=\"heading-icon\" _label={typeof props.label === 'string' && props.label.length > 0 ? '' : props.ariaLabel} _icons={props.icon} />;\n};\n\nconst AlertIcon = (props: { label?: string; type?: AlertType }) => {\n\tswitch (props.type) {\n\t\tcase 'error':\n\t\t\treturn <Icon ariaLabel={translate('kol-error')} icon=\"codicon codicon-error\" label={props.label} />;\n\t\tcase 'info':\n\t\t\treturn <Icon ariaLabel={translate('kol-info')} icon=\"codicon codicon-info\" label={props.label} />;\n\t\tcase 'warning':\n\t\t\treturn <Icon ariaLabel={translate('kol-warning')} icon=\"codicon codicon-warning\" label={props.label} />;\n\t\tcase 'success':\n\t\t\treturn <Icon ariaLabel={translate('kol-success')} icon=\"codicon codicon-pass\" label={props.label} />;\n\t\tdefault:\n\t\t\treturn <Icon ariaLabel={translate('kol-message')} icon=\"codicon codicon-comment\" label={props.label} />;\n\t}\n};\n\n/**\n * @slot - Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-alert-wc',\n\tshadow: false,\n})\nexport class KolAlertWc implements AlertAPI {\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tif (this.state._alert) {\n\t\t\t/**\n\t\t\t * - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate\n\t\t\t * - https://googlechrome.github.io/samples/vibration/\n\t\t\t */\n\t\t\ttry {\n\t\t\t\tLog.debug(['Navigator should vibrate ...', navigator.vibrate([100, 75, 100, 75, 100])]);\n\t\t\t} catch (e) {\n\t\t\t\tLog.debug('Navigator does not support vibration.');\n\t\t\t}\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.validateAlert(false);\n\t\t\t}, 10000);\n\t\t}\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'kol-alert-wc': true,\n\t\t\t\t\talert: true,\n\t\t\t\t\t[this.state._type as string]: true,\n\t\t\t\t\t[this.state._variant as string]: true,\n\t\t\t\t\thasCloser: !!this.state._hasCloser,\n\t\t\t\t}}\n\t\t\t\trole={this.state._alert ? 'alert' : undefined}\n\t\t\t>\n\t\t\t\t<div class=\"heading\">\n\t\t\t\t\t<AlertIcon label={this.state._label} type={this.state._type} />\n\t\t\t\t\t<div class=\"heading-content\">\n\t\t\t\t\t\t{typeof this.state._label === 'string' && this.state._label?.length > 0 && (\n\t\t\t\t\t\t\t<KolHeadingWcTag _label={this.state._label} _level={this.state._level}></KolHeadingWcTag>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._variant === 'msg' && (\n\t\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t_ariaDescription={this.state._label?.trim() || ''}\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label={translate('kol-close-alert')}\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{this.state._variant === 'card' && (\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop() public _alert?: boolean = false;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Alerts an.\n\t */\n\t@Prop() public _on?: KoliBriAlertEventCallbacks;\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?: AlertType = 'default';\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t@State() public state: AlertStates = {\n\t\t_level: 1,\n\t};\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriAlertEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAlertEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriAlertEventCallbacks>(\n\t\t\t\tthis,\n\t\t\t\t'_on',\n\t\t\t\t{\n\t\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t\t},\n\t\t\t\t// {\n\t\t\t\t// \tafterPatch: (value: unknown) => {\n\t\t\t\t// \t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t\t// \t},\n\t\t\t\t// }\n\t\t\t);\n\t\t\t// } else {\n\t\t\t// \tsetState<KoliBriAlertEventCallbacks>(this, '_on', null, {\n\t\t\t// \t\tafterPatch: (value: unknown) => {\n\t\t\t// \t\t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t// \t\t},\n\t\t\t// \t});\n\t\t}\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value?) => typeof value === 'string' && alertTypeOptions.includes(value),\n\t\t\tnew Set(`String {${alertTypeOptions.join(', ')}`),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: AlertVariant): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value?) => typeof value === 'string' && alertVariantOptions.includes(value),\n\t\t\tnew Set(`AlertVariant {${alertVariantOptions.join(', ')}`),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateType(this._type);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":";;;ydAKO,MAAMA,EAAmB,CAAC,UAAW,OAAQ,UAAW,UAAW,SAGnE,MAAMC,EAAsB,CAAC,OAAQ,OCC5C,MAAMC,EAAQC,GACNC,EAACC,EAAU,CAACC,MAAM,eAAeC,cAAeJ,EAAMK,QAAU,UAAYL,EAAMK,MAAMC,OAAS,EAAI,GAAKN,EAAMO,UAAWC,OAAQR,EAAMS,OAGjJ,MAAMC,EAAaV,IAClB,OAAQA,EAAMW,MACb,IAAK,QACJ,OAAOV,EAACF,EAAI,CAACQ,UAAWK,EAAU,aAAcH,KAAK,wBAAwBJ,MAAOL,EAAMK,QAC3F,IAAK,OACJ,OAAOJ,EAACF,EAAI,CAACQ,UAAWK,EAAU,YAAaH,KAAK,uBAAuBJ,MAAOL,EAAMK,QACzF,IAAK,UACJ,OAAOJ,EAACF,EAAI,CAACQ,UAAWK,EAAU,eAAgBH,KAAK,0BAA0BJ,MAAOL,EAAMK,QAC/F,IAAK,UACJ,OAAOJ,EAACF,EAAI,CAACQ,UAAWK,EAAU,eAAgBH,KAAK,uBAAuBJ,MAAOL,EAAMK,QAC5F,QACC,OAAOJ,EAACF,EAAI,CAACQ,UAAWK,EAAU,eAAgBH,KAAK,0BAA0BJ,MAAOL,EAAMK,Q,QAWpFQ,EAAU,M,yBACLC,KAAAC,MAAQ,K,MACxB,KAAIC,EAAAF,KAAKG,OAAG,MAAAD,SAAA,SAAAA,EAAEE,WAAYC,UAAW,CACpCL,KAAKG,IAAIC,QAAQ,IAAIE,MAAM,S,GAIZN,KAAAO,GAAK,CACrBC,QAASR,KAAKC,OAgIPD,KAAAS,gBAAmBC,UACnBA,IAAU,UAAYA,IAAU,aAAgBA,EAAqCN,UAAY,W,YA1DvE,M,gBAMI,M,kCAUC,E,8BAUJ,U,cAKM,M,WAEJ,CACpCO,OAAQ,E,CAtGF,MAAAC,G,QACN,GAAIZ,KAAKa,MAAMC,OAAQ,CAKtB,IACCC,EAAIC,MAAM,CAAC,+BAAgCC,UAAUC,QAAQ,CAAC,IAAK,GAAI,IAAK,GAAI,O,CAC/E,MAAOC,GACRJ,EAAIC,MAAM,wC,CAGXI,YAAW,KACVpB,KAAKqB,cAAc,MAAM,GACvB,I,CAGJ,OACClC,EAACmC,EAAI,CAAAC,IAAA,2CACJlC,MAAO,CACN,eAAgB,KAChBmC,MAAO,KACP,CAACxB,KAAKa,MAAMY,OAAkB,KAC9B,CAACzB,KAAKa,MAAMa,UAAqB,KACjCC,YAAa3B,KAAKa,MAAMe,YAEzBC,KAAM7B,KAAKa,MAAMC,OAAS,QAAUT,WAEpClB,EAAA,OAAAoC,IAAA,2CAAKlC,MAAM,WACVF,EAACS,EAAS,CAAA2B,IAAA,2CAAChC,MAAOS,KAAKa,MAAMvB,OAAQO,KAAMG,KAAKa,MAAMY,QACtDtC,EAAA,OAAAoC,IAAA,2CAAKlC,MAAM,0BACFW,KAAKa,MAAMvB,SAAW,YAAYY,EAAAF,KAAKa,MAAMvB,UAAM,MAAAY,SAAA,SAAAA,EAAEV,QAAS,GACrEL,EAAC2C,EAAe,CAAAP,IAAA,2CAACjC,OAAQU,KAAKa,MAAMvB,OAAQqB,OAAQX,KAAKa,MAAMF,SAE/DX,KAAKa,MAAMa,WAAa,OACxBvC,EAAA,OAAAoC,IAAA,2CAAKlC,MAAM,WACVF,EAAA,QAAAoC,IAAA,+CAIFvB,KAAKa,MAAMe,YACXzC,EAAC4C,EAAc,CAAAR,IAAA,2CACdlC,MAAM,QACN2C,mBAAkBC,EAAAjC,KAAKa,MAAMvB,UAAM,MAAA2C,SAAA,SAAAA,EAAEC,SAAU,GAC/CC,WAAU,KACVzC,OAAQ,CACP0C,KAAM,CACLzC,KAAM,0BAGRL,OAAQQ,EAAU,mBAClBK,IAAKH,KAAKO,GACV8B,cAAc,UAIhBrC,KAAKa,MAAMa,WAAa,QACxBvC,EAAA,OAAAoC,IAAA,2CAAKlC,MAAM,WACVF,EAAA,QAAAoC,IAAA,8C,CAgDE,aAAAF,CAAcX,GACpB4B,EAAatC,KAAM,SAAUU,E,CAIvB,iBAAA6B,CAAkB7B,GACxB6B,EAAkBvC,KAAMU,E,CAIlB,aAAA8B,CAAc9B,GACpB8B,EAAcxC,KAAMU,E,CAId,aAAA+B,CAAc/B,GACpBgC,EAAkB1C,KAAMU,E,CAOlB,UAAAiC,CAAWjC,GACjB,GAAIV,KAAKS,gBAAgBC,GAAQ,CAChCkC,EACC5C,KACA,MACA,CACCI,QAAUM,EAAqCN,S,EAkB5C,YAAAyC,CAAanC,GACnBoC,EACC9C,KACA,SACCU,UAAkBA,IAAU,UAAY3B,EAAiBgE,SAASrC,IACnE,IAAIsC,IAAI,WAAWjE,EAAiBkE,KAAK,SACzCvC,E,CAKK,eAAAwC,CAAgBxC,GACtBoC,EACC9C,KACA,YACCU,UAAkBA,IAAU,UAAY1B,EAAoB+D,SAASrC,IACtE,IAAIsC,IAAI,iBAAiBhE,EAAoBiE,KAAK,SAClDvC,E,CAIK,iBAAAyC,GACNnD,KAAKqB,cAAcrB,KAAKc,QACxBd,KAAKuC,kBAAkBvC,KAAK4B,YAC5B5B,KAAKwC,cAAcxC,KAAKV,QACxBU,KAAKyC,cAAczC,KAAKW,QACxBX,KAAK2C,WAAW3C,KAAKG,KACrBH,KAAK6C,aAAa7C,KAAKyB,OACvBzB,KAAKkD,gBAAgBlD,KAAK0B,S","ignoreList":[]}
+{"version":3,"names":["alertTypeOptions","alertVariantOptions","Icon","props","h","KolIconTag","class","_label","label","length","ariaLabel","_icons","icon","AlertIcon","type","translate","KolAlertWc","this","close","_a","_on","onClose","undefined","Event","on","onClick","validateOnValue","value","_level","render","state","_alert","Log","debug","navigator","vibrate","e","setTimeout","validateAlert","Host","key","alert","_type","_variant","hasCloser","_hasCloser","role","KolHeadingWcTag","KolButtonWcTag","_ariaDescription","_b","trim","_hideLabel","left","_tooltipAlign","watchBoolean","validateHasCloser","validateLabel","validateLevel","watchHeadingLevel","validateOn","setState","validateType","watchValidator","includes","Set","join","validateVariant","componentWillLoad"],"sources":["src/schema/components/alert.ts","src/components/alert/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { HeadingLevel, PropAlert, PropHasCloser, PropLabel } from '../props';\nimport type { EventCallback } from '../types';\n\nexport const alertTypeOptions = ['default', 'info', 'success', 'warning', 'error'] as const;\nexport type AlertType = (typeof alertTypeOptions)[number];\n\nexport const alertVariantOptions = ['card', 'msg'] as const;\nexport type AlertVariant = (typeof alertVariantOptions)[number];\n\nexport type KoliBriAlertEventCallbacks = {\n\tonClose?: EventCallback<Event>;\n};\n\ntype RequiredAlertProps = NonNullable<unknown>;\ntype OptionalAlertProps = {\n\tlevel: HeadingLevel;\n\ton: KoliBriAlertEventCallbacks;\n\ttype: AlertType;\n\tvariant: AlertVariant;\n} & PropLabel &\n\tPropAlert &\n\tPropHasCloser;\n\ntype RequiredAlertStates = RequiredAlertProps;\ntype OptionalAlertStates = OptionalAlertProps;\n\nexport type AlertProps = Generic.Element.Members<RequiredAlertProps, OptionalAlertProps>;\nexport type AlertStates = Generic.Element.Members<RequiredAlertStates, OptionalAlertStates>;\nexport type AlertAPI = Generic.Element.ComponentApi<RequiredAlertProps, OptionalAlertProps, RequiredAlertStates, OptionalAlertStates>;\n","import type { JSX } from '@stencil/core';\nimport { Log, alertTypeOptions, alertVariantOptions, setState, validateHasCloser, validateLabel, watchBoolean, watchValidator } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { KolIconTag, KolHeadingWcTag, KolButtonWcTag } from '../../core/component-names';\n\nimport type { AlertAPI, AlertStates, AlertType, AlertVariant, HasCloserPropType, HeadingLevel, KoliBriAlertEventCallbacks, LabelPropType } from '../../schema';\nconst Icon = (props: { ariaLabel: string; icon: string; label?: string }) => {\n\treturn <KolIconTag class=\"heading-icon\" _label={typeof props.label === 'string' && props.label.length > 0 ? '' : props.ariaLabel} _icons={props.icon} />;\n};\n\nconst AlertIcon = (props: { label?: string; type?: AlertType }) => {\n\tswitch (props.type) {\n\t\tcase 'error':\n\t\t\treturn <Icon ariaLabel={translate('kol-error')} icon=\"codicon codicon-error\" label={props.label} />;\n\t\tcase 'info':\n\t\t\treturn <Icon ariaLabel={translate('kol-info')} icon=\"codicon codicon-info\" label={props.label} />;\n\t\tcase 'warning':\n\t\t\treturn <Icon ariaLabel={translate('kol-warning')} icon=\"codicon codicon-warning\" label={props.label} />;\n\t\tcase 'success':\n\t\t\treturn <Icon ariaLabel={translate('kol-success')} icon=\"codicon codicon-pass\" label={props.label} />;\n\t\tdefault:\n\t\t\treturn <Icon ariaLabel={translate('kol-message')} icon=\"codicon codicon-comment\" label={props.label} />;\n\t}\n};\n\n/**\n * @internal\n * @slot - Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-alert-wc',\n\tshadow: false,\n})\nexport class KolAlertWc implements AlertAPI {\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tif (this.state._alert) {\n\t\t\t/**\n\t\t\t * - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate\n\t\t\t * - https://googlechrome.github.io/samples/vibration/\n\t\t\t */\n\t\t\ttry {\n\t\t\t\tLog.debug(['Navigator should vibrate ...', navigator.vibrate([100, 75, 100, 75, 100])]);\n\t\t\t} catch (e) {\n\t\t\t\tLog.debug('Navigator does not support vibration.');\n\t\t\t}\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.validateAlert(false);\n\t\t\t}, 10000);\n\t\t}\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'kol-alert-wc': true,\n\t\t\t\t\talert: true,\n\t\t\t\t\t[this.state._type as string]: true,\n\t\t\t\t\t[this.state._variant as string]: true,\n\t\t\t\t\thasCloser: !!this.state._hasCloser,\n\t\t\t\t}}\n\t\t\t\trole={this.state._alert ? 'alert' : undefined}\n\t\t\t>\n\t\t\t\t<div class=\"heading\">\n\t\t\t\t\t<AlertIcon label={this.state._label} type={this.state._type} />\n\t\t\t\t\t<div class=\"heading-content\">\n\t\t\t\t\t\t{typeof this.state._label === 'string' && this.state._label?.length > 0 && (\n\t\t\t\t\t\t\t<KolHeadingWcTag _label={this.state._label} _level={this.state._level}></KolHeadingWcTag>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._variant === 'msg' && (\n\t\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t_ariaDescription={this.state._label?.trim() || ''}\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label={translate('kol-close-alert')}\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{this.state._variant === 'card' && (\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop() public _alert?: boolean = false;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Alerts an.\n\t */\n\t@Prop() public _on?: KoliBriAlertEventCallbacks;\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?: AlertType = 'default';\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t@State() public state: AlertStates = {\n\t\t_level: 1,\n\t};\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriAlertEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAlertEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriAlertEventCallbacks>(\n\t\t\t\tthis,\n\t\t\t\t'_on',\n\t\t\t\t{\n\t\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t\t},\n\t\t\t\t// {\n\t\t\t\t// \tafterPatch: (value: unknown) => {\n\t\t\t\t// \t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t\t// \t},\n\t\t\t\t// }\n\t\t\t);\n\t\t\t// } else {\n\t\t\t// \tsetState<KoliBriAlertEventCallbacks>(this, '_on', null, {\n\t\t\t// \t\tafterPatch: (value: unknown) => {\n\t\t\t// \t\t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t// \t\t},\n\t\t\t// \t});\n\t\t}\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value?) => typeof value === 'string' && alertTypeOptions.includes(value),\n\t\t\tnew Set(`String {${alertTypeOptions.join(', ')}`),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: AlertVariant): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value?) => typeof value === 'string' && alertVariantOptions.includes(value),\n\t\t\tnew Set(`AlertVariant {${alertVariantOptions.join(', ')}`),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateType(this._type);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":";;;8dAKO,MAAMA,EAAmB,CAAC,UAAW,OAAQ,UAAW,UAAW,SAGnE,MAAMC,EAAsB,CAAC,OAAQ,OCC5C,MAAMC,EAAQC,GACNC,EAACC,EAAU,CAACC,MAAM,eAAeC,cAAeJ,EAAMK,QAAU,UAAYL,EAAMK,MAAMC,OAAS,EAAI,GAAKN,EAAMO,UAAWC,OAAQR,EAAMS,OAGjJ,MAAMC,EAAaV,IAClB,OAAQA,EAAMW,MACb,IAAK,QACJ,OAAOV,EAACF,EAAI,CAACQ,UAAWK,EAAU,aAAcH,KAAK,wBAAwBJ,MAAOL,EAAMK,QAC3F,IAAK,OACJ,OAAOJ,EAACF,EAAI,CAACQ,UAAWK,EAAU,YAAaH,KAAK,uBAAuBJ,MAAOL,EAAMK,QACzF,IAAK,UACJ,OAAOJ,EAACF,EAAI,CAACQ,UAAWK,EAAU,eAAgBH,KAAK,0BAA0BJ,MAAOL,EAAMK,QAC/F,IAAK,UACJ,OAAOJ,EAACF,EAAI,CAACQ,UAAWK,EAAU,eAAgBH,KAAK,uBAAuBJ,MAAOL,EAAMK,QAC5F,QACC,OAAOJ,EAACF,EAAI,CAACQ,UAAWK,EAAU,eAAgBH,KAAK,0BAA0BJ,MAAOL,EAAMK,Q,QAYpFQ,EAAU,M,yBACLC,KAAAC,MAAQ,K,MACxB,KAAIC,EAAAF,KAAKG,OAAG,MAAAD,SAAA,SAAAA,EAAEE,WAAYC,UAAW,CACpCL,KAAKG,IAAIC,QAAQ,IAAIE,MAAM,S,GAIZN,KAAAO,GAAK,CACrBC,QAASR,KAAKC,OAgIPD,KAAAS,gBAAmBC,UACnBA,IAAU,UAAYA,IAAU,aAAgBA,EAAqCN,UAAY,W,YA1DvE,M,gBAMI,M,kCAUC,E,8BAUJ,U,cAKM,M,WAEJ,CACpCO,OAAQ,E,CAtGF,MAAAC,G,QACN,GAAIZ,KAAKa,MAAMC,OAAQ,CAKtB,IACCC,EAAIC,MAAM,CAAC,+BAAgCC,UAAUC,QAAQ,CAAC,IAAK,GAAI,IAAK,GAAI,O,CAC/E,MAAOC,GACRJ,EAAIC,MAAM,wC,CAGXI,YAAW,KACVpB,KAAKqB,cAAc,MAAM,GACvB,I,CAGJ,OACClC,EAACmC,EAAI,CAAAC,IAAA,2CACJlC,MAAO,CACN,eAAgB,KAChBmC,MAAO,KACP,CAACxB,KAAKa,MAAMY,OAAkB,KAC9B,CAACzB,KAAKa,MAAMa,UAAqB,KACjCC,YAAa3B,KAAKa,MAAMe,YAEzBC,KAAM7B,KAAKa,MAAMC,OAAS,QAAUT,WAEpClB,EAAA,OAAAoC,IAAA,2CAAKlC,MAAM,WACVF,EAACS,EAAS,CAAA2B,IAAA,2CAAChC,MAAOS,KAAKa,MAAMvB,OAAQO,KAAMG,KAAKa,MAAMY,QACtDtC,EAAA,OAAAoC,IAAA,2CAAKlC,MAAM,0BACFW,KAAKa,MAAMvB,SAAW,YAAYY,EAAAF,KAAKa,MAAMvB,UAAM,MAAAY,SAAA,SAAAA,EAAEV,QAAS,GACrEL,EAAC2C,EAAe,CAAAP,IAAA,2CAACjC,OAAQU,KAAKa,MAAMvB,OAAQqB,OAAQX,KAAKa,MAAMF,SAE/DX,KAAKa,MAAMa,WAAa,OACxBvC,EAAA,OAAAoC,IAAA,2CAAKlC,MAAM,WACVF,EAAA,QAAAoC,IAAA,+CAIFvB,KAAKa,MAAMe,YACXzC,EAAC4C,EAAc,CAAAR,IAAA,2CACdlC,MAAM,QACN2C,mBAAkBC,EAAAjC,KAAKa,MAAMvB,UAAM,MAAA2C,SAAA,SAAAA,EAAEC,SAAU,GAC/CC,WAAU,KACVzC,OAAQ,CACP0C,KAAM,CACLzC,KAAM,0BAGRL,OAAQQ,EAAU,mBAClBK,IAAKH,KAAKO,GACV8B,cAAc,UAIhBrC,KAAKa,MAAMa,WAAa,QACxBvC,EAAA,OAAAoC,IAAA,2CAAKlC,MAAM,WACVF,EAAA,QAAAoC,IAAA,8C,CAgDE,aAAAF,CAAcX,GACpB4B,EAAatC,KAAM,SAAUU,E,CAIvB,iBAAA6B,CAAkB7B,GACxB6B,EAAkBvC,KAAMU,E,CAIlB,aAAA8B,CAAc9B,GACpB8B,EAAcxC,KAAMU,E,CAId,aAAA+B,CAAc/B,GACpBgC,EAAkB1C,KAAMU,E,CAOlB,UAAAiC,CAAWjC,GACjB,GAAIV,KAAKS,gBAAgBC,GAAQ,CAChCkC,EACC5C,KACA,MACA,CACCI,QAAUM,EAAqCN,S,EAkB5C,YAAAyC,CAAanC,GACnBoC,EACC9C,KACA,SACCU,UAAkBA,IAAU,UAAY3B,EAAiBgE,SAASrC,IACnE,IAAIsC,IAAI,WAAWjE,EAAiBkE,KAAK,SACzCvC,E,CAKK,eAAAwC,CAAgBxC,GACtBoC,EACC9C,KACA,YACCU,UAAkBA,IAAU,UAAY1B,EAAoB+D,SAASrC,IACtE,IAAIsC,IAAI,iBAAiBhE,EAAoBiE,KAAK,SAClDvC,E,CAIK,iBAAAyC,GACNnD,KAAKqB,cAAcrB,KAAKc,QACxBd,KAAKuC,kBAAkBvC,KAAK4B,YAC5B5B,KAAKwC,cAAcxC,KAAKV,QACxBU,KAAKyC,cAAczC,KAAKW,QACxBX,KAAK2C,WAAW3C,KAAKG,KACrBH,KAAK6C,aAAa7C,KAAKyB,OACvBzB,KAAKkD,gBAAgBlD,KAAK0B,S","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolAlertDefaultStyle0","KolAlert","_level","render","h","Host","key","class","KolAlertWcTag","_alert","this","_hasCloser","_label","_on","_type","_variant"],"sources":["src/components/alert/style.scss?tag=kol-alert&mode=default&encapsulation=shadow","src/components/alert/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../@shared/kol-alert-mixin.scss';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n}\n\n@include kol-alert-styles;\n","import type { AlertProps, AlertStates, AlertType, AlertVariant, HeadingLevel, KoliBriAlertEventCallbacks, LabelPropType } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State } from '@stencil/core';\nimport { KolAlertWcTag } from '../../core/component-names';\n\n/**\n * @slot - Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-alert',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolAlert implements AlertProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-alert\">\n\t\t\t\t<KolAlertWcTag\n\t\t\t\t\t_alert={this._alert}\n\t\t\t\t\t_hasCloser={this._hasCloser}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_level={this._level}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t>\n\t\t\t\t\t<slot />\n\t\t\t\t</KolAlertWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop() public _alert?: boolean = false;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Alerts an.\n\t */\n\t@Prop() public _on?: KoliBriAlertEventCallbacks;\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?: AlertType = 'default';\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t@State() public state: AlertStates = {\n\t\t_level: 1,\n\t};\n}\n"],"mappings":";;;wGAAA,MAAMA,EAAkB,w7IACxB,MAAAC,EAAeD,E,MCcFE,EAAQ,M,qCAsBc,M,gBAMI,M,kCAUC,E,8BAUJ,U,cAKM,M,WAEJ,CACpCC,OAAQ,E,CAvDF,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,aACXH,EAACI,EAAa,CAAAF,IAAA,2CACbG,OAAQC,KAAKD,OACbE,WAAYD,KAAKC,WACjBC,OAAQF,KAAKE,OACbV,OAAQQ,KAAKR,OACbW,IAAKH,KAAKG,IACVC,MAAOJ,KAAKI,MACZC,SAAUL,KAAKK,UAEfX,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolAlertDefaultStyle0","KolAlert","_level","render","h","Host","key","class","KolAlertWcTag","_alert","this","_hasCloser","_label","_on","_type","_variant"],"sources":["src/components/alert/style.scss?tag=kol-alert&mode=default&encapsulation=shadow","src/components/alert/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../@shared/kol-alert-mixin.scss';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n}\n\n@include kol-alert-styles;\n","import type { AlertProps, AlertStates, AlertType, AlertVariant, HeadingLevel, KoliBriAlertEventCallbacks, LabelPropType } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State } from '@stencil/core';\nimport { KolAlertWcTag } from '../../core/component-names';\n\n/**\n * @slot - Der Inhalt der Meldung.\n */\n@Component({\n\ttag: 'kol-alert',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolAlert implements AlertProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-alert\">\n\t\t\t\t<KolAlertWcTag\n\t\t\t\t\t_alert={this._alert}\n\t\t\t\t\t_hasCloser={this._hasCloser}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_level={this._level}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t>\n\t\t\t\t\t<slot />\n\t\t\t\t</KolAlertWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop() public _alert?: boolean = false;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Alerts an.\n\t */\n\t@Prop() public _on?: KoliBriAlertEventCallbacks;\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?: AlertType = 'default';\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t@State() public state: AlertStates = {\n\t\t_level: 1,\n\t};\n}\n"],"mappings":";;;wGAAA,MAAMA,EAAkB,u5QACxB,MAAAC,EAAeD,E,MCcFE,EAAQ,M,qCAsBc,M,gBAMI,M,kCAUC,E,8BAUJ,U,cAKM,M,WAEJ,CACpCC,OAAQ,E,CAvDF,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,aACXH,EAACI,EAAa,CAAAF,IAAA,2CACbG,OAAQC,KAAKD,OACbE,WAAYD,KAAKC,WACjBC,OAAQF,KAAKE,OACbV,OAAQQ,KAAKR,OACbW,IAAKH,KAAKG,IACVC,MAAOJ,KAAKI,MACZC,SAAUL,KAAKK,UAEfX,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

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-72fcfd9d.js";import{t as r}from"./i18n-8640d789.js";import{v as i}from"./image-source-7b92b206.js";import{v as e}from"./label-541a8424.js";import"./i18n-7ea9f137.js";import"./reuse-523ba2ac.js";import"./prop.validators-543d0c7b.js";import"./index-fcc5bd94.js";import"./dev.utils-fab45cbc.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":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"},o(this.state._label.trim()))))}validateSrc(a){i(this,a)}validateLabel(a){e(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-d62ddd65.js";import{t as r}from"./i18n-8640d789.js";import{v as i}from"./image-source-7b92b206.js";import{v as e}from"./label-541a8424.js";import"./i18n-7ea9f137.js";import"./reuse-523ba2ac.js";import"./prop.validators-543d0c7b.js";import"./index-fcc5bd94.js";import"./dev.utils-fab45cbc.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)},l=class{constructor(t){a(this,t),this._src=void 0,this._label=void 0,this.state={_src:"",_label:""}}render(){return t(s,{key:"21a63aacea075d070953aa0f10065f962cedf6d3",class:"kol-avatar-wc"},t("div",{key:"013235e4075ca9590f516eb3b5a0c989c28335a0","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"},o(this.state._label.trim()))))}validateSrc(a){i(this,a)}validateLabel(a){e(this,a,{required:!0})}componentWillLoad(){this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_src:["validateSrc"],_label:["validateLabel"]}}};export{l as kol_avatar_wc};

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

@@ -1 +1 @@
-{"version":3,"names":["formatNameAsInitial","name","length","toUpperCase","formatLabelAsInitials","label","names","split","first","at","last","KolAvatarWc","_src","_label","render","h","Host","key","class","translate","placeholders","this","state","role","alt","src","trim","validateSrc","value","validateImageSource","validateLabel","required","componentWillLoad"],"sources":["src/components/avatar/controller.ts","src/components/avatar/component.tsx"],"sourcesContent":["const formatNameAsInitial = (name: string): string => {\n\tif (name.length === 0) {\n\t\treturn '';\n\t}\n\n\treturn name[0].toUpperCase();\n};\n\nexport const formatLabelAsInitials = (label: string): string => {\n\tconst names = label.split(/\\s+/); // split by any whitespace characters\n\tconst first = names.at(0);\n\tconst last = names.at(-1);\n\n\t// names might consist of only one word\n\tif (names.length >= 2 && first && last) {\n\t\treturn `${formatNameAsInitial(first)}${formatNameAsInitial(last)}`;\n\t}\n\n\treturn formatNameAsInitial(label);\n};\n","import type { JSX } from '@stencil/core';\nimport { validateImageSource, validateLabel } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { formatLabelAsInitials } from './controller';\n\nimport type { AvatarAPI, AvatarStates, ImageSourcePropType, LabelPropType } from '../../schema';\n@Component({\n\ttag: 'kol-avatar-wc',\n\tshadow: false,\n})\nexport class KolAvatarWc implements AvatarAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-avatar-wc\">\n\t\t\t\t<div aria-label={translate('kol-avatar-alt', { placeholders: { name: this.state._label } })} class=\"container\" role=\"img\">\n\t\t\t\t\t{this.state._src ? (\n\t\t\t\t\t\t<img alt=\"\" aria-hidden=\"true\" class=\"image\" src={this.state._src} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<span aria-hidden=\"true\" class=\"initials\">\n\t\t\t\t\t\t\t{formatLabelAsInitials(this.state._label.trim())}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src?: ImageSourcePropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: AvatarStates = {\n\t\t_src: '',\n\t\t_label: '', // ⚠ required\n\t};\n\n\t@Watch('_src')\n\tpublic validateSrc(value?: ImageSourcePropType): void {\n\t\tvalidateImageSource(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateSrc(this._src);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":";;;6UAAA,MAAMA,EAAuBC,IAC5B,GAAIA,EAAKC,SAAW,EAAG,CACtB,MAAO,E,CAGR,OAAOD,EAAK,GAAGE,aAAa,EAGtB,MAAMC,EAAyBC,IACrC,MAAMC,EAAQD,EAAME,MAAM,OAC1B,MAAMC,EAAQF,EAAMG,GAAG,GACvB,MAAMC,EAAOJ,EAAMG,IAAI,GAGvB,GAAIH,EAAMJ,QAAU,GAAKM,GAASE,EAAM,CACvC,MAAO,GAAGV,EAAoBQ,KAASR,EAAoBU,I,CAG5D,OAAOV,EAAoBK,EAAM,E,MCNrBM,EAAW,M,8EA2Be,CACrCC,KAAM,GACNC,OAAQ,G,CA5BF,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,iBACXH,EAAA,OAAAE,IAAA,wDAAiBE,EAAU,iBAAkB,CAAEC,aAAc,CAAEnB,KAAMoB,KAAKC,MAAMT,UAAaK,MAAM,YAAYK,KAAK,OAClHF,KAAKC,MAAMV,KACXG,EAAA,OAAKS,IAAI,GAAE,cAAa,OAAON,MAAM,QAAQO,IAAKJ,KAAKC,MAAMV,OAE7DG,EAAA,sBAAkB,OAAOG,MAAM,YAC7Bd,EAAsBiB,KAAKC,MAAMT,OAAOa,U,CAwBxC,WAAAC,CAAYC,GAClBC,EAAoBR,KAAMO,E,CAIpB,aAAAE,CAAcF,GACpBE,EAAcT,KAAMO,EAAO,CAC1BG,SAAU,M,CAIL,iBAAAC,GACNX,KAAKM,YAAYN,KAAKT,MACtBS,KAAKS,cAAcT,KAAKR,O","ignoreList":[]}
+{"version":3,"names":["formatNameAsInitial","name","length","toUpperCase","formatLabelAsInitials","label","names","split","first","at","last","KolAvatarWc","_src","_label","render","h","Host","key","class","translate","placeholders","this","state","role","alt","src","trim","validateSrc","value","validateImageSource","validateLabel","required","componentWillLoad"],"sources":["src/components/avatar/controller.ts","src/components/avatar/component.tsx"],"sourcesContent":["const formatNameAsInitial = (name: string): string => {\n\tif (name.length === 0) {\n\t\treturn '';\n\t}\n\n\treturn name[0].toUpperCase();\n};\n\nexport const formatLabelAsInitials = (label: string): string => {\n\tconst names = label.split(/\\s+/); // split by any whitespace characters\n\tconst first = names.at(0);\n\tconst last = names.at(-1);\n\n\t// names might consist of only one word\n\tif (names.length >= 2 && first && last) {\n\t\treturn `${formatNameAsInitial(first)}${formatNameAsInitial(last)}`;\n\t}\n\n\treturn formatNameAsInitial(label);\n};\n","import type { JSX } from '@stencil/core';\nimport { validateImageSource, validateLabel } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { formatLabelAsInitials } from './controller';\n\nimport type { AvatarAPI, AvatarStates, ImageSourcePropType, LabelPropType } from '../../schema';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-avatar-wc',\n\tshadow: false,\n})\nexport class KolAvatarWc implements AvatarAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-avatar-wc\">\n\t\t\t\t<div aria-label={translate('kol-avatar-alt', { placeholders: { name: this.state._label } })} class=\"container\" role=\"img\">\n\t\t\t\t\t{this.state._src ? (\n\t\t\t\t\t\t<img alt=\"\" aria-hidden=\"true\" class=\"image\" src={this.state._src} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<span aria-hidden=\"true\" class=\"initials\">\n\t\t\t\t\t\t\t{formatLabelAsInitials(this.state._label.trim())}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src?: ImageSourcePropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: AvatarStates = {\n\t\t_src: '',\n\t\t_label: '', // ⚠ required\n\t};\n\n\t@Watch('_src')\n\tpublic validateSrc(value?: ImageSourcePropType): void {\n\t\tvalidateImageSource(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateSrc(this._src);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":";;;6UAAA,MAAMA,EAAuBC,IAC5B,GAAIA,EAAKC,SAAW,EAAG,CACtB,MAAO,E,CAGR,OAAOD,EAAK,GAAGE,aAAa,EAGtB,MAAMC,EAAyBC,IACrC,MAAMC,EAAQD,EAAME,MAAM,OAC1B,MAAMC,EAAQF,EAAMG,GAAG,GACvB,MAAMC,EAAOJ,EAAMG,IAAI,GAGvB,GAAIH,EAAMJ,QAAU,GAAKM,GAASE,EAAM,CACvC,MAAO,GAAGV,EAAoBQ,KAASR,EAAoBU,I,CAG5D,OAAOV,EAAoBK,EAAM,E,MCFrBM,EAAW,M,8EA2Be,CACrCC,KAAM,GACNC,OAAQ,G,CA5BF,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,iBACXH,EAAA,OAAAE,IAAA,wDAAiBE,EAAU,iBAAkB,CAAEC,aAAc,CAAEnB,KAAMoB,KAAKC,MAAMT,UAAaK,MAAM,YAAYK,KAAK,OAClHF,KAAKC,MAAMV,KACXG,EAAA,OAAKS,IAAI,GAAE,cAAa,OAAON,MAAM,QAAQO,IAAKJ,KAAKC,MAAMV,OAE7DG,EAAA,sBAAkB,OAAOG,MAAM,YAC7Bd,EAAsBiB,KAAKC,MAAMT,OAAOa,U,CAwBxC,WAAAC,CAAYC,GAClBC,EAAoBR,KAAMO,E,CAIpB,aAAAE,CAAcF,GACpBE,EAAcT,KAAMO,EAAO,CAC1BG,SAAU,M,CAIL,iBAAAC,GACNX,KAAKM,YAAYN,KAAKT,MACtBS,KAAKS,cAAcT,KAAKR,O","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolAvatarDefaultStyle0","KolAvatar","render","h","Host","key","class","KolAvatarWcTag","_src","this","_label"],"sources":["src/components/avatar/style.scss?tag=kol-avatar&mode=default&encapsulation=shadow","src/components/avatar/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../host-display-block';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.container {\n\t\tborder-radius: 50%;\n\t\toverflow: hidden;\n\t\t/* Visible with forced colors  */\n\t\toutline: transparent solid 1px;\n\t\t/*theme?*/\n\t\twidth: 100px;\n\t\theight: 100px;\n\t}\n\n\t.image {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.initials {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t/*theme?*/\n\t\tbackground: #d3d3d3;\n\t\tfont-size: 40px;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nimport type { AvatarProps } from '../../schema';\nimport { KolAvatarWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-avatar',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolAvatar implements AvatarProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-avatar\">\n\t\t\t\t<KolAvatarWcTag _src={this._src} _label={this._label}></KolAvatarWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n}\n"],"mappings":";;;wGAAA,MAAMA,EAAkB,+kJACxB,MAAAC,EAAeD,E,MCYFE,EAAS,M,mEACd,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,cACXH,EAACI,EAAc,CAAAF,IAAA,2CAACG,KAAMC,KAAKD,KAAME,OAAQD,KAAKC,S","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolAvatarDefaultStyle0","KolAvatar","render","h","Host","key","class","KolAvatarWcTag","_src","this","_label"],"sources":["src/components/avatar/style.scss?tag=kol-avatar&mode=default&encapsulation=shadow","src/components/avatar/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../host-display-block';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.container {\n\t\tborder-radius: 50%;\n\t\toverflow: hidden;\n\t\t/* Visible with forced colors  */\n\t\toutline: transparent solid 1px;\n\t\t/*theme?*/\n\t\twidth: 100px;\n\t\theight: 100px;\n\t}\n\n\t.image {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.initials {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t/*theme?*/\n\t\tbackground-color: #d3d3d3;\n\t\tfont-size: 40px;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nimport type { AvatarProps } from '../../schema';\nimport { KolAvatarWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-avatar',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolAvatar implements AvatarProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-avatar\">\n\t\t\t\t<KolAvatarWcTag _src={this._src} _label={this._label}></KolAvatarWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n}\n"],"mappings":";;;wGAAA,MAAMA,EAAkB,qlJACxB,MAAAC,EAAeD,E,MCYFE,EAAS,M,mEACd,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,cACXH,EAACI,EAAc,CAAAF,IAAA,2CAACG,KAAMC,KAAKD,KAAME,OAAQD,KAAKC,S","ignoreList":[]}

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-72fcfd9d.js";import{c as i,f as o}from"./component-names-0a8a1a6c.js";import{n as a}from"./dev.utils-27d22034.js";import{h as s,v as l}from"./color-44dcb59b.js";import{f as r,o as d,p as h,s as c}from"./prop.validators-543d0c7b.js";import"./reuse-523ba2ac.js";import"./dev.utils-fab45cbc.js";import"./index-fcc5bd94.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 {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span {\n    display: inline-flex;\n    place-items: center;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n  }\n  :host > span > .kol-button-wc button {\n    color: inherit;\n  }\n}",b=u;r("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const p=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"]}}};p.style={default:b};export{p as kol_badge};
+import{r as n,h as e,H as t}from"./index-d62ddd65.js";import{c as i,f as o}from"./component-names-7f2c991e.js";import{n as s}from"./dev.utils-e45b01b6.js";import{h as a,v as l}from"./color-44dcb59b.js";import{f as r,o as d,p as h,s as c}from"./prop.validators-543d0c7b.js";import"./reuse-523ba2ac.js";import"./dev.utils-fab45cbc.js";import"./index-fcc5bd94.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 {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span {\n    display: inline-flex;\n    place-items: center;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n  }\n  :host > span > .kol-button-wc button {\n    color: inherit;\n  }\n}",b=u;r("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const p=class{constructor(t){n(this,t),this.bgColorStr="#000",this.colorStr="#fff",this.id=s(),this.handleColorChange=n=>{const t=a(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"]}}};p.style={default:b};export{p 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-72fcfd9d.js";import{r as a,a as o}from"./unique-nav-labels-768d04e9.js";import{w as s}from"./validation-25fb8bf6.js";import{g as l,h as r}from"./component-names-0a8a1a6c.js";import{e as d}from"./prop.validators-543d0c7b.js";import{v as c}from"./label-541a8424.js";import"./dev.utils-fab45cbc.js";import"./index-fcc5bd94.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  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=h,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),c(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-d62ddd65.js";import{r as o,a}from"./unique-nav-labels-768d04e9.js";import{w as s}from"./validation-25fb8bf6.js";import{g as l,h as r}from"./component-names-7f2c991e.js";import{e as d}from"./prop.validators-543d0c7b.js";import{v as c}from"./label-541a8424.js";import"./dev.utils-fab45cbc.js";import"./index-fcc5bd94.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  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=h,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||o(this.state._label),c(this,n,{required:!0}),d(n),a(this.state._label)}validateLinks(n){s("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){o(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};p.style={default:b};export{p as kol_breadcrumb};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolBreadcrumbDefaultStyle0","KolBreadcrumb","this","renderLink","link","index","lastIndex","state","_links","length","h","key","KolIconTag","_label","_icons","_hideLabel","Fragment","KolLinkTag","Object","assign","render","Host","class","map","validateLabel","value","_oldValue","initial","removeNavLabel","required","a11yHintLabelingLandmarks","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","undefined","disconnectedCallback"],"sources":["src/components/breadcrumb/style.scss?tag=kol-breadcrumb&mode=default&encapsulation=shadow","src/components/breadcrumb/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\tli,\n\tul {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tlist-style: none;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t\tflex-wrap: wrap;\n\t\tplace-items: center;\n\t}\n\n\t.kol-icon::part(separator) {\n\t\tfont-weight: 900;\n\t\tfont-size: 0.7em;\n\t}\n\n\t.kol-icon::part(separator):before {\n\t\tcontent: '\\f054';\n\t\tfont-family: 'Font Awesome 6 Free';\n\t}\n}\n","import type { BreadcrumbAPI, BreadcrumbLinkProps, BreadcrumbStates, LabelPropType, LinkProps, Stringified } from '../../schema';\nimport { a11yHintLabelingLandmarks, validateLabel } from '../../schema';\nimport { Component, Fragment, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolIconTag, KolLinkTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements BreadcrumbAPI {\n\tprivate readonly renderLink = (link: BreadcrumbLinkProps, index: number): JSX.Element => {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\treturn (\n\t\t\t<li key={index}>\n\t\t\t\t{index !== 0 && <KolIconTag _label=\"\" _icons=\"codicon codicon-chevron-right\" />}\n\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t<span>\n\t\t\t\t\t\t{link._hideLabel ? (\n\t\t\t\t\t\t\t<KolIconTag _label={link._label} _icons={typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event'} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>{link._label}</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\t<KolLinkTag {...link}></KolLinkTag>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-breadcrumb\">\n\t\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<KolIconTag _label=\"\" _icons=\"codicon codicon-home\" />…\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._links.map(this.renderLink)}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<BreadcrumbLinkProps[]>;\n\n\t@State() public state: BreadcrumbStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;oXAAA,MAAMA,EAAkB,i7IACxB,MAAAC,EAAeD,E,MCgBFE,EAAa,M,yBACRC,KAAAC,WAAa,CAACC,EAA2BC,KACzD,MAAMC,EAAYJ,KAAKK,MAAMC,OAAOC,OAAS,EAC7C,OACCC,EAAA,MAAIC,IAAKN,GACPA,IAAU,GAAKK,EAACE,EAAU,CAACC,OAAO,GAAGC,OAAO,kCAC5CT,IAAUC,EACVI,EAAA,YACEN,EAAKW,WACLL,EAACE,EAAU,CAACC,OAAQT,EAAKS,OAAQC,cAAeV,EAAKU,SAAW,SAAWV,EAAKU,OAAS,iCAEzFJ,EAAAM,EAAA,KAAGZ,EAAKS,SAIVH,EAACO,EAAUC,OAAAC,OAAA,GAAKf,IAEb,E,uDA+BmC,CACzCS,OAAQ,GACRL,OAAQ,G,CA7BF,MAAAY,GACN,OACCV,EAACW,EAAI,CAAAV,IAAA,2CAACW,MAAM,kBACXZ,EAAA,OAAAC,IAAA,wDAAiBT,KAAKK,MAAMM,QAC3BH,EAAA,MAAAC,IAAA,4CACET,KAAKK,MAAMC,OAAOC,SAAW,GAC7BC,EAAA,MAAAC,IAAA,4CACCD,EAACE,EAAU,CAAAD,IAAA,2CAACE,OAAO,GAAGC,OAAO,yBAAyB,KAGvDZ,KAAKK,MAAMC,OAAOe,IAAIrB,KAAKC,c,CAuB1B,aAAAqB,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAe1B,KAAKK,MAAMM,O,CAE3BW,EAActB,KAAMuB,EAAO,CAC1BI,SAAU,OAEXC,EAA0BL,GAC1BM,EAAY7B,KAAKK,MAAMM,O,CAIjB,aAAAmB,CAAcP,GACpBQ,EAAc,gBAAiB/B,KAAMuB,E,CAG/B,iBAAAS,GACNhC,KAAKsB,cAActB,KAAKW,OAAQsB,UAAW,MAC3CjC,KAAK8B,cAAc9B,KAAKM,O,CAGlB,oBAAA4B,GACNR,EAAe1B,KAAKK,MAAMM,O","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolBreadcrumbDefaultStyle0","KolBreadcrumb","this","renderLink","link","index","lastIndex","state","_links","length","h","key","KolIconTag","_label","_icons","_hideLabel","Fragment","KolLinkTag","Object","assign","render","Host","class","map","validateLabel","value","_oldValue","initial","removeNavLabel","required","a11yHintLabelingLandmarks","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","undefined","disconnectedCallback"],"sources":["src/components/breadcrumb/style.scss?tag=kol-breadcrumb&mode=default&encapsulation=shadow","src/components/breadcrumb/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\tli,\n\tul {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tlist-style: none;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t\tflex-wrap: wrap;\n\t\tplace-items: center;\n\t}\n\n\t.kol-icon::part(separator) {\n\t\tfont-weight: 900;\n\t\tfont-size: 0.7em;\n\t}\n\n\t.kol-icon::part(separator):before {\n\t\tcontent: '\\f054';\n\t\tfont-family: 'Font Awesome 6 Free';\n\t}\n}\n","import type { BreadcrumbAPI, BreadcrumbLinkProps, BreadcrumbStates, LabelPropType, LinkProps, Stringified } from '../../schema';\nimport { a11yHintLabelingLandmarks, validateLabel } from '../../schema';\nimport { Component, Fragment, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolIconTag, KolLinkTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements BreadcrumbAPI {\n\tprivate readonly renderLink = (link: BreadcrumbLinkProps, index: number): JSX.Element => {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\treturn (\n\t\t\t<li key={index}>\n\t\t\t\t{index !== 0 && <KolIconTag _label=\"\" _icons=\"codicon codicon-chevron-right\" />}\n\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t<span>\n\t\t\t\t\t\t{link._hideLabel ? (\n\t\t\t\t\t\t\t<KolIconTag _label={link._label} _icons={typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event'} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>{link._label}</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\t<KolLinkTag {...link}></KolLinkTag>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-breadcrumb\">\n\t\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<KolIconTag _label=\"\" _icons=\"codicon codicon-home\" />…\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._links.map(this.renderLink)}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<BreadcrumbLinkProps[]>;\n\n\t@State() public state: BreadcrumbStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;+WAAA,MAAMA,EAAkB,i7IACxB,MAAAC,EAAeD,E,MCgBFE,EAAa,M,yBACRC,KAAAC,WAAa,CAACC,EAA2BC,KACzD,MAAMC,EAAYJ,KAAKK,MAAMC,OAAOC,OAAS,EAC7C,OACCC,EAAA,MAAIC,IAAKN,GACPA,IAAU,GAAKK,EAACE,EAAU,CAACC,OAAO,GAAGC,OAAO,kCAC5CT,IAAUC,EACVI,EAAA,YACEN,EAAKW,WACLL,EAACE,EAAU,CAACC,OAAQT,EAAKS,OAAQC,cAAeV,EAAKU,SAAW,SAAWV,EAAKU,OAAS,iCAEzFJ,EAAAM,EAAA,KAAGZ,EAAKS,SAIVH,EAACO,EAAUC,OAAAC,OAAA,GAAKf,IAEb,E,uDA+BmC,CACzCS,OAAQ,GACRL,OAAQ,G,CA7BF,MAAAY,GACN,OACCV,EAACW,EAAI,CAAAV,IAAA,2CAACW,MAAM,kBACXZ,EAAA,OAAAC,IAAA,wDAAiBT,KAAKK,MAAMM,QAC3BH,EAAA,MAAAC,IAAA,4CACET,KAAKK,MAAMC,OAAOC,SAAW,GAC7BC,EAAA,MAAAC,IAAA,4CACCD,EAACE,EAAU,CAAAD,IAAA,2CAACE,OAAO,GAAGC,OAAO,yBAAyB,KAGvDZ,KAAKK,MAAMC,OAAOe,IAAIrB,KAAKC,c,CAuB1B,aAAAqB,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAe1B,KAAKK,MAAMM,O,CAE3BW,EAActB,KAAMuB,EAAO,CAC1BI,SAAU,OAEXC,EAA0BL,GAC1BM,EAAY7B,KAAKK,MAAMM,O,CAIjB,aAAAmB,CAAcP,GACpBQ,EAAc,gBAAiB/B,KAAMuB,E,CAG/B,iBAAAS,GACNhC,KAAKsB,cAActB,KAAKW,OAAQsB,UAAW,MAC3CjC,KAAK8B,cAAc9B,KAAKM,O,CAGlB,oBAAA4B,GACNR,EAAe1B,KAAKK,MAAMM,O","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as o,H as s}from"./index-72fcfd9d.js";const t=class{constructor(s){e(this,s),this.state={}}render(){return o(s,{key:"d70d07aee8bf780d21f93ad48d5549e65e889f02",class:"kol-button-group-wc"},o("slot",{key:"3dfb84fee69b23211aab06b29d28690cdebe5ffc"}))}};export{t as kol_button_group_wc};
+import{r as o,h as s,H as t}from"./index-d62ddd65.js";const c=class{constructor(s){o(this,s),this.state={}}render(){return s(t,{key:"77e84f58559b809dcbd4c386e1394d279fa7a54d",class:"kol-button-group-wc"},s("slot",{key:"49f435ce5f6c78e6923f6983dfd1944553311f8c"}))}};export{c as kol_button_group_wc};

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

@@ -1 +1 @@
-{"version":3,"names":["KolButtonGroupWc","render","h","Host","key","class"],"sources":["src/components/button-group/component.tsx"],"sourcesContent":["import type { ButtonGroupAPI, ButtonGroupStates } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, State } from '@stencil/core';\n\n@Component({\n\ttag: 'kol-button-group-wc',\n\tshadow: false,\n})\n/**\n * @deprecated This component has been deprecated as it does not contribute significantly to accessibility.\n */\nexport class KolButtonGroupWc implements ButtonGroupAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-button-group-wc\">\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@State() public state: ButtonGroupStates = {};\n}\n"],"mappings":";;;4DAWaA,EAAgB,M,oCASe,E,CARpC,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,uBACXH,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["KolButtonGroupWc","render","h","Host","key","class"],"sources":["src/components/button-group/component.tsx"],"sourcesContent":["import type { ButtonGroupAPI, ButtonGroupStates } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, State } from '@stencil/core';\n\n/**\n * @deprecated This component has been deprecated as it does not contribute significantly to accessibility.\n * @internal\n */\n@Component({\n\ttag: 'kol-button-group-wc',\n\tshadow: false,\n})\nexport class KolButtonGroupWc implements ButtonGroupAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-button-group-wc\">\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@State() public state: ButtonGroupStates = {};\n}\n"],"mappings":";;;4DAYaA,EAAgB,M,oCASe,E,CARpC,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,uBACXH,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

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

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

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}from"./index-72fcfd9d.js";import{c as i}from"./component-names-0a8a1a6c.js";const o="/*\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}",s=o,a=class{constructor(e){n(this,e),this.catchRef=n=>{this.buttonWcRef=n},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}async getValue(){return this._value}async focus(){await this.kolFocus()}async kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){return e(t,{key:"3742a4fb39143d12413b25ea1e3bf1f392be2869",class:"kol-button-link"},e(i,{key:"95ff1c9b62b871a945c82d3ff421a11f1dbdf04e",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_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:"1f37a941df1a123f98e5a18199d5d77581344982",name:"expert",slot:"expert"})))}};a.style={default:s};export{a as kol_button_link};
+import{r as n,h as e,H as t}from"./index-d62ddd65.js";import{c as i}from"./component-names-7f2c991e.js";const o="/*\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}",s=o,a=class{constructor(e){n(this,e),this.catchRef=n=>{this.buttonWcRef=n},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}async getValue(){return this._value}async focus(){await this.kolFocus()}async kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){return e(t,{key:"3742a4fb39143d12413b25ea1e3bf1f392be2869",class:"kol-button-link"},e(i,{key:"95ff1c9b62b871a945c82d3ff421a11f1dbdf04e",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_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:"1f37a941df1a123f98e5a18199d5d77581344982",name:"expert",slot:"expert"})))}};a.style={default:s};export{a as kol_button_link};

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-72fcfd9d.js";import{s as a,t as d}from"./events-29e84d75.js";import{n as o}from"./dev.utils-27d22034.js";import{p as n,a as l}from"./controller-65234607.js";import{A as h}from"./associated.controller-4715556c.js";import{a as r,f as c}from"./component-names-0a8a1a6c.js";import{i as f,b as v,w as u,x as b,y as m,q as p,s as y}from"./prop.validators-543d0c7b.js";import{v as _}from"./access-key-34f992c3.js";import{v as j,a as g,b as x}from"./aria-expanded-2a5c6c4e.js";import{v as k}from"./icons-33fc85f1.js";import{s as A}from"./reuse-523ba2ac.js";import{v as C}from"./custom-class-918278a4.js";import{v as S}from"./disabled-0e948e69.js";import{v as w}from"./hide-label-7d9e8ee6.js";import{a as B}from"./label-541a8424.js";import{v as V}from"./tab-index-aa2012d4.js";import{v as I}from"./tooltip-align-01afdf25.js";import"./dev.utils-fab45cbc.js";import"./index-fcc5bd94.js";import"./common-54bf85ba.js";import"./align-51311afa.js";const K=(t,a)=>{f(t,"_ariaControls",a)},T=(t,a)=>{v(t,"_ariaSelected",a)},L=(t,a)=>{u(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),a)},D=["button","reset","submit"],E=(t,a)=>{u(t,"_type",(t=>"string"==typeof t&&D.includes(t)),new Set([`KoliBriButtonType {${D.join(", ")}`]),a)},H=["primary","secondary","normal","tertiary","danger","ghost","custom"],O=(t,a)=>{u(t,"_variant",(t=>"string"==typeof t&&H.includes(t)),new Set([`KoliBriButtonVariant {${H.join(", ")}`]),a,{defaultValue:"normal"})},q=class{async kolFocus(){var t;null===(t=this.buttonRef)||void 0===t||t.focus()}render(){var a,e;const s=A(this.state._label),l=Boolean(null===(e=null===(a=this.state._ariaDescription)||void 0===a?void 0:a.trim())||void 0===e?void 0:e.length);return t(i,{key:"5516bef539eb9262e669fe92f72dc243d8920bd0",class:"kol-button-wc"},t("button",Object.assign({key:"1d3eb3a7720f306a3c186feedfd365bf5331c86c",ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-describedby":l?this.internalDescriptionById:void 0,"aria-expanded":b(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":m(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(c,{key:"3ba922687287ba66ce958e13b98802e62f333079",class:"button-inner",_accessKey:this.state._accessKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:s?"":this.state._label},t("slot",{key:"9ee6d1239e3012f306e0b3ae8fc984db25225507",name:"expert",slot:"expert"}))),t(r,{key:"8ece133d5b3f4f3832e60e26b804c58244c8b364","aria-hidden":"true",hidden:s||!this.state._hideLabel,_accessKey:this._accessKey,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}),l&&t("span",{key:"f2a460b10f336b17add6fd3663c0f4ceef91ddb5",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}constructor(t){s(this,t),this.internalDescriptionById=o(),this.catchRef=t=>{this.buttonRef=t},this.onClick=t=>{var e,i;"submit"===this.state._type?n({form:this.host,ref:this.buttonRef}):"reset"===this.state._type?l({form:this.host,ref:this.buttonRef}):(a(t),d("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)&&(p(t,this.buttonRef),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._value)))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=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 h(this,"button",this.host)}validateAccessKey(t){_(this,t)}validateAriaControls(t){K(this,t)}validateAriaDescription(t){j(this,t)}validateAriaExpanded(t){g(this,t)}validateAriaSelected(t){T(this,t)}validateCustomClass(t){C(this,t)}validateDisabled(t){S(this,t)}validateHideLabel(t){w(this,t)}validateIcons(t){k(this,t)}validateId(t){f(this,"_id",t)}validateLabel(t){B(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){L(this,t)}validateRole(t){x(this,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){V(this,t)}validateTooltipAlign(t){I(this,t)}validateType(t){E(this,t)}validateValue(t){y(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){O(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaDescription(this._ariaDescription),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"],_ariaDescription:["validateAriaDescription"],_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{q as kol_button_wc};
+import{h as t,H as i,r as s,g as e}from"./index-d62ddd65.js";import{s as a,t as d}from"./events-29e84d75.js";import{n as o}from"./dev.utils-e45b01b6.js";import{p as n,a as l}from"./controller-b58153a2.js";import{A as h}from"./associated.controller-4715556c.js";import{a as r,f as c}from"./component-names-7f2c991e.js";import{i as f,b as v,w as u,x as b,y as m,q as p,s as y}from"./prop.validators-543d0c7b.js";import{v as _}from"./access-key-34f992c3.js";import{v as j,a as g,b as x}from"./aria-expanded-2a5c6c4e.js";import{v as k}from"./icons-33fc85f1.js";import{s as A}from"./reuse-523ba2ac.js";import{v as C}from"./custom-class-918278a4.js";import{v as S}from"./disabled-0e948e69.js";import{v as w}from"./hide-label-7d9e8ee6.js";import{a as B}from"./label-541a8424.js";import{v as V}from"./tab-index-aa2012d4.js";import{v as I}from"./tooltip-align-01afdf25.js";import"./dev.utils-fab45cbc.js";import"./index-fcc5bd94.js";import"./common-54bf85ba.js";import"./align-51311afa.js";const K=(t,a)=>{f(t,"_ariaControls",a)},T=(t,a)=>{v(t,"_ariaSelected",a)},L=(t,a)=>{u(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),a)},D=["button","reset","submit"],E=(t,a)=>{u(t,"_type",(t=>"string"==typeof t&&D.includes(t)),new Set([`KoliBriButtonType {${D.join(", ")}`]),a)},H=["primary","secondary","normal","tertiary","danger","ghost","custom"],O=(t,a)=>{u(t,"_variant",(t=>"string"==typeof t&&H.includes(t)),new Set([`KoliBriButtonVariant {${H.join(", ")}`]),a,{defaultValue:"normal"})},q=class{async kolFocus(){var t;null===(t=this.buttonRef)||void 0===t||t.focus()}render(){var a,e;const s=A(this.state._label),l=Boolean(null===(e=null===(a=this.state._ariaDescription)||void 0===a?void 0:a.trim())||void 0===e?void 0:e.length);return t(i,{key:"5516bef539eb9262e669fe92f72dc243d8920bd0",class:"kol-button-wc"},t("button",Object.assign({key:"1d3eb3a7720f306a3c186feedfd365bf5331c86c",ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-describedby":l?this.internalDescriptionById:void 0,"aria-expanded":b(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":m(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(c,{key:"3ba922687287ba66ce958e13b98802e62f333079",class:"button-inner",_accessKey:this.state._accessKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:s?"":this.state._label},t("slot",{key:"9ee6d1239e3012f306e0b3ae8fc984db25225507",name:"expert",slot:"expert"}))),t(r,{key:"8ece133d5b3f4f3832e60e26b804c58244c8b364","aria-hidden":"true",hidden:s||!this.state._hideLabel,_accessKey:this._accessKey,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}),l&&t("span",{key:"f2a460b10f336b17add6fd3663c0f4ceef91ddb5",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}constructor(t){s(this,t),this.internalDescriptionById=o(),this.catchRef=t=>{this.buttonRef=t},this.onClick=t=>{var e,i;"submit"===this.state._type?n({form:this.host,ref:this.buttonRef}):"reset"===this.state._type?l({form:this.host,ref:this.buttonRef}):(a(t),d("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)&&(p(t,this.buttonRef),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._value)))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=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 h(this,"button",this.host)}validateAccessKey(t){_(this,t)}validateAriaControls(t){K(this,t)}validateAriaDescription(t){j(this,t)}validateAriaExpanded(t){g(this,t)}validateAriaSelected(t){T(this,t)}validateCustomClass(t){C(this,t)}validateDisabled(t){S(this,t)}validateHideLabel(t){w(this,t)}validateIcons(t){k(this,t)}validateId(t){f(this,"_id",t)}validateLabel(t){B(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){L(this,t)}validateRole(t){x(this,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){V(this,t)}validateTooltipAlign(t){I(this,t)}validateType(t){E(this,t)}validateValue(t){y(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){O(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaDescription(this._ariaDescription),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"],_ariaDescription:["validateAriaDescription"],_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{q as kol_button_wc};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-72fcfd9d.js";import{c as i}from"./component-names-0a8a1a6c.js";const s="@charset \"UTF-8\";\n/*\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-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-block;\n  }\n  :is(a, button) {\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  :is(a, button)::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  /* TODO: Why we need this? */\n  :is(a, button) > .kol-span-wc {\n    margin: auto;\n    width: 100%;\n  }\n}",o=s,a=class{constructor(e){n(this,e),this.catchRef=n=>{this.buttonWcRef=n},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=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"}async getValue(){return this._value}async focus(){await this.kolFocus()}async kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){return e(t,{key:"515bfb8d7870ebf2aca5f0c4d824e26d580c7d5d",class:"kol-button"},e(i,{key:"d072d81aac487b8534b42ef47df1cfa016352290",ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},e("slot",{key:"412a7bc77ba0903f3d3db904e112c81c55ca4baa",name:"expert",slot:"expert"})))}};a.style={default:o};export{a as kol_button};
+import{r as n,h as e,H as t}from"./index-d62ddd65.js";import{c as i}from"./component-names-7f2c991e.js";const s="@charset \"UTF-8\";\n/*\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-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-block;\n  }\n  :is(a, button) {\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  :is(a, button)::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  /* TODO: Why we need this? */\n  :is(a, button) > .kol-span-wc {\n    margin: auto;\n    width: 100%;\n  }\n}",o=s,a=class{constructor(e){n(this,e),this.catchRef=n=>{this.buttonWcRef=n},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=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"}async getValue(){return this._value}async focus(){await this.kolFocus()}async kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){return e(t,{key:"515bfb8d7870ebf2aca5f0c4d824e26d580c7d5d",class:"kol-button"},e(i,{key:"d072d81aac487b8534b42ef47df1cfa016352290",ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},e("slot",{key:"412a7bc77ba0903f3d3db904e112c81c55ca4baa",name:"expert",slot:"expert"})))}};a.style={default:o};export{a as kol_button};

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-72fcfd9d.js";import{t as i}from"./i18n-8640d789.js";import{w as o}from"./validation-2e99145a.js";import{b as a,c as s}from"./component-names-0a8a1a6c.js";import{v as l}from"./has-closer-1805c7a8.js";import{s as r}from"./prop.validators-543d0c7b.js";import{v as d}from"./label-541a8424.js";import"./i18n-7ea9f137.js";import"./reuse-523ba2ac.js";import"./index-fcc5bd94.js";import"./dev.utils-fab45cbc.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  :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}",h=c,b=class{constructor(e){n(this,e),this.close=()=>{var n;void 0!==(null===(n=this._on)||void 0===n?void 0:n.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=n=>"object"==typeof n&&null!==n&&"function"==typeof n.onClose,this._on=void 0,this._hasCloser=!1,this._label=void 0,this._level=1,this.state={_label:""}}render(){return e(t,{key:"d709f6f5929c6f14ec756692979b28b54f68a3d8",class:"kol-card"},e("div",{key:"4124876ff829f50bcaa6ba42ede3bc6510bec733",class:"card"},e("div",{key:"1fb33811e88ea804e0547d4d4f2ecc0f57cb0bec",class:"header"},e(a,{key:"9b3123c1e1017af55116f42c05b618a2b76279ef",_label:this.state._label,_level:this.state._level})),e("div",{key:"06e5801a62c8630820cac20f8c314c9bb23879ca",class:"content"},e("slot",{key:"7facf55ee995d0d008d1cdaa3a0fd0d0a83acbd7"})),this.state._hasCloser&&e(s,{key:"48ef49d7d188f505c294b85ab41060a175e5cbd4",class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:i("kol-close"),_on:this.on,_tooltipAlign:"left"})))}validateOn(n){this.validateOnValue(n)&&r(this,"_on",{onClose:n.onClose})}validateHasCloser(n){l(this,n)}validateLabel(n){d(this,n,{required:!0})}validateLevel(n){o(this,n)}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:h};export{b as kol_card};
+import{r as n,h as e,H as t}from"./index-d62ddd65.js";import{t as i}from"./i18n-8640d789.js";import{w as o}from"./validation-2e99145a.js";import{b as a,c as s}from"./component-names-7f2c991e.js";import{v as l}from"./has-closer-1805c7a8.js";import{s as r}from"./prop.validators-543d0c7b.js";import{v as d}from"./label-541a8424.js";import"./i18n-7ea9f137.js";import"./reuse-523ba2ac.js";import"./index-fcc5bd94.js";import"./dev.utils-fab45cbc.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  :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}",h=c,b=class{constructor(e){n(this,e),this.close=()=>{var n;void 0!==(null===(n=this._on)||void 0===n?void 0:n.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=n=>"object"==typeof n&&null!==n&&"function"==typeof n.onClose,this._on=void 0,this._hasCloser=!1,this._label=void 0,this._level=1,this.state={_label:""}}render(){return e(t,{key:"d709f6f5929c6f14ec756692979b28b54f68a3d8",class:"kol-card"},e("div",{key:"4124876ff829f50bcaa6ba42ede3bc6510bec733",class:"card"},e("div",{key:"1fb33811e88ea804e0547d4d4f2ecc0f57cb0bec",class:"header"},e(a,{key:"9b3123c1e1017af55116f42c05b618a2b76279ef",_label:this.state._label,_level:this.state._level})),e("div",{key:"06e5801a62c8630820cac20f8c314c9bb23879ca",class:"content"},e("slot",{key:"7facf55ee995d0d008d1cdaa3a0fd0d0a83acbd7"})),this.state._hasCloser&&e(s,{key:"48ef49d7d188f505c294b85ab41060a175e5cbd4",class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:i("kol-close"),_on:this.on,_tooltipAlign:"left"})))}validateOn(n){this.validateOnValue(n)&&r(this,"_on",{onClose:n.onClose})}validateHasCloser(n){l(this,n)}validateLabel(n){d(this,n,{required:!0})}validateLevel(n){o(this,n)}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:h};export{b as kol_card};