@public-ui/components 4.1.2-rc.7 → 4.1.2-rc.8

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

@@ -1 +1 @@
-{"version":3,"file":"kol-avatar.entry.cjs.js","sources":["src/internal/functional-components/avatar/component.tsx","src/internal/props/color.ts","src/internal/functional-components/avatar/api.tsx","src/internal/functional-components/avatar/controller.ts","src/components/avatar/style.scss?tag=kol-avatar&mode=default&encapsulation=shadow","src/components/avatar/component.tsx"],"sourcesContent":["import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport { translate } from '../../../i18n';\nimport { bem } from '../../../schema/bem-registry';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { AvatarApi } from './api';\n\nconst BEM_BLOCK_AVATAR = 'kol-avatar';\nconst BEM_CLASS_AVATAR__IMAGE = bem(BEM_BLOCK_AVATAR, 'image');\nconst BEM_CLASS_AVATAR__INITIALS = bem(BEM_BLOCK_AVATAR, 'initials');\n\nexport const AvatarFC: FC<FunctionalComponentProps<AvatarApi>> = (props) => {\n\tconst { color, initials, label, src } = props;\n\n\treturn (\n\t\t<div\n\t\t\taria-label={translate('kol-avatar-alt', { placeholders: { name: label } })}\n\t\t\tclass=\"kol-avatar\"\n\t\t\trole=\"img\"\n\t\t\tstyle={{\n\t\t\t\tbackgroundColor: color.backgroundColor,\n\t\t\t\tcolor: color.foregroundColor,\n\t\t\t}}\n\t\t>\n\t\t\t{src ? (\n\t\t\t\t<img alt=\"\" aria-hidden=\"true\" class={BEM_CLASS_AVATAR__IMAGE} src={src} />\n\t\t\t) : (\n\t\t\t\t<span aria-hidden=\"true\" class={BEM_CLASS_AVATAR__INITIALS}>\n\t\t\t\t\t{initials}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n","import type { ColorPair } from '../../schema';\nimport { createContrastColorPair } from '../../schema';\nimport { createPropDefinition, type Prop } from './helpers/factory';\n\n/**\n * Color prop for foreground/background color pairs\n *\n * Description:\n * Defines a color pair consisting of a foreground (text) and background color. Both colors\n * must be provided as valid hex values. The component automatically calculates contrast-safe\n * color pairs to ensure readability.\n *\n * Usage (according to WCAG 2.1):\n * - Single hex value: color=\"#003366\" (background; foreground is auto-calculated for contrast)\n * - Color pair object: color={ backgroundColor: \"#003366\", foregroundColor: \"#ffffff\" }\n * - All color combinations must meet WCAG contrast requirements:\n *   - Normal text: minimum contrast ratio 4.5:1 (WCAG 1.4.3 Contrast Minimum, Level AA)\n *   - Large text (≥18pt or ≥14pt bold): minimum contrast ratio 3:1\n *   - Enhanced: minimum contrast ratio 7:1 for normal text (WCAG 1.4.6 Contrast Enhanced, Level AAA)\n * - Non-text elements (icons, borders) require a minimum contrast ratio of 3:1 (WCAG 1.4.11 Non-text Contrast)\n * - Color must not be the only means of conveying information (WCAG 1.4.1 Use of Color)\n *\n * @see https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html\n * @see https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html\n * @see https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html\n * @see https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html\n */\nconst HEX_REGEX = /^#((\\d|[a-f]){8}|(\\d|[a-f]){6}|(\\d|[a-f]){3,4})$/i;\nfunction isHexString(value: string): boolean {\n\treturn HEX_REGEX.test(value);\n}\n\nfunction normalizer(value: unknown): ColorPair {\n\tif (typeof value === 'string' && isHexString(value)) {\n\t\tconst colors = createContrastColorPair(value);\n\t\treturn {\n\t\t\tbackgroundColor: colors.background,\n\t\t\tforegroundColor: colors.foreground,\n\t\t};\n\t} else if (typeof value === 'object' && value) {\n\t\tconst colorPair = value as ColorPair;\n\t\tif (\n\t\t\ttypeof colorPair.backgroundColor === 'string' &&\n\t\t\ttypeof colorPair.foregroundColor === 'string' &&\n\t\t\tisHexString(colorPair.backgroundColor) &&\n\t\t\tisHexString(colorPair.foregroundColor)\n\t\t) {\n\t\t\tconst colors = createContrastColorPair({\n\t\t\t\tbackground: colorPair.backgroundColor,\n\t\t\t\tforeground: colorPair.foregroundColor,\n\t\t\t});\n\t\t\treturn {\n\t\t\t\tbackgroundColor: colors.background,\n\t\t\t\tforegroundColor: colors.foreground,\n\t\t\t};\n\t\t}\n\t}\n\tthrow new Error(`Invalid color ${value as string}`);\n}\n\nfunction validator(value: ColorPair) {\n\treturn isHexString(value.foregroundColor) && isHexString(value.backgroundColor);\n}\n\nexport type ColorProp = Prop<'color', ColorPair | string, ColorPair>;\nexport const colorProp = createPropDefinition<ColorProp>(\n\t'color',\n\t{\n\t\tbackgroundColor: '#d3d3d3',\n\t\tforegroundColor: '#3f3f3f',\n\t},\n\tnormalizer,\n\tvalidator,\n);\n","import { colorProp, labelProp, srcProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const avatarPropsConfig = {\n\toptional: [colorProp, srcProp],\n\trequired: [labelProp],\n} as const satisfies PropsConfigShape;\n\nexport type AvatarApi = ApiFromConfig<typeof avatarPropsConfig, { States: { initials: string } }>;\n","import type { ColorPair } from '../../../schema';\nimport { colorProp, labelProp, srcProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, GetStateFn, ResolvedInputProps, SetStateFn } from '../generic-types';\nimport type { AvatarApi } from './api';\nimport { avatarPropsConfig } from './api';\n\n/**\n * Formats a single name as an initial by taking the first character and converting it to uppercase.\n * @param name The name to format as an initial\n * @returns The uppercase first character, or empty string if name is empty\n */\nconst formatNameAsInitial = (name: string): string => {\n\tif (name.length === 0) {\n\t\treturn '';\n\t}\n\n\treturn name[0].toUpperCase();\n};\n\n/**\n * Normalizes the initials from a full name or label.\n * If the name contains multiple words, returns the first letters of the first and last words.\n * Otherwise, returns the first letter of the entire input.\n * @param value The input value to normalize as initials\n * @returns The normalized initials string\n */\nconst normalizeInitials = (value: string): string => {\n\tconst names = value.trim().split(/\\s+/); // split by any whitespace characters\n\tconst first = names[0];\n\tconst last = names[names.length - 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(value);\n};\n\nexport class AvatarController extends BaseController<AvatarApi> implements ControllerInterface<AvatarApi> {\n\tpublic constructor(setState: SetStateFn<AvatarApi>, getState: GetStateFn<AvatarApi>) {\n\t\tsuper(avatarPropsConfig, setState, getState);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<AvatarApi>): void {\n\t\tconst { color, label, src } = props;\n\t\tthis.watchColor(color);\n\t\tthis.watchLabel(label);\n\t\tthis.watchSrc(src);\n\t}\n\n\tpublic watchColor(value?: string | ColorPair): void {\n\t\tcolorProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('color', v);\n\t\t});\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('label', v);\n\t\t\tthis.setState('initials', normalizeInitials(v));\n\t\t});\n\t}\n\n\tpublic watchSrc(value?: string): void {\n\t\tsrcProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('src', v);\n\t\t});\n\t}\n}\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n@use '../host-display-block' as *;\n\n@layer kol-component {\n\t.kol-avatar,\n\t.kol-avatar__image,\n\t.kol-avatar__initials {\n\t\tborder-radius: 50%;\n\t}\n\n\t.kol-avatar {\n\t\t/* Visible with forced colors  */\n\t\toutline: transparent solid to-rem(1);\n\n\t\tdisplay: flex;\n\t\twidth: to-rem(100);\n\t\theight: to-rem(100);\n\n\t\t&__initials {\n\t\t\tbackground-color: inherit;\n\t\t\tmargin: auto;\n\n\t\t\tfont-size: to-rem(40);\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { AvatarApi } from '../../internal/functional-components/avatar/api';\nimport { AvatarFC } from '../../internal/functional-components/avatar/component';\nimport { AvatarController } from '../../internal/functional-components/avatar/controller';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { ColorPair } from '../../schema';\n\n/**\n * The **Avatar** component displays either a small image of the user or their initials if no image is available.\n */\n@Component({\n\ttag: 'kol-avatar',\n\tshadow: true,\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n})\nexport class KolAvatar extends BaseWebComponent<AvatarApi> implements WebComponentInterface<AvatarApi> {\n\tprivate readonly ctrl = new AvatarController(this.setState, this.getState);\n\n\t/**\n\t * Defines the backgroundColor and foregroundColor.\n\t */\n\t@Prop()\n\tpublic _color?: string | ColorPair;\n\n\t@Watch('_color')\n\tpublic watchColor(value?: string | ColorPair): void {\n\t\tthis.ctrl.watchColor(value);\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()\n\tpublic _label!: string;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: string): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop()\n\tpublic _src?: string;\n\n\t@Watch('_src')\n\tpublic watchSrc(value?: string): void {\n\t\tthis.ctrl.watchSrc(value);\n\t}\n\n\t@State()\n\tpublic initials: string = '';\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tcolor: this._color,\n\t\t\tlabel: this._label,\n\t\t\tsrc: this._src,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<AvatarFC\n\t\t\t\t\tcolor={this.ctrl.getRenderProp('color')}\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tsrc={this.ctrl.getRenderProp('src')}\n\t\t\t\t\tinitials={this.initials}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":["bem","h","translate","createContrastColorPair","createPropDefinition","srcProp","labelProp","BaseController","BaseWebComponent","Host"],"mappings":";;;;;;;;;;;;;;;;;;;AAQA,MAAM,gBAAgB,GAAG,YAAY;AACrC,MAAM,uBAAuB,GAAGA,eAAG,CAAC,gBAAgB,EAAE,OAAO,CAAC;AAC9D,MAAM,0BAA0B,GAAGA,eAAG,CAAC,gBAAgB,EAAE,UAAU,CAAC;AAE7D,MAAM,QAAQ,GAA4C,CAAC,KAAK,KAAI;IAC1E,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,KAAK;AAE7C,IAAA,QACCC,OACa,CAAA,KAAA,EAAA,EAAA,YAAA,EAAAC,cAAS,CAAC,gBAAgB,EAAE,EAAE,YAAY,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,EAC1E,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,KAAK,EACV,KAAK,EAAE;YACN,eAAe,EAAE,KAAK,CAAC,eAAe;YACtC,KAAK,EAAE,KAAK,CAAC,eAAe;SAC5B,EAAA,EAEA,GAAG,IACHD,iBAAK,GAAG,EAAC,EAAE,EAAA,aAAA,EAAa,MAAM,EAAC,KAAK,EAAE,uBAAuB,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI,KAE3EA,iCAAkB,MAAM,EAAC,KAAK,EAAE,0BAA0B,EACxD,EAAA,QAAQ,CACH,CACP,CACI;AAER,CAAC;;ACPD,MAAM,SAAS,GAAG,mDAAmD;AACrE,SAAS,WAAW,CAAC,KAAa,EAAA;AACjC,IAAA,OAAO,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;AAC7B;AAEA,SAAS,UAAU,CAAC,KAAc,EAAA;IACjC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE;AACpD,QAAA,MAAM,MAAM,GAAGE,gCAAuB,CAAC,KAAK,CAAC;QAC7C,OAAO;YACN,eAAe,EAAE,MAAM,CAAC,UAAU;YAClC,eAAe,EAAE,MAAM,CAAC,UAAU;SAClC;;AACK,SAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,EAAE;QAC9C,MAAM,SAAS,GAAG,KAAkB;AACpC,QAAA,IACC,OAAO,SAAS,CAAC,eAAe,KAAK,QAAQ;AAC7C,YAAA,OAAO,SAAS,CAAC,eAAe,KAAK,QAAQ;AAC7C,YAAA,WAAW,CAAC,SAAS,CAAC,eAAe,CAAC;AACtC,YAAA,WAAW,CAAC,SAAS,CAAC,eAAe,CAAC,EACrC;YACD,MAAM,MAAM,GAAGA,gCAAuB,CAAC;gBACtC,UAAU,EAAE,SAAS,CAAC,eAAe;gBACrC,UAAU,EAAE,SAAS,CAAC,eAAe;AACrC,aAAA,CAAC;YACF,OAAO;gBACN,eAAe,EAAE,MAAM,CAAC,UAAU;gBAClC,eAAe,EAAE,MAAM,CAAC,UAAU;aAClC;;;AAGH,IAAA,MAAM,IAAI,KAAK,CAAC,iBAAiB,KAAe,CAAA,CAAE,CAAC;AACpD;AAEA,SAAS,SAAS,CAAC,KAAgB,EAAA;AAClC,IAAA,OAAO,WAAW,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI,WAAW,CAAC,KAAK,CAAC,eAAe,CAAC;AAChF;AAGO,MAAM,SAAS,GAAGC,gCAAoB,CAC5C,OAAO,EACP;AACC,IAAA,eAAe,EAAE,SAAS;AAC1B,IAAA,eAAe,EAAE,SAAS;AAC1B,CAAA,EACD,UAAU,EACV,SAAS,CACT;;ACtEM,MAAM,iBAAiB,GAAG;AAChC,IAAA,QAAQ,EAAE,CAAC,SAAS,EAAEC,WAAO,CAAC;IAC9B,QAAQ,EAAE,CAACC,eAAS,CAAC;CACe;;ACMrC,MAAM,mBAAmB,GAAG,CAAC,IAAY,KAAY;AACpD,IAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;AACtB,QAAA,OAAO,EAAE;;AAGV,IAAA,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;AAC7B,CAAC;AASD,MAAM,iBAAiB,GAAG,CAAC,KAAa,KAAY;IACnD,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC;AACvC,IAAA,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC;IACtB,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAGpC,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;QACvC,OAAO,CAAA,EAAG,mBAAmB,CAAC,KAAK,CAAC,CAAG,EAAA,mBAAmB,CAAC,IAAI,CAAC,CAAA,CAAE;;AAGnE,IAAA,OAAO,mBAAmB,CAAC,KAAK,CAAC;AAClC,CAAC;AAEK,MAAO,gBAAiB,SAAQC,+BAAyB,CAAA;IAC9D,WAAmB,CAAA,QAA+B,EAAE,QAA+B,EAAA;AAClF,QAAA,KAAK,CAAC,iBAAiB,EAAE,QAAQ,EAAE,QAAQ,CAAC;;AAGtC,IAAA,iBAAiB,CAAC,KAAoC,EAAA;QAC5D,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,KAAK;AACnC,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;AACtB,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;AACtB,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC;;AAGZ,IAAA,UAAU,CAAC,KAA0B,EAAA;QAC3C,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,KAAI;AAC5B,YAAA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;AAC/B,SAAC,CAAC;;AAGI,IAAA,UAAU,CAAC,KAAc,EAAA;QAC/BD,eAAS,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,KAAI;AAC5B,YAAA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;YAC9B,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;AAChD,SAAC,CAAC;;AAGI,IAAA,QAAQ,CAAC,KAAc,EAAA;QAC7BD,WAAO,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,KAAI;AAC1B,YAAA,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC,CAAC;AAC7B,SAAC,CAAC;;AAEH;;ACtED,MAAM,eAAe,GAAG,23LAA23L;;MCmBt4L,SAAU,GAAA,cAAQG,iCAA2B,CAAA;;;;AACxC,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC;AAoCnE,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;;AA3BrB,IAAA,UAAU,CAAC,KAA0B,EAAA;AAC3C,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;;AAUrB,IAAA,UAAU,CAAC,KAAc,EAAA;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;;AAUrB,IAAA,QAAQ,CAAC,KAAc,EAAA;AAC7B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;;IAMnB,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;YAC3B,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,GAAG,EAAE,IAAI,CAAC,IAAI;AACd,SAAA,CAAC;;IAGI,MAAM,GAAA;AACZ,QAAA,QACCP,QAACQ,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJR,OAAA,CAAC,QAAQ,EACR,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EACvC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EACvC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACtB,CAAA,CACI;;;;;;;;;;;;;;"}
+{"version":3,"file":"kol-avatar.entry.cjs.js","sources":["src/internal/props/color.ts","src/internal/functional-components/avatar/component.tsx","src/internal/functional-components/avatar/api.tsx","src/internal/functional-components/avatar/controller.ts","src/components/avatar/style.scss?tag=kol-avatar&mode=default&encapsulation=shadow","src/components/avatar/component.tsx"],"sourcesContent":["import type { ColorPair } from '../../schema';\nimport { createContrastColorPair } from '../../schema';\nimport { createPropDefinition, type Prop } from './helpers/factory';\n\n/**\n * Color prop for foreground/background color pairs\n *\n * Description:\n * Defines a color pair consisting of a foreground (text) and background color. Both colors\n * must be provided as valid hex values. The component automatically calculates contrast-safe\n * color pairs to ensure readability.\n *\n * Usage (according to WCAG 2.1):\n * - Single hex value: color=\"#003366\" (background; foreground is auto-calculated for contrast)\n * - Color pair object: color={ backgroundColor: \"#003366\", foregroundColor: \"#ffffff\" }\n * - All color combinations must meet WCAG contrast requirements:\n *   - Normal text: minimum contrast ratio 4.5:1 (WCAG 1.4.3 Contrast Minimum, Level AA)\n *   - Large text (≥18pt or ≥14pt bold): minimum contrast ratio 3:1\n *   - Enhanced: minimum contrast ratio 7:1 for normal text (WCAG 1.4.6 Contrast Enhanced, Level AAA)\n * - Non-text elements (icons, borders) require a minimum contrast ratio of 3:1 (WCAG 1.4.11 Non-text Contrast)\n * - Color must not be the only means of conveying information (WCAG 1.4.1 Use of Color)\n *\n * @see https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html\n * @see https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html\n * @see https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html\n * @see https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html\n */\nconst HEX_REGEX = /^#((\\d|[a-f]){8}|(\\d|[a-f]){6}|(\\d|[a-f]){3,4})$/i;\nfunction isHexString(value: string): boolean {\n\treturn HEX_REGEX.test(value);\n}\n\nfunction normalizer(value: unknown): ColorPair {\n\tif (typeof value === 'string' && isHexString(value)) {\n\t\tconst colors = createContrastColorPair(value);\n\t\treturn {\n\t\t\tbackgroundColor: colors.background,\n\t\t\tforegroundColor: colors.foreground,\n\t\t};\n\t} else if (typeof value === 'object' && value) {\n\t\tconst colorPair = value as ColorPair;\n\t\tif (\n\t\t\ttypeof colorPair.backgroundColor === 'string' &&\n\t\t\ttypeof colorPair.foregroundColor === 'string' &&\n\t\t\tisHexString(colorPair.backgroundColor) &&\n\t\t\tisHexString(colorPair.foregroundColor)\n\t\t) {\n\t\t\tconst colors = createContrastColorPair({\n\t\t\t\tbackground: colorPair.backgroundColor,\n\t\t\t\tforeground: colorPair.foregroundColor,\n\t\t\t});\n\t\t\treturn {\n\t\t\t\tbackgroundColor: colors.background,\n\t\t\t\tforegroundColor: colors.foreground,\n\t\t\t};\n\t\t}\n\t}\n\tthrow new Error(`Invalid color ${value as string}`);\n}\n\nfunction validator(value: ColorPair) {\n\treturn isHexString(value.foregroundColor) && isHexString(value.backgroundColor);\n}\n\nexport type ColorProp = Prop<'color', ColorPair | string, ColorPair>;\nexport const colorProp = createPropDefinition<ColorProp>(\n\t'color',\n\t{\n\t\tbackgroundColor: '#d3d3d3',\n\t\tforegroundColor: '#3f3f3f',\n\t},\n\tnormalizer,\n\tvalidator,\n);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport { translate } from '../../../i18n';\nimport { bem } from '../../../schema/bem-registry';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { AvatarApi } from './api';\n\nconst BEM_BLOCK_AVATAR = 'kol-avatar';\nconst BEM_CLASS_AVATAR__IMAGE = bem(BEM_BLOCK_AVATAR, 'image');\nconst BEM_CLASS_AVATAR__INITIALS = bem(BEM_BLOCK_AVATAR, 'initials');\n\nexport const AvatarFC: FC<FunctionalComponentProps<AvatarApi>> = (props) => {\n\tconst { color, initials, label, src } = props;\n\n\treturn (\n\t\t<div\n\t\t\taria-label={translate('kol-avatar-alt', { placeholders: { name: label } })}\n\t\t\tclass=\"kol-avatar\"\n\t\t\trole=\"img\"\n\t\t\tstyle={{\n\t\t\t\tbackgroundColor: color.backgroundColor,\n\t\t\t\tcolor: color.foregroundColor,\n\t\t\t}}\n\t\t>\n\t\t\t{src ? (\n\t\t\t\t<img alt=\"\" aria-hidden=\"true\" class={BEM_CLASS_AVATAR__IMAGE} src={src} />\n\t\t\t) : (\n\t\t\t\t<span aria-hidden=\"true\" class={BEM_CLASS_AVATAR__INITIALS}>\n\t\t\t\t\t{initials}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n","import { colorProp, labelProp, srcProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const avatarPropsConfig = {\n\toptional: [colorProp, srcProp],\n\trequired: [labelProp],\n} as const satisfies PropsConfigShape;\n\nexport type AvatarApi = ApiFromConfig<typeof avatarPropsConfig, { States: { initials: string } }>;\n","import type { ColorPair } from '../../../schema';\nimport { colorProp, labelProp, srcProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';\nimport type { AvatarApi } from './api';\nimport { avatarPropsConfig } from './api';\n\n/**\n * Formats a single name as an initial by taking the first character and converting it to uppercase.\n * @param name The name to format as an initial\n * @returns The uppercase first character, or empty string if name is empty\n */\nconst formatNameAsInitial = (name: string): string => {\n\tif (name.length === 0) {\n\t\treturn '';\n\t}\n\n\treturn name[0].toUpperCase();\n};\n\n/**\n * Normalizes the initials from a full name or label.\n * If the name contains multiple words, returns the first letters of the first and last words.\n * Otherwise, returns the first letter of the entire input.\n * @param value The input value to normalize as initials\n * @returns The normalized initials string\n */\nconst normalizeInitials = (value: string): string => {\n\tconst names = value.trim().split(/\\s+/); // split by any whitespace characters\n\tconst first = names[0];\n\tconst last = names[names.length - 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(value);\n};\n\nexport class AvatarController extends BaseController<AvatarApi> implements ControllerInterface<AvatarApi> {\n\tpublic constructor(stateAccess: StateAccess<AvatarApi>) {\n\t\tsuper(stateAccess, avatarPropsConfig);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<AvatarApi>): void {\n\t\tconst { color, label, src } = props;\n\t\tthis.watchColor(color);\n\t\tthis.watchLabel(label);\n\t\tthis.watchSrc(src);\n\t}\n\n\tpublic watchColor(value?: string | ColorPair): void {\n\t\tcolorProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('color', v);\n\t\t});\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('label', v);\n\t\t\tthis.setState('initials', normalizeInitials(v));\n\t\t});\n\t}\n\n\tpublic watchSrc(value?: string): void {\n\t\tsrcProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('src', v);\n\t\t});\n\t}\n}\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n@use '../host-display-block' as *;\n\n@layer kol-component {\n\t.kol-avatar,\n\t.kol-avatar__image,\n\t.kol-avatar__initials {\n\t\tborder-radius: 50%;\n\t}\n\n\t.kol-avatar {\n\t\t/* Visible with forced colors  */\n\t\toutline: transparent solid to-rem(1);\n\n\t\tdisplay: flex;\n\t\twidth: to-rem(100);\n\t\theight: to-rem(100);\n\n\t\t&__initials {\n\t\t\tbackground-color: inherit;\n\t\t\tmargin: auto;\n\n\t\t\tfont-size: to-rem(40);\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { AvatarApi } from '../../internal/functional-components/avatar/api';\nimport { AvatarFC } from '../../internal/functional-components/avatar/component';\nimport { AvatarController } from '../../internal/functional-components/avatar/controller';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { ColorPair } from '../../schema';\n\n/**\n * The **Avatar** component displays either a small image of the user or their initials if no image is available.\n */\n@Component({\n\ttag: 'kol-avatar',\n\tshadow: true,\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n})\nexport class KolAvatar extends BaseWebComponent<AvatarApi> implements WebComponentInterface<AvatarApi> {\n\tprivate readonly ctrl = new AvatarController(this.stateAccess);\n\n\t/**\n\t * Defines the backgroundColor and foregroundColor.\n\t */\n\t@Prop()\n\tpublic _color?: string | ColorPair;\n\n\t@Watch('_color')\n\tpublic watchColor(value?: string | ColorPair): void {\n\t\tthis.ctrl.watchColor(value);\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()\n\tpublic _label!: string;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: string): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop()\n\tpublic _src?: string;\n\n\t@Watch('_src')\n\tpublic watchSrc(value?: string): void {\n\t\tthis.ctrl.watchSrc(value);\n\t}\n\n\t@State()\n\tpublic initials: string = '';\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tcolor: this._color,\n\t\t\tlabel: this._label,\n\t\t\tsrc: this._src,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<AvatarFC\n\t\t\t\t\tcolor={this.ctrl.getRenderProp('color')}\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tsrc={this.ctrl.getRenderProp('src')}\n\t\t\t\t\tinitials={this.initials}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":["createContrastColorPair","createPropDefinition","bem","h","translate","srcProp","labelProp","BaseController","BaseWebComponent","Host"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-DT9bjXlJ.js"),component=require("./component-_osv0u4g.js"),common=require("./common-CyOOsddt.js"),color=require("./color-DgbilQH6.js"),icons=require("./icons-CtLpYmvA.js"),dev_utils=require("./dev.utils-DQ8NbpWO.js"),componentNames=require("./component-names-CLJnvcGE.js"),clsx=require("./clsx-Bm_HQUnh.js"),elementFocus=require("./element-focus-r03qIEIv.js");require("./tslib.es6-7DbU_BSw.js"),require("./bem-registry-BYsM9uZG.js"),require("./component-TRu1ySJ5.js"),require("./isArray-BOIOdEQh.js"),require("./contrast-6FMh-3Ia.js");const defaultStyleCss='/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1774956515321"); /* IE9*/\n  src: url("kolicons.eot?t=1774956515321#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1774956515321") format("woff2"), url("kolicons.woff?t=1774956515321") format("woff"), url("kolicons.ttf?t=1774956515321") format("truetype"), url("kolicons.svg?t=1774956515321#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-badge {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n  }\n  .kol-badge .kol-badge__smart-button .button {\n    color: inherit;\n  }\n}';common.featureHint("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const KolBadge=class{constructor(n){index.registerInstance(this,n),this.bgColorStr="#000",this.colorStr="#fff",this.id=dev_utils.nonce(),this.setSmartButtonRef=n=>{this.smartButtonRef=n},this._color="#000",this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"},_icons:{}},this.handleColorChange=n=>{const e=color.handleColorChange(n);this.bgColorStr=e.backgroundColor,this.colorStr=e.foregroundColor}}renderSmartButton(n){return index.h(componentNames.KolButtonWcTag,{ref:this.setSmartButtonRef,class:"kol-badge__smart-button",_ariaControls:this.id,_ariaDescription:n._ariaDescription,_variant:n._variant,_customClass:n._customClass,_disabled:n._disabled,_hideLabel:!0,_icons:n._icons,_id:n._id,_label:n._label,_on:n._on,_tooltipAlign:n._tooltipAlign})}async focus(){return elementFocus.delegateFocus(this.host,()=>elementFocus.setFocus(this.smartButtonRef))}render(){const n="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return index.h("span",{key:"70a488f527dbdf86543212c4e4325871cb63c10c",class:clsx.clsx("kol-badge",{"kol-badge--has-smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton}),style:{backgroundColor:this.bgColorStr,color:this.colorStr}},index.h(component.SpanFC,{key:"edef95c6d364b0d4c029180a138c08a6af7f2ceb",class:"kol-badge__label",id:n?this.id:void 0,allowMarkdown:!0,icons:this.state._icons,label:this._label}),n&&this.renderSmartButton(this.state._smartButton))}validateIcons(n){icons.validateIcons(this,n)}validateColor(n){color.validateColor(this,n,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(n){common.objectObjectHandler(n,()=>{try{n=common.parseJson(n)}catch(n){}common.setState(this,"_smartButton",n)})}componentWillLoad(){this.validateIcons(this._icons),this.validateColor(this._color),this.validateSmartButton(this._smartButton)}get host(){return index.getElement(this)}static get watchers(){return{_icons:["validateIcons"],_color:["validateColor"],_smartButton:["validateSmartButton"]}}};KolBadge.style={default:defaultStyleCss},exports.kol_badge=KolBadge;
+"use strict";var index=require("./index-Do5xA4dJ.js"),component=require("./component-C27tnivo.js"),common=require("./common-CyOOsddt.js"),color=require("./color-DgbilQH6.js"),icons=require("./icons-CtLpYmvA.js"),dev_utils=require("./dev.utils-jLeSRS1F.js"),componentNames=require("./component-names-5KS_pYRF.js"),clsx=require("./clsx-Bm_HQUnh.js"),elementFocus=require("./element-focus-r03qIEIv.js");require("./tslib.es6-7DbU_BSw.js"),require("./bem-registry-BRaXxTgN.js"),require("./component-CTPLUymr.js"),require("./isArray-BOIOdEQh.js"),require("./contrast-6FMh-3Ia.js");const defaultStyleCss='/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1775118370120"); /* IE9*/\n  src: url("kolicons.eot?t=1775118370120#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1775118370120") format("woff2"), url("kolicons.woff?t=1775118370120") format("woff"), url("kolicons.ttf?t=1775118370120") format("truetype"), url("kolicons.svg?t=1775118370120#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-badge {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n  }\n  .kol-badge .kol-badge__smart-button .button {\n    color: inherit;\n  }\n}';common.featureHint("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const KolBadge=class{constructor(n){index.registerInstance(this,n),this.bgColorStr="#000",this.colorStr="#fff",this.id=dev_utils.nonce(),this.setSmartButtonRef=n=>{this.smartButtonRef=n},this._color="#000",this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"},_icons:{}},this.handleColorChange=n=>{const e=color.handleColorChange(n);this.bgColorStr=e.backgroundColor,this.colorStr=e.foregroundColor}}renderSmartButton(n){return index.h(componentNames.KolButtonWcTag,{ref:this.setSmartButtonRef,class:"kol-badge__smart-button",_ariaControls:this.id,_ariaDescription:n._ariaDescription,_variant:n._variant,_customClass:n._customClass,_disabled:n._disabled,_hideLabel:!0,_icons:n._icons,_id:n._id,_label:n._label,_on:n._on,_tooltipAlign:n._tooltipAlign})}async focus(){return elementFocus.delegateFocus(this.host,()=>elementFocus.setFocus(this.smartButtonRef))}render(){const n="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return index.h("span",{key:"70a488f527dbdf86543212c4e4325871cb63c10c",class:clsx.clsx("kol-badge",{"kol-badge--has-smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton}),style:{backgroundColor:this.bgColorStr,color:this.colorStr}},index.h(component.SpanFC,{key:"edef95c6d364b0d4c029180a138c08a6af7f2ceb",class:"kol-badge__label",id:n?this.id:void 0,allowMarkdown:!0,icons:this.state._icons,label:this._label}),n&&this.renderSmartButton(this.state._smartButton))}validateIcons(n){icons.validateIcons(this,n)}validateColor(n){color.validateColor(this,n,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(n){common.objectObjectHandler(n,()=>{try{n=common.parseJson(n)}catch(n){}common.setState(this,"_smartButton",n)})}componentWillLoad(){this.validateIcons(this._icons),this.validateColor(this._color),this.validateSmartButton(this._smartButton)}get host(){return index.getElement(this)}static get watchers(){return{_icons:["validateIcons"],_color:["validateColor"],_smartButton:["validateSmartButton"]}}};KolBadge.style={default:defaultStyleCss},exports.kol_badge=KolBadge;

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-DT9bjXlJ.js"),common=require("./common-CyOOsddt.js"),label=require("./label-BpdiumjJ.js"),uniqueNavLabels=require("./unique-nav-labels-DJBlAxpe.js"),validation=require("./validation-CJn2v37b.js"),componentNames=require("./component-names-CLJnvcGE.js"),component=require("./component-TRu1ySJ5.js");require("./tslib.es6-7DbU_BSw.js"),require("./bem-registry-BYsM9uZG.js"),require("./clsx-Bm_HQUnh.js");const defaultStyleCss='/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1774956515321"); /* IE9*/\n  src: url("kolicons.eot?t=1774956515321#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1774956515321") format("woff2"), url("kolicons.woff?t=1774956515321") format("woff"), url("kolicons.ttf?t=1774956515321") format("truetype"), url("kolicons.svg?t=1774956515321#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n  }\n  .kol-breadcrumb__list, .kol-breadcrumb__list-element {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    flex-wrap: wrap;\n    place-items: center;\n    list-style: none;\n  }\n  .kol-breadcrumb__list-element:first-child:last-child {\n    min-height: var(--a11y-min-size);\n  }\n}',KolBreadcrumb=class{constructor(n){index.registerInstance(this,n),this.renderLink=(n,e)=>{const o=this.state._links.length-1;return index.h("li",{class:"kol-breadcrumb__list-element",key:e},e===o?index.h("span",{class:"kol-breadcrumb__list-element-span","aria-current":"page"},n._hideLabel?index.h(component.IconFC,{class:"kol-breadcrumb__icon",label:n._label,icons:"string"==typeof n._icons?n._icons:"kolicon-link"}):index.h(index.Fragment,null,n._label)):index.h(componentNames.KolLinkWcTag,Object.assign({class:"kol-breadcrumb__link",_inline:!1},n)),e!==o&&index.h(component.IconFC,{class:"kol-breadcrumb__separator",label:"",icons:"kolicon-chevron-right"}))},this.state={_label:"",_links:[]}}render(){return index.h("nav",{key:"bff94e213bc73c24069c1e5aa297aa54b6e98003",class:"kol-breadcrumb","aria-label":this.state._label},index.h("ul",{key:"2100b5df04175f39ebdfab1708100623856c4470",class:"kol-breadcrumb__list"},0===this.state._links.length&&index.h("li",{key:"3b73286454440609917059e00581d71ed20788d8"},index.h(component.IconFC,{key:"2b20cb24ae17a71c5b0dbeb713d1e32b04660f92",class:"kol-breadcrumb_icon",label:"",icons:"kolicon-house"}),"…"),this.state._links.map(this.renderLink)))}validateLabel(n,e,o=!1){o||uniqueNavLabels.removeNavLabel(this.state._label),label.validateLabel(this,n,{required:!0}),common.a11yHintLabelingLandmarks(n),uniqueNavLabels.addNavLabel(this.state._label)}validateLinks(n){validation.watchNavLinks("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){uniqueNavLabels.removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};KolBreadcrumb.style={default:defaultStyleCss},exports.kol_breadcrumb=KolBreadcrumb;
+"use strict";var index=require("./index-Do5xA4dJ.js"),common=require("./common-CyOOsddt.js"),label=require("./label-BpdiumjJ.js"),uniqueNavLabels=require("./unique-nav-labels-DJBlAxpe.js"),validation=require("./validation-CJn2v37b.js"),componentNames=require("./component-names-5KS_pYRF.js"),component=require("./component-CTPLUymr.js");require("./tslib.es6-7DbU_BSw.js"),require("./bem-registry-BRaXxTgN.js"),require("./clsx-Bm_HQUnh.js");const defaultStyleCss='/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1775118370120"); /* IE9*/\n  src: url("kolicons.eot?t=1775118370120#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1775118370120") format("woff2"), url("kolicons.woff?t=1775118370120") format("woff"), url("kolicons.ttf?t=1775118370120") format("truetype"), url("kolicons.svg?t=1775118370120#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n  }\n  .kol-breadcrumb__list, .kol-breadcrumb__list-element {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    flex-wrap: wrap;\n    place-items: center;\n    list-style: none;\n  }\n  .kol-breadcrumb__list-element:first-child:last-child {\n    min-height: var(--a11y-min-size);\n  }\n}',KolBreadcrumb=class{constructor(n){index.registerInstance(this,n),this.renderLink=(n,e)=>{const o=this.state._links.length-1;return index.h("li",{class:"kol-breadcrumb__list-element",key:e},e===o?index.h("span",{class:"kol-breadcrumb__list-element-span","aria-current":"page"},n._hideLabel?index.h(component.IconFC,{class:"kol-breadcrumb__icon",label:n._label,icons:"string"==typeof n._icons?n._icons:"kolicon-link"}):index.h(index.Fragment,null,n._label)):index.h(componentNames.KolLinkWcTag,Object.assign({class:"kol-breadcrumb__link",_inline:!1},n)),e!==o&&index.h(component.IconFC,{class:"kol-breadcrumb__separator",label:"",icons:"kolicon-chevron-right"}))},this.state={_label:"",_links:[]}}render(){return index.h("nav",{key:"bff94e213bc73c24069c1e5aa297aa54b6e98003",class:"kol-breadcrumb","aria-label":this.state._label},index.h("ul",{key:"2100b5df04175f39ebdfab1708100623856c4470",class:"kol-breadcrumb__list"},0===this.state._links.length&&index.h("li",{key:"3b73286454440609917059e00581d71ed20788d8"},index.h(component.IconFC,{key:"2b20cb24ae17a71c5b0dbeb713d1e32b04660f92",class:"kol-breadcrumb_icon",label:"",icons:"kolicon-house"}),"…"),this.state._links.map(this.renderLink)))}validateLabel(n,e,o=!1){o||uniqueNavLabels.removeNavLabel(this.state._label),label.validateLabel(this,n,{required:!0}),common.a11yHintLabelingLandmarks(n),uniqueNavLabels.addNavLabel(this.state._label)}validateLinks(n){validation.watchNavLinks("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){uniqueNavLabels.removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};KolBreadcrumb.style={default:defaultStyleCss},exports.kol_breadcrumb=KolBreadcrumb;

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-DT9bjXlJ.js"),componentNames=require("./component-names-CLJnvcGE.js"),elementClick=require("./element-click-BNHh6n4d.js"),elementFocus=require("./element-focus-r03qIEIv.js");require("./common-CyOOsddt.js");const defaultStyleCss='/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1774956515321"); /* IE9*/\n  src: url("kolicons.eot?t=1774956515321#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1774956515321") format("woff2"), url("kolicons.woff?t=1774956515321") format("woff"), url("kolicons.ttf?t=1774956515321") format("truetype"), url("kolicons.svg?t=1774956515321#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-button--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-button--standalone .kol-button__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-button .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-button:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-button:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-button__icon {\n    display: inline-flex;\n  }\n  .kol-button--inline {\n    min-width: unset;\n    min-height: unset;\n  }\n}',KolButtonLink=class{constructor(n){index.registerInstance(this,n),this.setButtonWcRef=n=>{this.buttonWcRef=n},this._disabled=!1,this._hideLabel=!1,this._inline=!0,this._tooltipAlign="top",this._type="button"}async getValue(){return this._value}async focus(){return elementFocus.delegateFocus(this.host,()=>elementFocus.setFocus(this.buttonWcRef))}async click(){return elementClick.delegateClick(this.host,async()=>elementClick.setClick(this.buttonWcRef))}render(){return index.h(componentNames.KolButtonWcTag,{key:"aee74e9f6ad89dc6370c313d63775bc7c665fb7a",ref:this.setButtonWcRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_inline:this._inline,_label:this._label,_name:this._name,_on:this._on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},index.h("slot",{key:"4a7469c07d168fa7ff20ba3ba96addc4df2360c6",name:"expert",slot:"expert"}))}get host(){return index.getElement(this)}};KolButtonLink.style={default:defaultStyleCss},exports.kol_button_link=KolButtonLink;
+"use strict";var index=require("./index-Do5xA4dJ.js"),componentNames=require("./component-names-5KS_pYRF.js"),elementClick=require("./element-click-BNHh6n4d.js"),elementFocus=require("./element-focus-r03qIEIv.js");require("./common-CyOOsddt.js");const defaultStyleCss='/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1775118370120"); /* IE9*/\n  src: url("kolicons.eot?t=1775118370120#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1775118370120") format("woff2"), url("kolicons.woff?t=1775118370120") format("woff"), url("kolicons.ttf?t=1775118370120") format("truetype"), url("kolicons.svg?t=1775118370120#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-button--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-button--standalone .kol-button__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-button .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-button:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-button:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-button__icon {\n    display: inline-flex;\n  }\n  .kol-button--inline {\n    min-width: unset;\n    min-height: unset;\n  }\n}',KolButtonLink=class{constructor(n){index.registerInstance(this,n),this.setButtonWcRef=n=>{this.buttonWcRef=n},this._disabled=!1,this._hideLabel=!1,this._inline=!0,this._tooltipAlign="top",this._type="button"}async getValue(){return this._value}async focus(){return elementFocus.delegateFocus(this.host,()=>elementFocus.setFocus(this.buttonWcRef))}async click(){return elementClick.delegateClick(this.host,async()=>elementClick.setClick(this.buttonWcRef))}render(){return index.h(componentNames.KolButtonWcTag,{key:"aee74e9f6ad89dc6370c313d63775bc7c665fb7a",ref:this.setButtonWcRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_inline:this._inline,_label:this._label,_name:this._name,_on:this._on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},index.h("slot",{key:"4a7469c07d168fa7ff20ba3ba96addc4df2360c6",name:"expert",slot:"expert"}))}get host(){return index.getElement(this)}};KolButtonLink.style={default:defaultStyleCss},exports.kol_button_link=KolButtonLink;

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-DT9bjXlJ.js"),common=require("./common-CyOOsddt.js"),component=require("./component-_osv0u4g.js"),accessAndShortKey=require("./access-and-short-key-CUXP_bqv.js"),variantClassName=require("./variant-class-name-BToWO6cS.js"),customClass=require("./custom-class-DKbltqfW.js"),disabled=require("./disabled-OBxr5yFQ.js"),hideLabel=require("./hide-label-D5C7_wBP.js"),icons=require("./icons-CtLpYmvA.js"),inline=require("./inline-B7iAl0VU.js"),label=require("./label-BpdiumjJ.js"),tooltipAlign=require("./tooltip-align-DykwbBJw.js"),componentNames=require("./component-names-CLJnvcGE.js"),clsx=require("./clsx-Bm_HQUnh.js"),elementClick=require("./element-click-BNHh6n4d.js"),elementFocus=require("./element-focus-r03qIEIv.js"),events=require("./events-Cd8febUV.js"),controller=require("./controller-DVajMOVA.js"),associated_controller=require("./associated.controller-CdkbkfHV.js");require("./tslib.es6-7DbU_BSw.js"),require("./bem-registry-BYsM9uZG.js"),require("./component-TRu1ySJ5.js"),require("./isArray-BOIOdEQh.js"),require("./align-Dgke5npK.js"),require("./bootstrap-Ct8zYDlN.js"),require("./i18n-CgUN6lev.js");const validateAriaSelected=(t,e)=>{common.watchBoolean(t,"_ariaSelected",e)},validateButtonCallbacks=(t,e)=>{common.watchValidator(t,"_on",t=>"object"==typeof t&&null!==t,new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),e)},buttonTypePropTypeOptions=["button","reset","submit"],validateButtonType=(t,e)=>{common.watchValidator(t,"_type",t=>"string"==typeof t&&buttonTypePropTypeOptions.includes(t),new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(", ")}`]),e)},KolButtonWc=class{async focus(){return elementFocus.setFocus(this.buttonRef)}async click(){return elementClick.setClick(this.buttonRef)}render(){var t;const e=component.showExpertSlot(this.state._label),a=null===(t=this.state._ariaDescription)||void 0===t?void 0:t.trim(),i=this.state._accessKey||this.state._shortKey,s=!0===this.state._disabled,l=!0===this.state._hideLabel;return index.h(index.Host,{key:"caa3e67776ea2dcf39d231eb6b59af4360737be5"},index.h("button",{key:"b8a68224a8a8e7868825cb6cd574d71211be1cc7",ref:this.setButtonRef,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-description":a||void 0,"aria-expanded":common.mapBoolean2String(this.state._ariaExpanded),"aria-haspopup":this._ariaHasPopup,"aria-keyshortcuts":this.state._shortKey,"aria-label":l&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":common.mapStringOrBoolean2String(this.state._ariaSelected),class:clsx.clsx("kol-button",{"kol-button--disabled":s,[`kol-button--${this.state._variant}`]:"custom"!==this.state._variant,"kol-button--inline":!0===this.state._inline,"kol-button--standalone":!1===this.state._inline,"kol-button--hide-label":l,[this.state._customClass]:"string"==typeof this.state._customClass&&this.state._customClass.length>0}),disabled:s,id:this.state._id,name:this.state._name,onClick:this.onClick,onMouseDown:this.onMouseDown,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type},index.h(component.SpanFC,{key:"4166132142502375f776be7c04902675f6bbeae7",class:"kol-button__text",badgeText:i,icons:this.state._icons,hideLabel:l,label:e?"":this.state._label},index.h("slot",{key:"b98ae84a6c48d3afedd72086c8f1bda853293f31",name:"expert",slot:"expert"}))),l&&index.h(componentNames.KolTooltipWcTag,{key:"48cd4c3489c919c78176a0b2a4e5d5a01f38d3a6",ref:this.setTooltipRef,"aria-hidden":"true",hidden:e,class:"kol-button__tooltip",_badgeText:i,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))}constructor(t){index.registerInstance(this,t),this.setButtonRef=t=>{this.buttonRef=t},this.setTooltipRef=t=>{this.tooltipRef=t},this.hideTooltip=()=>{var t;null===(t=this.tooltipRef)||void 0===t||t.hideTooltip()},this.onClick=t=>{var e,a;t.stopPropagation(),this.state._hideLabel&&this.hideTooltip(),"submit"===this.state._type?controller.propagateSubmitEventToForm({form:this.host}):"reset"===this.state._type?controller.propagateResetEventToForm({form:this.host}):(this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)&&(common.setEventTarget(t,this.buttonRef),null===(a=this.state._on)||void 0===a||a.onClick(t,this.state._value))),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.click,this.state._value)},this.onMouseDown=t=>{var e,a,i;null===(i=null===(a=null===(e=this.state)||void 0===e?void 0:e._on)||void 0===a?void 0:a.onMouseDown)||void 0===i||i.call(a,t),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.mousedown)},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._tooltipAlign="top",this._type="button",this.state={_icons:{},_label:"",_on:{},_type:"button",_variant:"normal"},this.controller=new associated_controller.AssociatedInputController(this,"button",this.host)}validateAccessKey(t){accessAndShortKey.validateAccessKey(this,t),accessAndShortKey.validateAccessAndShortKey(t,this._shortKey)}validateAriaControls(t){variantClassName.validateAriaControls(this,t)}validateAriaDescription(t){variantClassName.validateAriaDescription(this,t)}validateAriaExpanded(t){variantClassName.validateAriaExpanded(this,t)}validateAriaSelected(t){validateAriaSelected(this,t)}validateCustomClass(t){customClass.validateCustomClass(this,t)}validateDisabled(t){disabled.validateDisabled(this,t)}validateHideLabel(t){hideLabel.validateHideLabel(this,t)}validateIcons(t){icons.validateIcons(this,t)}validateId(t){common.watchString(this,"_id",t)}validateInline(t){inline.validateInline(this,t,{defaultValue:!1})}validateLabel(t){label.validateLabelWithExpertSlot(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){validateButtonCallbacks(this,t)}validateRole(t){variantClassName.validateAlternativeButtonLinkRole(this,t)}validateShortKey(t){accessAndShortKey.validateShortKey(this,t),accessAndShortKey.validateAccessAndShortKey(this._accessKey,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){accessAndShortKey.validateTabIndex(this,t)}validateTooltipAlign(t){tooltipAlign.validateTooltipAlign(this,t)}validateType(t){validateButtonType(this,t)}validateValue(t){common.setState(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){variantClassName.validateVariantClassName(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.validateInline(this._inline),this.validateLabel(this._label),this.validateName(this._name),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant),accessAndShortKey.validateAccessAndShortKey(this._accessKey,this._shortKey)}get host(){return index.getElement(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"],_inline:["validateInline"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};exports.kol_button_wc=KolButtonWc;
+"use strict";var index=require("./index-Do5xA4dJ.js"),common=require("./common-CyOOsddt.js"),component$1=require("./component-C27tnivo.js"),accessAndShortKey=require("./access-and-short-key-CUXP_bqv.js"),variantClassName=require("./variant-class-name-BToWO6cS.js"),customClass=require("./custom-class-DKbltqfW.js"),disabled=require("./disabled-OBxr5yFQ.js"),hideLabel=require("./hide-label-D5C7_wBP.js"),icons=require("./icons-CtLpYmvA.js"),inline=require("./inline-B7iAl0VU.js"),label=require("./label-BpdiumjJ.js"),tooltipAlign=require("./tooltip-align-BB5EsHsG.js"),variantQuote=require("./variant-quote-iZVwULXH.js"),component=require("./component-Liy_hR04.js"),controller=require("./controller-D3ETb78M.js"),clsx=require("./clsx-Bm_HQUnh.js"),elementClick=require("./element-click-BNHh6n4d.js"),elementFocus=require("./element-focus-r03qIEIv.js"),events=require("./events-Cd8febUV.js"),controller$1=require("./controller-DXiXhgaj.js"),associated_controller=require("./associated.controller-Qtcakwi5.js");require("./tslib.es6-7DbU_BSw.js"),require("./bem-registry-BRaXxTgN.js"),require("./component-CTPLUymr.js"),require("./isArray-BOIOdEQh.js"),require("./align-DLZnj4_m.js"),require("./normalizers-CLRF8il-.js"),require("./_Uint8Array-BAQUGozM.js"),require("./align-floating-elements-DUp-he6s.js"),require("./tooltip-open-tracking-Ba0udJRU.js"),require("./label-B0RK7DQ1.js"),require("./base-controller-DAzsTqX9.js"),require("./component-names-5KS_pYRF.js"),require("./bootstrap-CTHD2bd6.js"),require("./i18n-CgUN6lev.js");const validateAriaSelected=(t,e)=>{common.watchBoolean(t,"_ariaSelected",e)},validateButtonCallbacks=(t,e)=>{common.watchValidator(t,"_on",t=>"object"==typeof t&&null!==t,new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),e)},buttonTypePropTypeOptions=["button","reset","submit"],validateButtonType=(t,e)=>{common.watchValidator(t,"_type",t=>"string"==typeof t&&buttonTypePropTypeOptions.includes(t),new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(", ")}`]),e)},KolButtonWc=class{async focus(){return elementFocus.setFocus(this.buttonRef)}async click(){return elementClick.setClick(this.buttonRef)}render(){var t;const e=component$1.showExpertSlot(this.state._label),a=null===(t=this.state._ariaDescription)||void 0===t?void 0:t.trim(),i=this.state._accessKey||this.state._shortKey,s=!0===this.state._disabled,l=!0===this.state._hideLabel;return index.h(index.Host,{key:"cc2137234f2b62215a09c704af340f177a26ab75"},index.h("button",{key:"0c432f5a96e950890a8014f8e8b7acabf46eabe7",ref:this.setButtonRef,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-description":a||void 0,"aria-expanded":common.mapBoolean2String(this.state._ariaExpanded),"aria-haspopup":this._ariaHasPopup,"aria-keyshortcuts":this.state._shortKey,"aria-label":l&&"string"==typeof this.state._label&&this.state._label.length>0?this.state._label:void 0,"aria-selected":common.mapStringOrBoolean2String(this.state._ariaSelected),class:clsx.clsx("kol-button",{"kol-button--disabled":s,[`kol-button--${this.state._variant}`]:"custom"!==this.state._variant,"kol-button--inline":!0===this.state._inline,"kol-button--standalone":!1===this.state._inline,"kol-button--hide-label":l,[this.state._customClass]:"string"==typeof this.state._customClass&&this.state._customClass.length>0}),disabled:s,id:this.state._id,name:this.state._name,onClick:this.onClick,onMouseDown:this.onMouseDown,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type},index.h(component$1.SpanFC,{key:"9359cefc9d1cd923994774993af926f0cb954287",class:"kol-button__text",badgeText:i,icons:this.state._icons,hideLabel:l,label:e?"":this.state._label},index.h("slot",{key:"9c50c20ed34c01d69f491f5a86e88d21c9f30a94",name:"expert",slot:"expert"}))),l&&"string"==typeof this.state._label&&this.state._label.length>0&&index.h("div",{key:"e0a58b0b2c545f1a0f85ecf12cac02124aa2893e",class:"kol-button__tooltip"},index.h(component.TooltipFC,{key:"325e1e7a548c1b73b4738fc16b9f7856cf7212a8",badgeText:i||"",label:this.state._label,id:this.tooltipCtrl.getRenderProp("id"),refFloating:this.tooltipCtrl.setTooltipElementRef})))}constructor(t){index.registerInstance(this,t),this.tooltipCtrl=new controller.TooltipController(variantQuote.BaseWebComponent.stateLess),this.setButtonRef=t=>{this.buttonRef=t},this.onClick=t=>{var e,a;t.stopPropagation(),this.tooltipCtrl.hideTooltip(),"submit"===this.state._type?controller$1.propagateSubmitEventToForm({form:this.host}):"reset"===this.state._type?controller$1.propagateResetEventToForm({form:this.host}):(this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)&&(common.setEventTarget(t,this.buttonRef),null===(a=this.state._on)||void 0===a||a.onClick(t,this.state._value))),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.click,this.state._value)},this.onMouseDown=t=>{var e,a,i;null===(i=null===(a=null===(e=this.state)||void 0===e?void 0:e._on)||void 0===a?void 0:a.onMouseDown)||void 0===i||i.call(a,t),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.mousedown)},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._tooltipAlign="top",this._type="button",this.state={_icons:{},_label:"",_on:{},_type:"button",_variant:"normal"},this.controller=new associated_controller.AssociatedInputController(this,"button",this.host)}validateAccessKey(t){accessAndShortKey.validateAccessKey(this,t),accessAndShortKey.validateAccessAndShortKey(t,this._shortKey)}validateAriaControls(t){variantClassName.validateAriaControls(this,t)}validateAriaDescription(t){variantClassName.validateAriaDescription(this,t)}validateAriaExpanded(t){variantClassName.validateAriaExpanded(this,t)}validateAriaSelected(t){validateAriaSelected(this,t)}validateCustomClass(t){customClass.validateCustomClass(this,t)}validateDisabled(t){disabled.validateDisabled(this,t)}validateHideLabel(t){hideLabel.validateHideLabel(this,t)}validateIcons(t){icons.validateIcons(this,t)}validateId(t){common.watchString(this,"_id",t)}validateInline(t){inline.validateInline(this,t,{defaultValue:!1})}validateLabel(t){label.validateLabelWithExpertSlot(this,t,{required:!0}),this.tooltipCtrl.watchLabel("string"==typeof t?t:void 0)}validateName(t){this.controller.validateName(t)}validateOn(t){validateButtonCallbacks(this,t)}validateRole(t){variantClassName.validateAlternativeButtonLinkRole(this,t)}validateShortKey(t){accessAndShortKey.validateShortKey(this,t),accessAndShortKey.validateAccessAndShortKey(this._accessKey,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){accessAndShortKey.validateTabIndex(this,t)}validateTooltipAlign(t){tooltipAlign.validateTooltipAlign(this,t),this.tooltipCtrl.watchAlign(t)}validateType(t){validateButtonType(this,t)}validateValue(t){common.setState(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){variantClassName.validateVariantClassName(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.validateInline(this._inline),this.validateLabel(this._label),this.validateName(this._name),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant),accessAndShortKey.validateAccessAndShortKey(this._accessKey,this._shortKey),this.tooltipCtrl.componentWillLoad({label:"string"==typeof this.state._label?this.state._label:"",align:this._tooltipAlign})}componentDidRender(){this.buttonRef&&this.tooltipCtrl.syncListeners(void 0,this.buttonRef,!0)}disconnectedCallback(){this.tooltipCtrl.destroy()}get host(){return index.getElement(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"],_inline:["validateInline"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};exports.kol_button_wc=KolButtonWc;

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

@@ -1 +1 @@
-{"version":3,"file":"kol-button-wc.entry.cjs.js","sources":["src/schema/props/aria-selected.ts","src/schema/props/button-callbacks.ts","src/schema/props/button-type.ts","src/components/button/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type AriaSelectedPropType = boolean;\n\n/**\n * Marks this element as selected.\n * (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n */\nexport type PropAriaSelected = {\n\tariaSelected: AriaSelectedPropType;\n};\n\n/* validator */\nexport const validateAriaSelected = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_ariaSelected', value);\n};\n","import type { Callback } from '../enums';\nimport type { EventCallback, EventValueOrEventCallback } from '../types/callbacks';\nimport type { StencilUnknown } from '../types/unknown';\nimport { watchValidator } from '../utils';\n\nimport type { Generic } from 'adopted-style-sheets';\n/* types */\nexport type ButtonCallbacksPropType<T> = {\n\t[Callback.onClick]?: EventValueOrEventCallback<MouseEvent, T>;\n\t[Callback.onMouseDown]?: EventCallback<MouseEvent>;\n};\n\n/**\n * Defines the callback functions for button events.\n */\nexport type PropButtonCallbacks<T> = {\n\ton: ButtonCallbacksPropType<T>;\n};\n\n/* validator */\nexport const validateButtonCallbacks = (component: Generic.Element.Component, value?: ButtonCallbacksPropType<StencilUnknown>): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_on`,\n\t\t(value) => typeof value === 'object' && value !== null,\n\t\tnew Set(['ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}']),\n\t\tvalue,\n\t);\n};\n","/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst buttonTypePropTypeOptions = ['button', 'reset', 'submit'] as const;\nexport type ButtonTypePropType = (typeof buttonTypePropTypeOptions)[number];\n\n/**\n * Defines either the type of the component or of the components interactive element.\n */\nexport type PropButtonType = {\n\ttype: ButtonTypePropType;\n};\n\n/* validator */\nexport const validateButtonType = (component: Generic.Element.Component, value?: ButtonTypePropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_type`,\n\t\t(value?) => typeof value === 'string' && buttonTypePropTypeOptions.includes(value),\n\t\tnew Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t);\n};\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tAriaExpandedPropType,\n\tAriaSelectedPropType,\n\tButtonAPI,\n\tButtonCallbacksPropType,\n\tButtonStates,\n\tButtonTypePropType,\n\tCustomClassPropType,\n\tDisabledPropType,\n\tFocusableElement,\n\tHideLabelPropType,\n\tIconsPropType,\n\tIdPropType,\n\tInlinePropType,\n\tLabelWithExpertSlotPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\nimport {\n\tmapBoolean2String,\n\tmapStringOrBoolean2String,\n\tsetEventTarget,\n\tsetState,\n\tshowExpertSlot,\n\tvalidateAccessKey,\n\tvalidateAlternativeButtonLinkRole,\n\tvalidateAriaControls,\n\tvalidateAriaDescription,\n\tvalidateAriaExpanded,\n\tvalidateAriaSelected,\n\tvalidateButtonCallbacks,\n\tvalidateButtonType,\n\tvalidateCustomClass,\n\tvalidateDisabled,\n\tvalidateHideLabel,\n\tvalidateIcons,\n\tvalidateInline,\n\tvalidateLabelWithExpertSlot,\n\tvalidateShortKey,\n\tvalidateTooltipAlign,\n\tvalidateVariantClassName,\n\twatchString,\n} from '../../schema';\nimport { validateTabIndex } from '../../schema/props/tab-index';\n\nimport { KolTooltipWcTag } from '../../core/component-names';\nimport { SpanFC } from '../../internal/functional-components/span/component';\nimport type { AriaHasPopupPropType } from '../../schema/props/aria-has-popup';\nimport { validateAccessAndShortKey } from '../../schema/validators/access-and-short-key';\nimport clsx from '../../utils/clsx';\nimport { setClick } from '../../utils/element-click';\nimport { setFocus } from '../../utils/element-focus';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';\nimport { AssociatedInputController } from '../input-adapter-leanup/associated.controller';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-button-wc',\n\tshadow: false,\n})\nexport class KolButtonWc implements ButtonAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolButtonWcElement;\n\tprivate buttonRef?: HTMLButtonElement;\n\tprivate tooltipRef?: HTMLKolTooltipWcElement;\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\treturn setFocus(this.buttonRef!);\n\t}\n\n\t/**\n\t * Clicks the primary interactive element inside this component.\n\t */\n\t@Method()\n\tpublic async click(): Promise<void> {\n\t\treturn setClick(this.buttonRef!);\n\t}\n\n\tprivate readonly setButtonRef = (ref?: HTMLButtonElement) => {\n\t\tthis.buttonRef = ref;\n\t};\n\n\tprivate readonly setTooltipRef = (ref?: HTMLKolTooltipWcElement) => {\n\t\tthis.tooltipRef = ref;\n\t};\n\n\tprivate readonly hideTooltip = () => {\n\t\tvoid this.tooltipRef?.hideTooltip();\n\t};\n\n\tprivate readonly onClick = (event: MouseEvent) => {\n\t\tevent.stopPropagation();\n\n\t\tif (this.state._hideLabel) {\n\t\t\tvoid this.hideTooltip();\n\t\t}\n\n\t\tif (this.state._type === 'submit') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.buttonRef,\n\t\t\t});\n\t\t} else if (this.state._type === 'reset') {\n\t\t\tpropagateResetEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.buttonRef,\n\t\t\t});\n\t\t} else {\n\t\t\t// TODO: Static form handling\n\t\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\n\t\t\t// Callback\n\t\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tsetEventTarget(event, this.buttonRef);\n\t\t\t\tthis.state._on?.onClick(event, this.state._value);\n\t\t\t}\n\t\t}\n\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.click, this.state._value);\n\t\t}\n\t};\n\n\tprivate readonly onMouseDown = (event: MouseEvent) => {\n\t\tthis.state?._on?.onMouseDown?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.mousedown);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\t\tconst ariaDescription = this.state._ariaDescription?.trim();\n\t\tconst badgeText = this.state._accessKey || this.state._shortKey;\n\t\tconst isDisabled = this.state._disabled === true;\n\t\tconst hideLabel = this.state._hideLabel === true;\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<button\n\t\t\t\t\tref={this.setButtonRef}\n\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\taria-controls={this.state._ariaControls}\n\t\t\t\t\taria-description={ariaDescription || undefined}\n\t\t\t\t\taria-expanded={mapBoolean2String(this.state._ariaExpanded)}\n\t\t\t\t\taria-haspopup={this._ariaHasPopup}\n\t\t\t\t\taria-keyshortcuts={this.state._shortKey}\n\t\t\t\t\taria-label={hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\taria-selected={mapStringOrBoolean2String(this.state._ariaSelected)}\n\t\t\t\t\tclass={clsx('kol-button', {\n\t\t\t\t\t\t'kol-button--disabled': isDisabled,\n\t\t\t\t\t\t[`kol-button--${this.state._variant as string}`]: this.state._variant !== 'custom',\n\t\t\t\t\t\t'kol-button--inline': this.state._inline === true,\n\t\t\t\t\t\t'kol-button--standalone': this.state._inline === false,\n\t\t\t\t\t\t'kol-button--hide-label': hideLabel,\n\t\t\t\t\t\t[this.state._customClass as string]: typeof this.state._customClass === 'string' && this.state._customClass.length > 0,\n\t\t\t\t\t})}\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\tid={this.state._id}\n\t\t\t\t\tname={this.state._name}\n\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\tonMouseDown={this.onMouseDown}\n\t\t\t\t\trole={this.state._role}\n\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\ttype={this.state._type}\n\t\t\t\t>\n\t\t\t\t\t<SpanFC class=\"kol-button__text\" badgeText={badgeText} icons={this.state._icons} hideLabel={hideLabel} label={hasExpertSlot ? '' : this.state._label}>\n\t\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t\t</SpanFC>\n\t\t\t\t</button>\n\t\t\t\t{hideLabel && (\n\t\t\t\t\t<KolTooltipWcTag\n\t\t\t\t\t\tref={this.setTooltipRef}\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t */\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\thidden={hasExpertSlot}\n\t\t\t\t\t\tclass=\"kol-button__tooltip\"\n\t\t\t\t\t\t_badgeText={badgeText}\n\t\t\t\t\t\t_align={this.state._tooltipAlign}\n\t\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t\t></KolTooltipWcTag>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: AssociatedInputController;\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines the aria-haspopup attribute. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-haspopup)\n\t * @internal\n\t */\n\t@Prop() public _ariaHasPopup?: AriaHasPopupPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t * @internal\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t */\n\t@Prop() public _inline?: InlinePropType = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t * @internal\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType;\n\n\t@State() public state: ButtonStates = {\n\t\t_icons: {},\n\t\t_label: '', // ⚠ required\n\t\t_on: {},\n\t\t_type: 'button',\n\t\t_variant: 'normal',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new AssociatedInputController(this, 'button', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: AccessKeyPropType): void {\n\t\tvalidateAccessKey(this, value);\n\t\tvalidateAccessAndShortKey(value, this._shortKey);\n\t}\n\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\tvalidateAriaControls(this, value);\n\t}\n\n\t@Watch('_ariaDescription')\n\tpublic validateAriaDescription(value?: AriaDescriptionPropType): void {\n\t\tvalidateAriaDescription(this, value);\n\t}\n\n\t@Watch('_ariaExpanded')\n\tpublic validateAriaExpanded(value?: AriaExpandedPropType): void {\n\t\tvalidateAriaExpanded(this, value);\n\t}\n\n\t@Watch('_ariaSelected')\n\tpublic validateAriaSelected(value?: AriaSelectedPropType): void {\n\t\tvalidateAriaSelected(this, value);\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: CustomClassPropType): void {\n\t\tvalidateCustomClass(this, value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsPropType): void {\n\t\tvalidateIcons(this, value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: IdPropType): void {\n\t\twatchString(this, '_id', value);\n\t}\n\n\t@Watch('_inline')\n\tpublic validateInline(value?: InlinePropType): void {\n\t\tvalidateInline(this, value, {\n\t\t\tdefaultValue: false,\n\t\t});\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tvalidateLabelWithExpertSlot(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: ButtonCallbacksPropType<StencilUnknown>): void {\n\t\tvalidateButtonCallbacks(this, value);\n\t}\n\n\t@Watch('_role')\n\tpublic validateRole(value?: AlternativeButtonLinkRolePropType): void {\n\t\tvalidateAlternativeButtonLinkRole(this, value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tvalidateShortKey(this, value);\n\t\tvalidateAccessAndShortKey(this._accessKey, value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tvalidateTabIndex(this, value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: ButtonTypePropType): void {\n\t\tvalidateButtonType(this, value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: StencilUnknown): void {\n\t\tsetState(this, '_value', value);\n\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: VariantClassNamePropType): void {\n\t\tvalidateVariantClassName(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAccessKey(this._accessKey);\n\t\tthis.validateAriaControls(this._ariaControls);\n\t\tthis.validateAriaDescription(this._ariaDescription);\n\t\tthis.validateAriaExpanded(this._ariaExpanded);\n\t\tthis.validateAriaSelected(this._ariaSelected);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateIcons(this._icons);\n\t\tthis.validateId(this._id);\n\t\tthis.validateInline(this._inline);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateName(this._name);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateShortKey(this._shortKey);\n\t\tthis.validateSyncValueBySelector(this._syncValueBySelector);\n\t\tthis.validateTabIndex(this._tabIndex);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateType(this._type);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\t\tvalidateAccessAndShortKey(this._accessKey, this._shortKey);\n\t}\n}\n"],"names":["watchBoolean","watchValidator","setFocus","setClick","showExpertSlot","h","Host","mapBoolean2String","mapStringOrBoolean2String","clsx","SpanFC","KolTooltipWcTag","propagateSubmitEventToForm","propagateResetEventToForm","setEventTarget","dispatchDomEvent","KolEvent","AssociatedInputController","validateAccessKey","validateAccessAndShortKey","validateAriaControls","validateAriaDescription","validateAriaExpanded","validateCustomClass","validateDisabled","validateHideLabel","validateIcons","watchString","validateInline","validateLabelWithExpertSlot","validateAlternativeButtonLinkRole","validateShortKey","validateTabIndex","validateTooltipAlign","setState","validateVariantClassName"],"mappings":"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"}
+{"version":3,"file":"kol-button-wc.entry.cjs.js","sources":["src/schema/props/aria-selected.ts","src/schema/props/button-callbacks.ts","src/schema/props/button-type.ts","src/components/button/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type AriaSelectedPropType = boolean;\n\n/**\n * Marks this element as selected.\n * (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n */\nexport type PropAriaSelected = {\n\tariaSelected: AriaSelectedPropType;\n};\n\n/* validator */\nexport const validateAriaSelected = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_ariaSelected', value);\n};\n","import type { Callback } from '../enums';\nimport type { EventCallback, EventValueOrEventCallback } from '../types/callbacks';\nimport type { StencilUnknown } from '../types/unknown';\nimport { watchValidator } from '../utils';\n\nimport type { Generic } from 'adopted-style-sheets';\n/* types */\nexport type ButtonCallbacksPropType<T> = {\n\t[Callback.onClick]?: EventValueOrEventCallback<MouseEvent, T>;\n\t[Callback.onMouseDown]?: EventCallback<MouseEvent>;\n};\n\n/**\n * Defines the callback functions for button events.\n */\nexport type PropButtonCallbacks<T> = {\n\ton: ButtonCallbacksPropType<T>;\n};\n\n/* validator */\nexport const validateButtonCallbacks = (component: Generic.Element.Component, value?: ButtonCallbacksPropType<StencilUnknown>): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_on`,\n\t\t(value) => typeof value === 'object' && value !== null,\n\t\tnew Set(['ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}']),\n\t\tvalue,\n\t);\n};\n","/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst buttonTypePropTypeOptions = ['button', 'reset', 'submit'] as const;\nexport type ButtonTypePropType = (typeof buttonTypePropTypeOptions)[number];\n\n/**\n * Defines either the type of the component or of the components interactive element.\n */\nexport type PropButtonType = {\n\ttype: ButtonTypePropType;\n};\n\n/* validator */\nexport const validateButtonType = (component: Generic.Element.Component, value?: ButtonTypePropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_type`,\n\t\t(value?) => typeof value === 'string' && buttonTypePropTypeOptions.includes(value),\n\t\tnew Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t);\n};\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tAriaExpandedPropType,\n\tAriaSelectedPropType,\n\tButtonAPI,\n\tButtonCallbacksPropType,\n\tButtonStates,\n\tButtonTypePropType,\n\tCustomClassPropType,\n\tDisabledPropType,\n\tFocusableElement,\n\tHideLabelPropType,\n\tIconsPropType,\n\tIdPropType,\n\tInlinePropType,\n\tLabelWithExpertSlotPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\nimport {\n\tmapBoolean2String,\n\tmapStringOrBoolean2String,\n\tsetEventTarget,\n\tsetState,\n\tshowExpertSlot,\n\tvalidateAccessKey,\n\tvalidateAlternativeButtonLinkRole,\n\tvalidateAriaControls,\n\tvalidateAriaDescription,\n\tvalidateAriaExpanded,\n\tvalidateAriaSelected,\n\tvalidateButtonCallbacks,\n\tvalidateButtonType,\n\tvalidateCustomClass,\n\tvalidateDisabled,\n\tvalidateHideLabel,\n\tvalidateIcons,\n\tvalidateInline,\n\tvalidateLabelWithExpertSlot,\n\tvalidateShortKey,\n\tvalidateTooltipAlign,\n\tvalidateVariantClassName,\n\twatchString,\n} from '../../schema';\nimport { validateTabIndex } from '../../schema/props/tab-index';\n\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport { SpanFC } from '../../internal/functional-components/span/component';\nimport { TooltipFC } from '../../internal/functional-components/tooltip/component';\nimport { TooltipController } from '../../internal/functional-components/tooltip/controller';\nimport type { AriaHasPopupPropType } from '../../schema/props/aria-has-popup';\nimport { validateAccessAndShortKey } from '../../schema/validators/access-and-short-key';\nimport clsx from '../../utils/clsx';\nimport { setClick } from '../../utils/element-click';\nimport { setFocus } from '../../utils/element-focus';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';\nimport { AssociatedInputController } from '../input-adapter-leanup/associated.controller';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-button-wc',\n\tshadow: false,\n})\nexport class KolButtonWc implements ButtonAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolButtonWcElement;\n\tprivate buttonRef?: HTMLButtonElement;\n\tprivate readonly tooltipCtrl = new TooltipController(BaseWebComponent.stateLess);\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\treturn setFocus(this.buttonRef!);\n\t}\n\n\t/**\n\t * Clicks the primary interactive element inside this component.\n\t */\n\t@Method()\n\tpublic async click(): Promise<void> {\n\t\treturn setClick(this.buttonRef!);\n\t}\n\n\tprivate readonly setButtonRef = (ref?: HTMLButtonElement) => {\n\t\tthis.buttonRef = ref;\n\t};\n\n\tprivate readonly onClick = (event: MouseEvent) => {\n\t\tevent.stopPropagation();\n\t\tthis.tooltipCtrl.hideTooltip();\n\n\t\tif (this.state._type === 'submit') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.buttonRef,\n\t\t\t});\n\t\t} else if (this.state._type === 'reset') {\n\t\t\tpropagateResetEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.buttonRef,\n\t\t\t});\n\t\t} else {\n\t\t\t// TODO: Static form handling\n\t\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\n\t\t\t// Callback\n\t\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tsetEventTarget(event, this.buttonRef);\n\t\t\t\tthis.state._on?.onClick(event, this.state._value);\n\t\t\t}\n\t\t}\n\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.click, this.state._value);\n\t\t}\n\t};\n\n\tprivate readonly onMouseDown = (event: MouseEvent) => {\n\t\tthis.state?._on?.onMouseDown?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.mousedown);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\t\tconst ariaDescription = this.state._ariaDescription?.trim();\n\t\tconst badgeText = this.state._accessKey || this.state._shortKey;\n\t\tconst isDisabled = this.state._disabled === true;\n\t\tconst hideLabel = this.state._hideLabel === true;\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<button\n\t\t\t\t\tref={this.setButtonRef}\n\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\taria-controls={this.state._ariaControls}\n\t\t\t\t\taria-description={ariaDescription || undefined}\n\t\t\t\t\taria-expanded={mapBoolean2String(this.state._ariaExpanded)}\n\t\t\t\t\taria-haspopup={this._ariaHasPopup}\n\t\t\t\t\taria-keyshortcuts={this.state._shortKey}\n\t\t\t\t\taria-label={hideLabel && typeof this.state._label === 'string' && this.state._label.length > 0 ? this.state._label : undefined}\n\t\t\t\t\taria-selected={mapStringOrBoolean2String(this.state._ariaSelected)}\n\t\t\t\t\tclass={clsx('kol-button', {\n\t\t\t\t\t\t'kol-button--disabled': isDisabled,\n\t\t\t\t\t\t[`kol-button--${this.state._variant as string}`]: this.state._variant !== 'custom',\n\t\t\t\t\t\t'kol-button--inline': this.state._inline === true,\n\t\t\t\t\t\t'kol-button--standalone': this.state._inline === false,\n\t\t\t\t\t\t'kol-button--hide-label': hideLabel,\n\t\t\t\t\t\t[this.state._customClass as string]: typeof this.state._customClass === 'string' && this.state._customClass.length > 0,\n\t\t\t\t\t})}\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\tid={this.state._id}\n\t\t\t\t\tname={this.state._name}\n\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\tonMouseDown={this.onMouseDown}\n\t\t\t\t\trole={this.state._role}\n\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\ttype={this.state._type}\n\t\t\t\t>\n\t\t\t\t\t<SpanFC class=\"kol-button__text\" badgeText={badgeText} icons={this.state._icons} hideLabel={hideLabel} label={hasExpertSlot ? '' : this.state._label}>\n\t\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t\t</SpanFC>\n\t\t\t\t</button>\n\t\t\t\t{hideLabel && typeof this.state._label === 'string' && this.state._label.length > 0 && (\n\t\t\t\t\t<div class=\"kol-button__tooltip\">\n\t\t\t\t\t\t<TooltipFC\n\t\t\t\t\t\t\tbadgeText={badgeText || ''}\n\t\t\t\t\t\t\tlabel={this.state._label}\n\t\t\t\t\t\t\tid={this.tooltipCtrl.getRenderProp('id')}\n\t\t\t\t\t\t\trefFloating={this.tooltipCtrl.setTooltipElementRef}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: AssociatedInputController;\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines the aria-haspopup attribute. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-haspopup)\n\t * @internal\n\t */\n\t@Prop() public _ariaHasPopup?: AriaHasPopupPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t * @internal\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t */\n\t@Prop() public _inline?: InlinePropType = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t * @internal\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType;\n\n\t@State() public state: ButtonStates = {\n\t\t_icons: {},\n\t\t_label: '', // ⚠ required\n\t\t_on: {},\n\t\t_type: 'button',\n\t\t_variant: 'normal',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new AssociatedInputController(this, 'button', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: AccessKeyPropType): void {\n\t\tvalidateAccessKey(this, value);\n\t\tvalidateAccessAndShortKey(value, this._shortKey);\n\t}\n\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\tvalidateAriaControls(this, value);\n\t}\n\n\t@Watch('_ariaDescription')\n\tpublic validateAriaDescription(value?: AriaDescriptionPropType): void {\n\t\tvalidateAriaDescription(this, value);\n\t}\n\n\t@Watch('_ariaExpanded')\n\tpublic validateAriaExpanded(value?: AriaExpandedPropType): void {\n\t\tvalidateAriaExpanded(this, value);\n\t}\n\n\t@Watch('_ariaSelected')\n\tpublic validateAriaSelected(value?: AriaSelectedPropType): void {\n\t\tvalidateAriaSelected(this, value);\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: CustomClassPropType): void {\n\t\tvalidateCustomClass(this, value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsPropType): void {\n\t\tvalidateIcons(this, value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: IdPropType): void {\n\t\twatchString(this, '_id', value);\n\t}\n\n\t@Watch('_inline')\n\tpublic validateInline(value?: InlinePropType): void {\n\t\tvalidateInline(this, value, {\n\t\t\tdefaultValue: false,\n\t\t});\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tvalidateLabelWithExpertSlot(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\tthis.tooltipCtrl.watchLabel(typeof value === 'string' ? value : undefined);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: ButtonCallbacksPropType<StencilUnknown>): void {\n\t\tvalidateButtonCallbacks(this, value);\n\t}\n\n\t@Watch('_role')\n\tpublic validateRole(value?: AlternativeButtonLinkRolePropType): void {\n\t\tvalidateAlternativeButtonLinkRole(this, value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tvalidateShortKey(this, value);\n\t\tvalidateAccessAndShortKey(this._accessKey, value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tvalidateTabIndex(this, value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t\tthis.tooltipCtrl.watchAlign(value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: ButtonTypePropType): void {\n\t\tvalidateButtonType(this, value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: StencilUnknown): void {\n\t\tsetState(this, '_value', value);\n\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: VariantClassNamePropType): void {\n\t\tvalidateVariantClassName(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAccessKey(this._accessKey);\n\t\tthis.validateAriaControls(this._ariaControls);\n\t\tthis.validateAriaDescription(this._ariaDescription);\n\t\tthis.validateAriaExpanded(this._ariaExpanded);\n\t\tthis.validateAriaSelected(this._ariaSelected);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateIcons(this._icons);\n\t\tthis.validateId(this._id);\n\t\tthis.validateInline(this._inline);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateName(this._name);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateShortKey(this._shortKey);\n\t\tthis.validateSyncValueBySelector(this._syncValueBySelector);\n\t\tthis.validateTabIndex(this._tabIndex);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateType(this._type);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\t\tvalidateAccessAndShortKey(this._accessKey, this._shortKey);\n\t\tthis.tooltipCtrl.componentWillLoad({\n\t\t\tlabel: typeof this.state._label === 'string' ? this.state._label : '',\n\t\t\talign: this._tooltipAlign,\n\t\t});\n\t}\n\n\tpublic componentDidRender(): void {\n\t\tif (this.buttonRef) {\n\t\t\tthis.tooltipCtrl.syncListeners(undefined, this.buttonRef, true);\n\t\t}\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.tooltipCtrl.destroy();\n\t}\n}\n"],"names":["watchBoolean","watchValidator","setFocus","setClick","showExpertSlot","h","Host","mapBoolean2String","mapStringOrBoolean2String","clsx","SpanFC","TooltipFC","TooltipController","BaseWebComponent","propagateSubmitEventToForm","propagateResetEventToForm","setEventTarget","dispatchDomEvent","KolEvent","AssociatedInputController","validateAccessKey","validateAccessAndShortKey","validateAriaControls","validateAriaDescription","validateAriaExpanded","validateCustomClass","validateDisabled","validateHideLabel","validateIcons","watchString","validateInline","validateLabelWithExpertSlot","validateAlternativeButtonLinkRole","validateShortKey","validateTabIndex","validateTooltipAlign","setState","validateVariantClassName"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-DT9bjXlJ.js"),componentNames=require("./component-names-CLJnvcGE.js"),elementClick=require("./element-click-BNHh6n4d.js"),elementFocus=require("./element-focus-r03qIEIv.js");require("./common-CyOOsddt.js");const defaultStyleCss='@charset "UTF-8";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1774956515321"); /* IE9*/\n  src: url("kolicons.eot?t=1774956515321#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1774956515321") format("woff2"), url("kolicons.woff?t=1774956515321") format("woff"), url("kolicons.ttf?t=1774956515321") format("truetype"), url("kolicons.svg?t=1774956515321#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n}',KolButton=class{constructor(n){index.registerInstance(this,n),this.setButtonWcRef=n=>{this.buttonWcRef=n},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._tooltipAlign="top",this._type="button",this._variant="normal"}async getValue(){return this._value}async focus(){return elementFocus.delegateFocus(this.host,()=>elementFocus.setFocus(this.buttonWcRef))}async click(){return elementClick.delegateClick(this.host,async()=>elementClick.setClick(this.buttonWcRef))}render(){return index.h(componentNames.KolButtonWcTag,{key:"328773049e43332db32571c65bfd039974005c40",ref:this.setButtonWcRef,_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,_inline:this._inline,_label:this._label,_name:this._name,_on:this._on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},index.h("slot",{key:"1bfe6d67547ee6c12a570aa01f6f8adafa690f52",name:"expert",slot:"expert"}))}get host(){return index.getElement(this)}};KolButton.style={default:defaultStyleCss},exports.kol_button=KolButton;
+"use strict";var index=require("./index-Do5xA4dJ.js"),componentNames=require("./component-names-5KS_pYRF.js"),elementClick=require("./element-click-BNHh6n4d.js"),elementFocus=require("./element-focus-r03qIEIv.js");require("./common-CyOOsddt.js");const defaultStyleCss='@charset "UTF-8";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1775118370120"); /* IE9*/\n  src: url("kolicons.eot?t=1775118370120#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1775118370120") format("woff2"), url("kolicons.woff?t=1775118370120") format("woff"), url("kolicons.ttf?t=1775118370120") format("truetype"), url("kolicons.svg?t=1775118370120#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n}',KolButton=class{constructor(n){index.registerInstance(this,n),this.setButtonWcRef=n=>{this.buttonWcRef=n},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._tooltipAlign="top",this._type="button",this._variant="normal"}async getValue(){return this._value}async focus(){return elementFocus.delegateFocus(this.host,()=>elementFocus.setFocus(this.buttonWcRef))}async click(){return elementClick.delegateClick(this.host,async()=>elementClick.setClick(this.buttonWcRef))}render(){return index.h(componentNames.KolButtonWcTag,{key:"ecae706aa7a52eac6332d579d2d6512edf85efe5",ref:this.setButtonWcRef,_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,_inline:this._inline,_label:this._label,_name:this._name,_on:this._on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},index.h("slot",{key:"4542fbf2278ca32a7dc314fe468b1b82a8403e8f",name:"expert",slot:"expert"}))}get host(){return index.getElement(this)}};KolButton.style={default:defaultStyleCss},exports.kol_button=KolButton;

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-DT9bjXlJ.js"),common=require("./common-CyOOsddt.js"),hasCloser=require("./has-closer-lvssvMXf.js"),label=require("./label-BpdiumjJ.js"),i18n=require("./i18n-DevJo9yF.js"),validation=require("./validation-CVwHCleW.js"),componentNames=require("./component-names-CLJnvcGE.js");require("./Alert-D-YqpEyB.js");var Heading=require("./Heading-DXIETn4V.js");require("./component-_osv0u4g.js");var dev_utils=require("./dev.utils-DQ8NbpWO.js"),events=require("./events-Cd8febUV.js");require("./i18n-CgUN6lev.js"),require("./level-Dqm4UuMn.js"),require("./normalizers-BJ2c2X_E.js"),require("./_Uint8Array-H2CXBET6.js"),require("./isArray-BOIOdEQh.js"),require("./isObject-CyNHuTNs.js"),require("./tslib.es6-7DbU_BSw.js"),require("./clsx-Bm_HQUnh.js"),require("./bem-registry-BYsM9uZG.js"),require("./component-TRu1ySJ5.js");const KolCardWc=class{constructor(e){index.registerInstance(this,e),this.nonce=dev_utils.nonce(),this.translateClose=i18n.translate("kol-close"),this.close=()=>{var e;void 0!==(null===(e=this._on)||void 0===e?void 0:e.onClose)&&this._on.onClose(new Event("Close")),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.close)},this.on={onClick:this.close},this._hasCloser=!1,this._level=0,this.state={_label:""},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose}render(){return index.h(index.Host,{key:"67601890e4ca061d641d9bd02fc619db3f32060f"},index.h("div",{key:"2a1cc96add1fc7f4ec5884a7efd9d48c897aff48","aria-labelledby":this.nonce,class:"kol-card",role:"group"},index.h(Heading.KolHeadingFc,{key:"559f7c3e67d972f15c2d9f23005bc888e95796a7",class:"kol-card__header",id:this.nonce,level:this.state._level},this.state._label),index.h("div",{key:"8276d5d9fa4bef89934e4d5c75063f65cbe74d37",class:"kol-card__content"},index.h("slot",{key:"7883b9240e71edfa1027e2ed294eb9747326727e"})),this.state._hasCloser&&index.h(componentNames.KolButtonWcTag,{key:"ff4727d59217976989e8a8e24cf6540a712d10a9",class:"kol-card__close-button kol-close-button","data-testid":"card-close-button",_hideLabel:!0,_icons:{left:{icon:"kolicon-cross"}},_label:this.translateClose,_on:this.on,_tooltipAlign:"left"})))}validateOn(e){this.validateOnValue(e)&&common.setState(this,"_on",{onClose:e.onClose})}validateHasCloser(e){hasCloser.validateHasCloser(this,e)}validateLabel(e){label.validateLabel(this,e,{required:!0})}validateLevel(e){validation.watchHeadingLevel(this,e)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on)}get host(){return index.getElement(this)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}}};exports.kol_card_wc=KolCardWc;
+"use strict";var index=require("./index-Do5xA4dJ.js"),common=require("./common-CyOOsddt.js"),hasCloser=require("./has-closer-lvssvMXf.js"),label=require("./label-BpdiumjJ.js"),i18n=require("./i18n-DevJo9yF.js"),validation=require("./validation-V8d7SbhJ.js"),componentNames=require("./component-names-5KS_pYRF.js");require("./Alert-fEJpzH57.js");var Heading=require("./Heading-BxQWS9Oj.js");require("./variant-quote-iZVwULXH.js"),require("./component-C27tnivo.js");var dev_utils=require("./dev.utils-jLeSRS1F.js"),events=require("./events-Cd8febUV.js");require("./i18n-CgUN6lev.js"),require("./level-CTvl-U1w.js"),require("./normalizers-CLRF8il-.js"),require("./_Uint8Array-BAQUGozM.js"),require("./isArray-BOIOdEQh.js"),require("./tslib.es6-7DbU_BSw.js"),require("./clsx-Bm_HQUnh.js"),require("./bem-registry-BRaXxTgN.js"),require("./component-CTPLUymr.js");const KolCardWc=class{constructor(e){index.registerInstance(this,e),this.nonce=dev_utils.nonce(),this.translateClose=i18n.translate("kol-close"),this.close=()=>{var e;void 0!==(null===(e=this._on)||void 0===e?void 0:e.onClose)&&this._on.onClose(new Event("Close")),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.close)},this.on={onClick:this.close},this._hasCloser=!1,this._level=0,this.state={_label:""},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose}render(){return index.h(index.Host,{key:"db0c2f76e15b97050c25423356c4ab22770065f4"},index.h("div",{key:"1f9da993e653716c447d0d2c9d9104f2494caaeb","aria-labelledby":this.nonce,class:"kol-card",role:"group"},index.h(Heading.KolHeadingFc,{key:"8a7a1817363d40c8126403be74bd9387a3b80a4f",class:"kol-card__header",id:this.nonce,level:this.state._level},this.state._label),index.h("div",{key:"c6eecfbb20cfea0a2a94c16c67b06e71f17c8c77",class:"kol-card__content"},index.h("slot",{key:"594dcd690d694b244bc7c1c2e66e164414e1429c"})),this.state._hasCloser&&index.h(componentNames.KolButtonWcTag,{key:"aa2639efe73b8ca1289aa4b7cec988613f177719",class:"kol-card__close-button kol-close-button","data-testid":"card-close-button",_hideLabel:!0,_icons:{left:{icon:"kolicon-cross"}},_label:this.translateClose,_on:this.on,_tooltipAlign:"left"})))}validateOn(e){this.validateOnValue(e)&&common.setState(this,"_on",{onClose:e.onClose})}validateHasCloser(e){hasCloser.validateHasCloser(this,e)}validateLabel(e){label.validateLabel(this,e,{required:!0})}validateLevel(e){validation.watchHeadingLevel(this,e)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on)}get host(){return index.getElement(this)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}}};exports.kol_card_wc=KolCardWc;