@public-ui/components 4.3.0-rc.5 → 4.3.0-rc.7

package/dist/esm/kol-nav.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-nav.entry.js","sources":["src/schema/props/collapsible.ts","src/schema/props/has-compact-button.ts","src/schema/props/has-icons-when-expanded.ts","src/components/nav/style.scss?tag=kol-nav&mode=default&encapsulation=shadow","src/components/nav/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type CollapsiblePropType = boolean;\n\n/**\n * Defines if navigation nodes can be collapsed or not.\n */\nexport type PropCollapsible = {\n\tcollapsible: CollapsiblePropType;\n};\n\n/* validator */\nexport const validateCollapsible = (component: Generic.Element.Component, value?: CollapsiblePropType): void => {\n\twatchBoolean(component, '_collapsible', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\ntype HasCompactButtonPropType = boolean;\n\n/**\n * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n */\nexport type PropHasCompactButton = {\n\thasCompactButton: HasCompactButtonPropType;\n};\n\n/* validator */\nexport const validateHasCompactButton = (component: Generic.Element.Component, value?: HasCompactButtonPropType): void => {\n\twatchBoolean(component, '_hasCompactButton', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type HasIconsWhenExpandedPropType = boolean;\n\n/**\n * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n */\nexport type PropHasIconsWhenExpanded = {\n\thasIconsWhenExpanded: HasIconsWhenExpandedPropType;\n};\n\n/* validator */\nexport const validateHasIconsWhenExpanded = (component: Generic.Element.Component, value?: HasIconsWhenExpandedPropType): void => {\n\twatchBoolean(component, '_hasIconsWhenExpanded', value);\n};\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n@use '../tooltip/style.scss' as *;\n@use '../@shared/icon.mixin' as *;\n\n@layer kol-component {\n\t@include kol-icon-styles();\n\t.kol-nav {\n\t\t$root: &;\n\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\n\t\t&__navigation {\n\t\t\t#{$root}:not(#{$root}--is-compact) & {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t.kol-span {\n\t\t\t\twidth: 100%;\n\t\t\t\tjustify-content: flex-start;\n\n\t\t\t\t&__container {\n\t\t\t\t\twidth: 100%;\n\n\t\t\t\t\t.kol-span__label {\n\t\t\t\t\t\tflex: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__list {\n\t\t\tdisplay: flex;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tflex-direction: column;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t&__entry-wrapper {\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t&__entry {\n\t\t\tflex-grow: 1;\n\t\t}\n\t}\n\n\t.kol-button {\n\t\ttext-align: left;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\nimport type {\n\tButtonOrLinkOrTextWithChildrenProps,\n\tButtonWithChildrenProps,\n\tCollapsiblePropType,\n\tHideLabelPropType,\n\tKoliBriIconsProp,\n\tLabelPropType,\n\tLinkProps,\n\tLinkWithChildrenProps,\n\tNavAPI,\n\tNavStates,\n\tStringified,\n} from '../../schema';\nimport {\n\ta11yHintLabelingLandmarks,\n\tdevHint,\n\tvalidateCollapsible,\n\tvalidateHasCompactButton,\n\tvalidateHasIconsWhenExpanded,\n\tvalidateHideLabel,\n\tvalidateLabel,\n} from '../../schema';\n\nimport { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport type { StencilUnknown } from '../../schema';\nimport clsx from '../../utils/clsx';\nimport { createRelatedUniqueId, createUniqueId } from '../../utils/dev.utils';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from './validation';\n\nconst linkValidator = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {\n\tif (typeof link === 'object' && typeof link._label === 'string' /* && typeof newLink._href === 'string' */) {\n\t\tif (Array.isArray(link._children)) {\n\t\t\treturn linksValidator(link._children);\n\t\t}\n\t\treturn false;\n\t}\n\treturn true;\n};\n\nconst linksValidator = (links: ButtonOrLinkOrTextWithChildrenProps[]): boolean => {\n\tif (Array.isArray(links)) {\n\t\treturn links.find(linkValidator) !== undefined;\n\t}\n\treturn true;\n};\n\nconst entryIsLink = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is LinkWithChildrenProps => {\n\treturn typeof (entryProps as LinkProps)._href === 'string';\n};\n\nconst entryIsButton = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is ButtonWithChildrenProps => {\n\treturn (entryProps as LinkProps)._href === undefined && typeof (entryProps as ButtonWithChildrenProps)._on?.onClick === 'function';\n};\n\n/**\n * The **Nav** component renders a group of related links or navigation elements that perform an action or display content when clicked.\n * It provides a highly configurable vertical or horizontal navigation bar that can represent multiple levels and vary in width.\n */\n@Component({\n\ttag: 'kol-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolNav implements NavAPI {\n\tprivate readonly navId = createUniqueId('kol-nav');\n\n\tprivate readonly listId = createRelatedUniqueId(this.navId, 'list');\n\n\tprivate expandChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: [...this.state._expandedChildren, children],\n\t\t};\n\t}\n\tprivate collapseChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren !== children),\n\t\t};\n\t}\n\n\tprivate readonly handleToggleExpansionClick = (children?: ButtonOrLinkOrTextWithChildrenProps[]): void => {\n\t\tif (children) {\n\t\t\tif (this.state._expandedChildren.includes(children)) {\n\t\t\t\tthis.collapseChildren(children);\n\t\t\t} else {\n\t\t\t\tthis.expandChildren(children);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate buildIconObject(collapsible: boolean, expanded: boolean, leftIcon?: string): KoliBriIconsProp {\n\t\tconst icon = {\n\t\t\tleft: '',\n\t\t\tright: '',\n\t\t};\n\t\tif (this.state._hasIconsWhenExpanded && leftIcon) {\n\t\t\ticon.left = leftIcon;\n\t\t}\n\t\tif (this.state._hideLabel) {\n\t\t\tif (leftIcon) {\n\t\t\t\ticon.left = leftIcon;\n\t\t\t} else {\n\t\t\t\ticon.left = 'kolicon-link';\n\t\t\t}\n\t\t}\n\t\tif (collapsible) {\n\t\t\tif (expanded) {\n\t\t\t\ticon.right = 'kolicon-minus';\n\t\t\t} else {\n\t\t\t\ticon.right = 'kolicon-plus';\n\t\t\t}\n\t\t}\n\t\treturn icon;\n\t}\n\n\tprivate entry(collapsible: boolean, hasChildren: boolean, entry: ButtonOrLinkOrTextWithChildrenProps, expanded: boolean, ariaID: string): JSX.Element {\n\t\tconst leftIcon = typeof entry._icons === 'string' ? entry._icons : typeof entry._icons?.left === 'string' ? entry._icons.left : undefined;\n\t\tconst icons = this.buildIconObject(collapsible && hasChildren, expanded, leftIcon);\n\n\t\treturn (\n\t\t\t<div class=\"kol-nav__entry-wrapper\">\n\t\t\t\t{entryIsLink(entry) ? (\n\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\tclass={clsx('kol-nav__entry kol-nav__entry--link', {\n\t\t\t\t\t\t\t'kol-nav__entry--collapsible': collapsible,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{...entry}\n\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t_icons={icons}\n\t\t\t\t\t\t_ariaControls={collapsible && hasChildren && expanded ? ariaID : undefined}\n\t\t\t\t\t\t_ariaExpanded={collapsible && hasChildren ? expanded : undefined}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass={clsx('kol-nav__entry kol-nav__entry--button', {\n\t\t\t\t\t\t\t'kol-nav__entry--collapsible': collapsible,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t_label={entry._label}\n\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t_icons={icons}\n\t\t\t\t\t\t_ariaControls={collapsible && hasChildren && expanded ? ariaID : undefined}\n\t\t\t\t\t\t_ariaExpanded={collapsible && hasChildren ? expanded : undefined}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: (event: MouseEvent, value: Stringified<StencilUnknown>) => {\n\t\t\t\t\t\t\t\tif (entryIsButton(entry) && typeof entry._on.onClick === 'function') {\n\t\t\t\t\t\t\t\t\tentry._on.onClick(event, value);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tthis.handleToggleExpansionClick(entry._children);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate li(collapsible: boolean, deep: number, index: number, link: ButtonOrLinkOrTextWithChildrenProps, ariaIDparent: string): JSX.Element {\n\t\tconst active = !!link._active;\n\t\tconst hasChildren = Array.isArray(link._children) && link._children.length > 0;\n\t\tconst expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));\n\t\tconst ariaID = createRelatedUniqueId(ariaIDparent, `${deep}-${index}`);\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={clsx('kol-nav__list-item', {\n\t\t\t\t\t'kol-nav__list-item--active': active,\n\t\t\t\t\t'kol-nav__list-item--expanded': expanded,\n\t\t\t\t\t'kol-nav__list-item--has-children': hasChildren,\n\t\t\t\t})}\n\t\t\t\tkey={index}\n\t\t\t>\n\t\t\t\t{this.entry(collapsible, hasChildren, link, expanded, ariaID)}\n\t\t\t\t{expanded && <this.linkList collapsible={collapsible} deep={deep + 1} links={link._children || []} id={ariaID} />}\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate linkList = (props: { collapsible: boolean; deep: number; links: ButtonOrLinkOrTextWithChildrenProps[]; id: string }): JSX.Element => {\n\t\treturn (\n\t\t\t<ul\n\t\t\t\tclass={clsx('kol-nav__list', {\n\t\t\t\t\t'kol-nav__list--nested': props.deep > 0,\n\t\t\t\t\t'kol-nav__list--vertical': props.deep !== 0,\n\t\t\t\t})}\n\t\t\t\tid={props.deep > 0 ? props.id : undefined}\n\t\t\t>\n\t\t\t\t{props.links.map((link, index: number) => {\n\t\t\t\t\treturn this.li(props.collapsible, props.deep, index, link, props.id);\n\t\t\t\t})}\n\t\t\t</ul>\n\t\t);\n\t};\n\n\tprivate initializeExpandedChildren() {\n\t\t//Reset expandedChildren before recalculation\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: [],\n\t\t};\n\t\t/**\n\t\t * Recursively process branches and expand branches which are active or have active children somewhere in the tree.\n\t\t * @param {ButtonOrLinkOrTextWithChildrenProps} branch\n\t\t * @return boolean - true indicates that the current branch or a child branch is active\n\t\t */\n\t\tconst handleBranch = (branch: ButtonOrLinkOrTextWithChildrenProps) => {\n\t\t\tif (branch._active) {\n\t\t\t\tif (branch._children) {\n\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t}\n\t\t\t\treturn true;\n\t\t\t} else if (branch._children) {\n\t\t\t\tfor (const childBranch of branch._children) {\n\t\t\t\t\tif (handleBranch(childBranch)) {\n\t\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false;\n\t\t};\n\t\tthis.state._links.forEach(handleBranch);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst collapsible = this.state._collapsible === true;\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={clsx('kol-nav', {\n\t\t\t\t\t'kol-nav--is-compact': this.state._hideLabel,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<nav aria-label={this.state._label} class=\"kol-nav__navigation\" id={this.navId}>\n\t\t\t\t\t<this.linkList collapsible={collapsible} deep={0} links={this.state._links} id={this.listId}></this.linkList>\n\t\t\t\t</nav>\n\t\t\t\t{this.state._hasCompactButton && (\n\t\t\t\t\t<div class=\"kol-nav__compact\">\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\tclass=\"kol-nav__toggle-button\"\n\t\t\t\t\t\t\t_ariaControls={this.navId}\n\t\t\t\t\t\t\t_ariaExpanded={!this.state._hideLabel}\n\t\t\t\t\t\t\t_icons={this.state._hideLabel ? 'kolicon-chevron-right' : 'kolicon-chevron-left'}\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_label={translate(this.state._hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize')}\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonClick: (): void => {\n\t\t\t\t\t\t\t\t\tthis.state = {\n\t\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t\t_hideLabel: !this.state._hideLabel,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_tooltipAlign=\"right\"\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines if navigation nodes can be collapsed or not. Enabled by default.\n\t * @TODO: Change type back to `CollapsiblePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _collapsible?: boolean = true;\n\n\t/**\n\t * Creates a button below the navigation, that toggles _collapsible.\n\t */\n\t@Prop() public _hasCompactButton?: boolean = false;\n\n\t/**\n\t * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n\t */\n\t@Prop() public _hasIconsWhenExpanded?: 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 visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links, buttons or texts to render.\n\t */\n\t@Prop() public _links!: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>;\n\n\t@State() public state: NavStates = {\n\t\t_collapsible: true,\n\t\t_hasCompactButton: false,\n\t\t_hasIconsWhenExpanded: false,\n\t\t_hideLabel: false,\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t\t_expandedChildren: [],\n\t};\n\n\t@Watch('_collapsible')\n\tpublic validateCollapsible(value?: CollapsiblePropType): void {\n\t\tvalidateCollapsible(this, value);\n\t}\n\n\t@Watch('_hasCompactButton')\n\tpublic validateHasCompactButton(value?: boolean): void {\n\t\tvalidateHasCompactButton(this, value);\n\t}\n\n\t@Watch('_hasIconsWhenExpanded')\n\tpublic validateHasIconsWhenExpanded(value?: boolean): void {\n\t\tvalidateHasIconsWhenExpanded(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType) {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>): void {\n\t\twatchNavLinks('KolNav', this, value);\n\t\tdevHint(`[KolNav] The navigation structure is not yet validated recursively.`);\n\t\t//Re-initialize expansion on links change\n\t\tthis.initializeExpandedChildren();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCollapsible(this._collapsible);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateHasCompactButton(this._hasCompactButton);\n\t\tthis.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t\tthis.initializeExpandedChildren();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAeO,MAAM,mBAAmB,GAAG,CAAC,SAAoC,EAAE,KAA2B,KAAU;AAC9G,IAAA,YAAY,CAAC,SAAS,EAAE,cAAc,EAAE,KAAK,CAAC;AAC/C,CAAC;;ACHM,MAAM,wBAAwB,GAAG,CAAC,SAAoC,EAAE,KAAgC,KAAU;AACxH,IAAA,YAAY,CAAC,SAAS,EAAE,mBAAmB,EAAE,KAAK,CAAC;AACpD,CAAC;;ACDM,MAAM,4BAA4B,GAAG,CAAC,SAAoC,EAAE,KAAoC,KAAU;AAChI,IAAA,YAAY,CAAC,SAAS,EAAE,uBAAuB,EAAE,KAAK,CAAC;AACxD,CAAC;;ACjBD,MAAM,eAAe,GAAG,g+UAAg+U;;ACkDx/U,MAAM,WAAW,GAAG,CAAC,UAA+C,KAAyC;AAC5G,IAAA,OAAO,OAAQ,UAAwB,CAAC,KAAK,KAAK,QAAQ;AAC3D,CAAC;AAED,MAAM,aAAa,GAAG,CAAC,UAA+C,KAA2C;;AAChH,IAAA,OAAQ,UAAwB,CAAC,KAAK,KAAK,SAAS,IAAI,QAAO,CAAC,EAAA,GAAA,UAAsC,CAAC,GAAG,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,OAAO,CAAA,KAAK,UAAU;AACnI,CAAC;MAaY,MAAM,GAAA,MAAA;AAPnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQkB,QAAA,IAAA,CAAA,KAAK,GAAG,cAAc,CAAC,SAAS,CAAC;QAEjC,IAAM,CAAA,MAAA,GAAG,qBAAqB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC;AAelD,QAAA,IAAA,CAAA,0BAA0B,GAAG,CAAC,QAAgD,KAAU;YACxG,IAAI,QAAQ,EAAE;gBACb,IAAI,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;AACpD,oBAAA,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC;;qBACzB;AACN,oBAAA,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC;;;AAGhC,SAAC;AAwFO,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,KAAuG,KAAiB;YAC3I,QACC,CACC,CAAA,IAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE;AAC5B,oBAAA,uBAAuB,EAAE,KAAK,CAAC,IAAI,GAAG,CAAC;AACvC,oBAAA,yBAAyB,EAAE,KAAK,CAAC,IAAI,KAAK,CAAC;AAC3C,iBAAA,CAAC,EACF,EAAE,EAAE,KAAK,CAAC,IAAI,GAAG,CAAC,GAAG,KAAK,CAAC,EAAE,GAAG,SAAS,EAAA,EAExC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAa,KAAI;gBACxC,OAAO,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;aACpE,CAAC,CACE;AAEP,SAAC;AAwEc,QAAA,IAAY,CAAA,YAAA,GAAa,IAAI;AAK7B,QAAA,IAAiB,CAAA,iBAAA,GAAa,KAAK;AAKnC,QAAA,IAAqB,CAAA,qBAAA,GAAa,KAAK;AAOvC,QAAA,IAAU,CAAA,UAAA,GAAa,KAAK;QAY3B,IAAA,CAAA,KAAK,GAAc;AAClC,YAAA,YAAY,EAAE,IAAI;AAClB,YAAA,iBAAiB,EAAE,KAAK;AACxB,YAAA,qBAAqB,EAAE,KAAK;AAC5B,YAAA,UAAU,EAAE,KAAK;AACjB,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,iBAAiB,EAAE,EAAE;SACrB;AAuDD;AA/RQ,IAAA,cAAc,CAAC,QAA+C,EAAA;AACrE,QAAA,IAAI,CAAC,KAAK,GACN,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAC,KAAK,CAAA,EAAA,EACb,iBAAiB,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE,QAAQ,CAAC,GAC9D;;AAEM,IAAA,gBAAgB,CAAC,QAA+C,EAAA;AACvE,QAAA,IAAI,CAAC,KAAK,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACN,IAAI,CAAC,KAAK,CAAA,EAAA,EACb,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,cAAc,KAAK,cAAc,KAAK,QAAQ,CAAC,EAAA,CACvG;;AAaM,IAAA,eAAe,CAAC,WAAoB,EAAE,QAAiB,EAAE,QAAiB,EAAA;AACjF,QAAA,MAAM,IAAI,GAAG;AACZ,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,KAAK,EAAE,EAAE;SACT;QACD,IAAI,IAAI,CAAC,KAAK,CAAC,qBAAqB,IAAI,QAAQ,EAAE;AACjD,YAAA,IAAI,CAAC,IAAI,GAAG,QAAQ;;AAErB,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YAC1B,IAAI,QAAQ,EAAE;AACb,gBAAA,IAAI,CAAC,IAAI,GAAG,QAAQ;;iBACd;AACN,gBAAA,IAAI,CAAC,IAAI,GAAG,cAAc;;;QAG5B,IAAI,WAAW,EAAE;YAChB,IAAI,QAAQ,EAAE;AACb,gBAAA,IAAI,CAAC,KAAK,GAAG,eAAe;;iBACtB;AACN,gBAAA,IAAI,CAAC,KAAK,GAAG,cAAc;;;AAG7B,QAAA,OAAO,IAAI;;IAGJ,KAAK,CAAC,WAAoB,EAAE,WAAoB,EAAE,KAA0C,EAAE,QAAiB,EAAE,MAAc,EAAA;;QACtI,MAAM,QAAQ,GAAG,OAAO,KAAK,CAAC,MAAM,KAAK,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,QAAO,CAAA,EAAA,GAAA,KAAK,CAAC,MAAM,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,CAAA,KAAK,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,GAAG,SAAS;AACzI,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,WAAW,IAAI,WAAW,EAAE,QAAQ,EAAE,QAAQ,CAAC;AAElF,QAAA,QACC,WAAK,KAAK,EAAC,wBAAwB,EACjC,EAAA,WAAW,CAAC,KAAK,CAAC,IAClB,EAAC,YAAY,EAAA,MAAA,CAAA,MAAA,CAAA,EACZ,KAAK,EAAE,IAAI,CAAC,qCAAqC,EAAE;AAClD,gBAAA,6BAA6B,EAAE,WAAW;AAC1C,aAAA,CAAC,EAAA,EACE,KAAK,EAAA,EACT,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EACjC,MAAM,EAAE,KAAK,EACb,aAAa,EAAE,WAAW,IAAI,WAAW,IAAI,QAAQ,GAAG,MAAM,GAAG,SAAS,EAC1E,aAAa,EAAE,WAAW,IAAI,WAAW,GAAG,QAAQ,GAAG,SAAS,EAC/D,CAAA,CAAA,KAEF,CAAC,CAAA,cAAc,EACd,EAAA,KAAK,EAAE,IAAI,CAAC,uCAAuC,EAAE;AACpD,gBAAA,6BAA6B,EAAE,WAAW;aAC1C,CAAC,EACF,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EACjC,MAAM,EAAE,KAAK,EACb,aAAa,EAAE,WAAW,IAAI,WAAW,IAAI,QAAQ,GAAG,MAAM,GAAG,SAAS,EAC1E,aAAa,EAAE,WAAW,IAAI,WAAW,GAAG,QAAQ,GAAG,SAAS,EAChE,GAAG,EAAE;AACJ,gBAAA,OAAO,EAAE,CAAC,KAAiB,EAAE,KAAkC,KAAI;AAClE,oBAAA,IAAI,aAAa,CAAC,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,UAAU,EAAE;wBACpE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC;;AAEhC,oBAAA,IAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC,SAAS,CAAC;iBAChD;AACD,aAAA,EACA,CAAA,CACF,CACI;;IAIA,EAAE,CAAC,WAAoB,EAAE,IAAY,EAAE,KAAa,EAAE,IAAyC,EAAE,YAAoB,EAAA;AAC5H,QAAA,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;AAC7B,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC;QAC9E,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AACjG,QAAA,MAAM,MAAM,GAAG,qBAAqB,CAAC,YAAY,EAAE,CAAG,EAAA,IAAI,CAAI,CAAA,EAAA,KAAK,CAAE,CAAA,CAAC;QACtE,QACC,CACC,CAAA,IAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE;AACjC,gBAAA,4BAA4B,EAAE,MAAM;AACpC,gBAAA,8BAA8B,EAAE,QAAQ;AACxC,gBAAA,kCAAkC,EAAE,WAAW;aAC/C,CAAC,EACF,GAAG,EAAE,KAAK,EAAA,EAET,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,CAAC,EAC5D,QAAQ,IAAI,CAAA,CAAC,IAAI,CAAC,QAAQ,EAAA,EAAC,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,IAAI,EAAE,EAAE,EAAE,EAAE,MAAM,EAAI,CAAA,CAC7G;;IAoBC,0BAA0B,GAAA;QAEjC,IAAI,CAAC,KAAK,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACN,IAAI,CAAC,KAAK,CAAA,EAAA,EACb,iBAAiB,EAAE,EAAE,EAAA,CACrB;AAMD,QAAA,MAAM,YAAY,GAAG,CAAC,MAA2C,KAAI;AACpE,YAAA,IAAI,MAAM,CAAC,OAAO,EAAE;AACnB,gBAAA,IAAI,MAAM,CAAC,SAAS,EAAE;AACrB,oBAAA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,SAAS,CAAC;;AAEtC,gBAAA,OAAO,IAAI;;AACL,iBAAA,IAAI,MAAM,CAAC,SAAS,EAAE;AAC5B,gBAAA,KAAK,MAAM,WAAW,IAAI,MAAM,CAAC,SAAS,EAAE;AAC3C,oBAAA,IAAI,YAAY,CAAC,WAAW,CAAC,EAAE;AAC9B,wBAAA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,SAAS,CAAC;AACrC,wBAAA,OAAO,IAAI;;;;AAId,YAAA,OAAO,KAAK;AACb,SAAC;QACD,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC;;IAGjC,MAAM,GAAA;QACZ,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,IAAI;AACpD,QAAA,QACC,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE;AACtB,gBAAA,qBAAqB,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU;AAC5C,aAAA,CAAC,EAAA,EAEF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAiB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAC,qBAAqB,EAAC,EAAE,EAAE,IAAI,CAAC,KAAK,EAAA,EAC7E,CAAC,CAAA,IAAI,CAAC,QAAQ,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,EAAA,CAAkB,CACxG,EACL,IAAI,CAAC,KAAK,CAAC,iBAAiB,KAC5B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC5B,CAAC,CAAA,cAAc,EACd,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAC9B,aAAa,EAAE,IAAI,CAAC,KAAK,EACzB,aAAa,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EACrC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,uBAAuB,GAAG,sBAAsB,EAChF,UAAU,EAAA,IAAA,EACV,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,kBAAkB,GAAG,kBAAkB,CAAC,EAClF,GAAG,EAAE;gBACJ,OAAO,EAAE,MAAW;AACnB,oBAAA,IAAI,CAAC,KAAK,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACN,IAAI,CAAC,KAAK,CACb,EAAA,EAAA,UAAU,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAClC;iBACD;aACD,EACD,aAAa,EAAC,OAAO,EAAA,CACJ,CACb,CACN,CACI;;AAgDD,IAAA,mBAAmB,CAAC,KAA2B,EAAA;AACrD,QAAA,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC;;AAI1B,IAAA,wBAAwB,CAAC,KAAe,EAAA;AAC9C,QAAA,wBAAwB,CAAC,IAAI,EAAE,KAAK,CAAC;;AAI/B,IAAA,4BAA4B,CAAC,KAAe,EAAA;AAClD,QAAA,4BAA4B,CAAC,IAAI,EAAE,KAAK,CAAC;;AAInC,IAAA,iBAAiB,CAAC,KAAyB,EAAA;AACjD,QAAA,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC;;AAIxB,IAAA,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK,EAAA;QACrF,IAAI,CAAC,OAAO,EAAE;AACb,YAAA,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;AAElC,QAAA,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;AAC1B,YAAA,QAAQ,EAAE,IAAI;AACd,SAAA,CAAC;QACF,yBAAyB,CAAC,KAAK,CAAC;AAChC,QAAA,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;AAIxB,IAAA,aAAa,CAAC,KAA0D,EAAA;AAC9E,QAAA,aAAa,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC;QACpC,OAAO,CAAC,CAAqE,mEAAA,CAAA,CAAC;QAE9E,IAAI,CAAC,0BAA0B,EAAE;;IAG3B,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC;AAC3C,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;AACvC,QAAA,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,iBAAiB,CAAC;AACrD,QAAA,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,qBAAqB,CAAC;QAC7D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC;AAChD,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;QAC/B,IAAI,CAAC,0BAA0B,EAAE;;IAG3B,oBAAoB,GAAA;AAC1B,QAAA,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"kol-nav.entry.js","sources":["src/schema/props/collapsible.ts","src/schema/props/has-compact-button.ts","src/schema/props/has-icons-when-expanded.ts","src/components/nav/style.scss?tag=kol-nav&mode=default&encapsulation=shadow","src/components/nav/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type CollapsiblePropType = boolean;\n\n/**\n * Defines if navigation nodes can be collapsed or not.\n */\nexport type PropCollapsible = {\n\tcollapsible: CollapsiblePropType;\n};\n\n/* validator */\nexport const validateCollapsible = (component: Generic.Element.Component, value?: CollapsiblePropType): void => {\n\twatchBoolean(component, '_collapsible', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\ntype HasCompactButtonPropType = boolean;\n\n/**\n * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n */\nexport type PropHasCompactButton = {\n\thasCompactButton: HasCompactButtonPropType;\n};\n\n/* validator */\nexport const validateHasCompactButton = (component: Generic.Element.Component, value?: HasCompactButtonPropType): void => {\n\twatchBoolean(component, '_hasCompactButton', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type HasIconsWhenExpandedPropType = boolean;\n\n/**\n * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n */\nexport type PropHasIconsWhenExpanded = {\n\thasIconsWhenExpanded: HasIconsWhenExpandedPropType;\n};\n\n/* validator */\nexport const validateHasIconsWhenExpanded = (component: Generic.Element.Component, value?: HasIconsWhenExpandedPropType): void => {\n\twatchBoolean(component, '_hasIconsWhenExpanded', value);\n};\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n@use '../tooltip/style.scss' as *;\n@use '../@shared/icon.mixin' as *;\n\n@layer kol-component {\n\t@include kol-icon-styles();\n\t.kol-nav {\n\t\t$root: &;\n\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\n\t\t&__navigation {\n\t\t\t#{$root}:not(#{$root}--is-compact) & {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t.kol-span {\n\t\t\t\twidth: 100%;\n\t\t\t\tjustify-content: flex-start;\n\n\t\t\t\t&__container {\n\t\t\t\t\twidth: 100%;\n\n\t\t\t\t\t.kol-span__label {\n\t\t\t\t\t\tflex: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__list {\n\t\t\tdisplay: flex;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tflex-direction: column;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t&__entry-wrapper {\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t&__entry {\n\t\t\tflex-grow: 1;\n\t\t}\n\t}\n\n\t.kol-button {\n\t\ttext-align: left;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\nimport type {\n\tButtonOrLinkOrTextWithChildrenProps,\n\tButtonWithChildrenProps,\n\tCollapsiblePropType,\n\tHideLabelPropType,\n\tKoliBriIconsProp,\n\tLabelPropType,\n\tLinkProps,\n\tLinkWithChildrenProps,\n\tNavAPI,\n\tNavStates,\n\tStringified,\n} from '../../schema';\nimport {\n\ta11yHintLabelingLandmarks,\n\tdevHint,\n\tvalidateCollapsible,\n\tvalidateHasCompactButton,\n\tvalidateHasIconsWhenExpanded,\n\tvalidateHideLabel,\n\tvalidateLabel,\n} from '../../schema';\n\nimport { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport type { StencilUnknown } from '../../schema';\nimport clsx from '../../utils/clsx';\nimport { createRelatedUniqueId, createUniqueId } from '../../utils/dev.utils';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from './validation';\n\nconst linkValidator = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {\n\tif (typeof link === 'object' && typeof link._label === 'string' /* && typeof newLink._href === 'string' */) {\n\t\tif (Array.isArray(link._children)) {\n\t\t\treturn linksValidator(link._children);\n\t\t}\n\t\treturn false;\n\t}\n\treturn true;\n};\n\nconst linksValidator = (links: ButtonOrLinkOrTextWithChildrenProps[]): boolean => {\n\tif (Array.isArray(links)) {\n\t\treturn links.find(linkValidator) !== undefined;\n\t}\n\treturn true;\n};\n\nconst entryIsLink = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is LinkWithChildrenProps => {\n\treturn typeof (entryProps as LinkProps)._href === 'string';\n};\n\nconst entryIsButton = (entryProps: ButtonOrLinkOrTextWithChildrenProps): entryProps is ButtonWithChildrenProps => {\n\treturn (entryProps as LinkProps)._href === undefined && typeof (entryProps as ButtonWithChildrenProps)._on?.onClick === 'function';\n};\n\n/**\n * The **Nav** component renders a group of related links or navigation elements that perform an action or display content when clicked.\n * It provides a highly configurable vertical or horizontal navigation bar that can represent multiple levels and vary in width.\n */\n@Component({\n\ttag: 'kol-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolNav implements NavAPI {\n\tprivate readonly navId = createUniqueId('kol-nav');\n\n\tprivate readonly listId = createRelatedUniqueId(this.navId, 'list');\n\n\tprivate expandChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: [...this.state._expandedChildren, children],\n\t\t};\n\t}\n\tprivate collapseChildren(children: ButtonOrLinkOrTextWithChildrenProps[]) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren !== children),\n\t\t};\n\t}\n\n\tprivate readonly handleToggleExpansionClick = (children?: ButtonOrLinkOrTextWithChildrenProps[]): void => {\n\t\tif (children) {\n\t\t\tif (this.state._expandedChildren.includes(children)) {\n\t\t\t\tthis.collapseChildren(children);\n\t\t\t} else {\n\t\t\t\tthis.expandChildren(children);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate buildIconObject(collapsible: boolean, expanded: boolean, leftIcon?: string): KoliBriIconsProp {\n\t\tconst icon = {\n\t\t\tleft: '',\n\t\t\tright: '',\n\t\t};\n\t\tif (this.state._hasIconsWhenExpanded && leftIcon) {\n\t\t\ticon.left = leftIcon;\n\t\t}\n\t\tif (this.state._hideLabel) {\n\t\t\tif (leftIcon) {\n\t\t\t\ticon.left = leftIcon;\n\t\t\t} else {\n\t\t\t\ticon.left = 'kolicon-link';\n\t\t\t}\n\t\t}\n\t\tif (collapsible) {\n\t\t\tif (expanded) {\n\t\t\t\ticon.right = 'kolicon-minus';\n\t\t\t} else {\n\t\t\t\ticon.right = 'kolicon-plus';\n\t\t\t}\n\t\t}\n\t\treturn icon;\n\t}\n\n\tprivate entry(collapsible: boolean, hasChildren: boolean, entry: ButtonOrLinkOrTextWithChildrenProps, expanded: boolean, ariaID: string): JSX.Element {\n\t\tconst leftIcon = typeof entry._icons === 'string' ? entry._icons : typeof entry._icons?.left === 'string' ? entry._icons.left : undefined;\n\t\tconst icons = this.buildIconObject(collapsible && hasChildren, expanded, leftIcon);\n\n\t\treturn (\n\t\t\t<div class=\"kol-nav__entry-wrapper\">\n\t\t\t\t{entryIsLink(entry) ? (\n\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\tclass={clsx('kol-nav__entry kol-nav__entry--link', {\n\t\t\t\t\t\t\t'kol-nav__entry--collapsible': collapsible,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{...entry}\n\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t_icons={icons}\n\t\t\t\t\t\t_ariaControls={collapsible && hasChildren && expanded ? ariaID : undefined}\n\t\t\t\t\t\t_ariaExpanded={collapsible && hasChildren ? expanded : undefined}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass={clsx('kol-nav__entry kol-nav__entry--button', {\n\t\t\t\t\t\t\t'kol-nav__entry--collapsible': collapsible,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t_label={entry._label}\n\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t_icons={icons}\n\t\t\t\t\t\t_ariaControls={collapsible && hasChildren && expanded ? ariaID : undefined}\n\t\t\t\t\t\t_ariaExpanded={collapsible && hasChildren ? expanded : undefined}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: (event: MouseEvent, value: Stringified<StencilUnknown>) => {\n\t\t\t\t\t\t\t\tif (entryIsButton(entry) && typeof entry._on.onClick === 'function') {\n\t\t\t\t\t\t\t\t\tentry._on.onClick(event, value);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tthis.handleToggleExpansionClick(entry._children);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate li(collapsible: boolean, deep: number, index: number, link: ButtonOrLinkOrTextWithChildrenProps, ariaIDparent: string): JSX.Element {\n\t\tconst active = !!link._active;\n\t\tconst hasChildren = Array.isArray(link._children) && link._children.length > 0;\n\t\tconst expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));\n\t\tconst ariaID = createRelatedUniqueId(ariaIDparent, `${deep}-${index}`);\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={clsx('kol-nav__list-item', {\n\t\t\t\t\t'kol-nav__list-item--active': active,\n\t\t\t\t\t'kol-nav__list-item--expanded': expanded,\n\t\t\t\t\t'kol-nav__list-item--has-children': hasChildren,\n\t\t\t\t})}\n\t\t\t\tkey={index}\n\t\t\t>\n\t\t\t\t{this.entry(collapsible, hasChildren, link, expanded, ariaID)}\n\t\t\t\t{expanded && <this.linkList collapsible={collapsible} deep={deep + 1} links={link._children || []} id={ariaID} />}\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate linkList = (props: { collapsible: boolean; deep: number; links: ButtonOrLinkOrTextWithChildrenProps[]; id: string }): JSX.Element => {\n\t\treturn (\n\t\t\t<ul\n\t\t\t\tclass={clsx('kol-nav__list', {\n\t\t\t\t\t'kol-nav__list--nested': props.deep > 0,\n\t\t\t\t\t'kol-nav__list--vertical': props.deep !== 0,\n\t\t\t\t})}\n\t\t\t\tid={props.deep > 0 ? props.id : undefined}\n\t\t\t>\n\t\t\t\t{props.links.map((link, index: number) => {\n\t\t\t\t\treturn this.li(props.collapsible, props.deep, index, link, props.id);\n\t\t\t\t})}\n\t\t\t</ul>\n\t\t);\n\t};\n\n\tprivate initializeExpandedChildren() {\n\t\t//Reset expandedChildren before recalculation\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_expandedChildren: [],\n\t\t};\n\t\t/**\n\t\t * Recursively process branches and expand branches which are active or have active children somewhere in the tree.\n\t\t * @param {ButtonOrLinkOrTextWithChildrenProps} branch\n\t\t * @return boolean - true indicates that the current branch or a child branch is active\n\t\t */\n\t\tconst handleBranch = (branch: ButtonOrLinkOrTextWithChildrenProps) => {\n\t\t\tif (branch._active) {\n\t\t\t\tif (branch._children) {\n\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t}\n\t\t\t\treturn true;\n\t\t\t} else if (branch._children) {\n\t\t\t\tfor (const childBranch of branch._children) {\n\t\t\t\t\tif (handleBranch(childBranch)) {\n\t\t\t\t\t\tthis.expandChildren(branch._children);\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false;\n\t\t};\n\t\tthis.state._links.forEach(handleBranch);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst collapsible = this.state._collapsible === true;\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={clsx('kol-nav', {\n\t\t\t\t\t'kol-nav--is-compact': this.state._hideLabel,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<nav aria-label={this.state._label} class=\"kol-nav__navigation\" id={this.navId}>\n\t\t\t\t\t<this.linkList collapsible={collapsible} deep={0} links={this.state._links} id={this.listId}></this.linkList>\n\t\t\t\t</nav>\n\t\t\t\t{this.state._hasCompactButton && (\n\t\t\t\t\t<div class=\"kol-nav__compact\">\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\tclass=\"kol-nav__toggle-button\"\n\t\t\t\t\t\t\t_ariaControls={this.navId}\n\t\t\t\t\t\t\t_ariaExpanded={!this.state._hideLabel}\n\t\t\t\t\t\t\t_icons={this.state._hideLabel ? 'kolicon-chevron-right' : 'kolicon-chevron-left'}\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_label={translate(this.state._hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize')}\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonClick: (): void => {\n\t\t\t\t\t\t\t\t\tthis.state = {\n\t\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t\t_hideLabel: !this.state._hideLabel,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_tooltipAlign=\"right\"\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines if navigation nodes can be collapsed or not. Enabled by default.\n\t * @TODO: Change type back to `CollapsiblePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _collapsible?: boolean = true;\n\n\t/**\n\t * Creates a button below the navigation, that toggles _collapsible.\n\t */\n\t@Prop() public _hasCompactButton?: boolean = false;\n\n\t/**\n\t * Shows icons next to the navigation item labels, even when the navigation is not collapsed.\n\t */\n\t@Prop() public _hasIconsWhenExpanded?: 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 visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links, buttons or texts to render.\n\t */\n\t@Prop() public _links!: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>;\n\n\t@State() public state: NavStates = {\n\t\t_collapsible: true,\n\t\t_hasCompactButton: false,\n\t\t_hasIconsWhenExpanded: false,\n\t\t_hideLabel: false,\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t\t_expandedChildren: [],\n\t};\n\n\t@Watch('_collapsible')\n\tpublic validateCollapsible(value?: CollapsiblePropType): void {\n\t\tvalidateCollapsible(this, value);\n\t}\n\n\t@Watch('_hasCompactButton')\n\tpublic validateHasCompactButton(value?: boolean): void {\n\t\tvalidateHasCompactButton(this, value);\n\t}\n\n\t@Watch('_hasIconsWhenExpanded')\n\tpublic validateHasIconsWhenExpanded(value?: boolean): void {\n\t\tvalidateHasIconsWhenExpanded(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType) {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>): void {\n\t\twatchNavLinks('KolNav', this, value);\n\t\tdevHint(`[KolNav] The navigation structure is not yet validated recursively.`);\n\t\t//Re-initialize expansion on links change\n\t\tthis.initializeExpandedChildren();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCollapsible(this._collapsible);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateHasCompactButton(this._hasCompactButton);\n\t\tthis.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded);\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t\tthis.initializeExpandedChildren();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/kol-pagination-wc.entry.js

@@ -1,14 +1,14 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-btga56T2.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5bbrauFT.js';
 import { N as watchNumber, V as STATE_CHANGE_EVENT, b as watchValidator, H as watchJsonArrayString, p as parseJson } from './common-D5l8QiaY.js';
 import { v as validateCustomClass } from './custom-class-C1NlV4ea.js';
 import { v as validateLabel } from './label-Ftw1VCQG.js';
 import { v as validateTooltipAlign } from './tooltip-align-ChjYN8Pt.js';
 import { j as KolSelectWcTag, b as KolButtonWcTag } from './component-names-Dy77vq43.js';
 import { t as translate } from './i18n-BsXYYo8j.js';
-import { n as nonce } from './dev.utils-Bhh4oJHO.js';
+import { n as nonce } from './dev.utils-CIi6OrYn.js';
 import { d as dispatchDomEvent, K as KolEvent } from './events-BhfZTW2e.js';
 import { r as removeNavLabel, a as addNavLabel } from './unique-nav-labels-D8t0Lwbk.js';
 import './align-DpNc6EKs.js';

package/dist/esm/kol-pagination.entry.js

@@ -1,11 +1,11 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import { r as registerInstance, h } from './index-btga56T2.js';
+import { r as registerInstance, h } from './index-5bbrauFT.js';
 import { g as KolPaginationWcTag } from './component-names-Dy77vq43.js';
 import './common-D5l8QiaY.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     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's\n     * rounding, dropping just below the required minimum.\n     */\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\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: white;\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    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=1784281062679\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1784281062679#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1784281062679\") format(\"woff2\"), url(\"kolicons.woff?t=1784281062679\") format(\"woff\"), url(\"kolicons.ttf?t=1784281062679\") format(\"truetype\"), url(\"kolicons.svg?t=1784281062679#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: black;\n    background-color: white;\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: black;\n    background-color: white;\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  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    height: 100%;\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-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--required .kol-form-field__label-text:has(.kol-span__slot[hidden])::after,\n  .kol-form-field--required .kol-form-field .kol-tooltip__content .kol-span__label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    position: relative;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n    padding: 0;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: \"✓ \";\n  }\n  .kol-select[multiple] option {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n  }\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-pagination {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    container: paging/inline-size;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: \"•••\";\n  }\n  .kol-pagination__page-size-select .kol-form-field-select {\n    align-items: center;\n    grid-template-columns: 1fr max-content;\n  }\n  @container paging (width < 600px) {\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__button--numbers),\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__separator) {\n      display: none;\n    }\n  }\n}";
+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     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's\n     * rounding, dropping just below the required minimum.\n     */\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\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    --kol-a11y-font-color: black;\n    --kol-a11y-background-color: white;\n    color: var(--kol-a11y-font-color);\n    background-color: var(--kol-a11y-background-color);\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    --kol-a11y-font-family: Verdana;\n    font-family: var(--kol-a11y-font-family);\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: white;\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    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=1785491886871\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1785491886871#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1785491886871\") format(\"woff2\"), url(\"kolicons.woff?t=1785491886871\") format(\"woff\"), url(\"kolicons.ttf?t=1785491886871\") format(\"truetype\"), url(\"kolicons.svg?t=1785491886871#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: black;\n    background-color: white;\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: black;\n    background-color: white;\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  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    height: 100%;\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-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n    grid-template-areas: \"icon heading close\" \"icon content close\";\n    grid-template-columns: min-content 1fr min-content;\n    grid-template-rows: min-content min-content;\n  }\n  .kol-alert__icon {\n    grid-area: icon;\n  }\n  .kol-alert__heading {\n    grid-area: heading;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    grid-area: close;\n  }\n  .kol-alert__content {\n    grid-area: content;\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--required .kol-form-field__label-text:has(.kol-span__slot[hidden])::after,\n  .kol-form-field--required .kol-form-field .kol-tooltip__content .kol-span__label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    position: relative;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n    padding: 0;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select[multiple][size=\"1\"] {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: \"✓ \";\n  }\n  .kol-select[multiple] option {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n  }\n  .kol-select[multiple][size=\"1\"] option::checkmark {\n    height: 100%;\n  }\n  .kol-select[multiple][size=\"1\"] option:checked::before {\n    display: none;\n  }\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-pagination {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    container: paging/inline-size;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: \"•••\";\n  }\n  .kol-pagination__page-size-select .kol-form-field-select {\n    align-items: center;\n    grid-template-columns: 1fr max-content;\n  }\n  @container paging (width < 600px) {\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__button--numbers),\n    .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__separator) {\n      display: none;\n    }\n  }\n}";
 
 const KolPagination = class {
     constructor(hostRef) {

package/dist/esm/kol-pagination.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-pagination.entry.js","sources":["src/components/pagination/style.scss?tag=kol-pagination&mode=default&encapsulation=shadow","src/components/pagination/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n@use '../tooltip/style.scss' as *;\n@use '../@shared/pagination.mixin' as *;\n\n@layer kol-component {\n\t@include kol-pagination-styles;\n}\n","import type {\n\tCustomClassPropType,\n\tKoliBriPaginationButtonCallbacks,\n\tLabelPropType,\n\tMaxPropType,\n\tPaginationHasButton,\n\tPaginationProps,\n\tStringified,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\n\nimport { KolPaginationWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-pagination',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPagination implements PaginationProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPaginationWcTag\n\t\t\t\t_boundaryCount={this._boundaryCount}\n\t\t\t\t_label={this._label}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_on={this._on}\n\t\t\t\t_hasButtons={this._hasButtons}\n\t\t\t\t_page={this._page}\n\t\t\t\t_pageSize={this._pageSize}\n\t\t\t\t_pageSizeOptions={this._pageSizeOptions}\n\t\t\t\t_siblingCount={this._siblingCount}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_max={this._max}\n\t\t\t></KolPaginationWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the amount of pages to show next to the outer arrow buttons.\n\t */\n\t@Prop() public _boundaryCount?: number = 1;\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 * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which navigation buttons to render (first, last, next, previous buttons).\n\t */\n\t@Prop() public _hasButtons?: boolean | Stringified<PaginationHasButton> = true;\n\n\t/**\n\t * Defines the current page.\n\t */\n\t@Prop() public _page!: number;\n\n\t/**\n\t * Defines the amount of entries to show per page.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _pageSize = 1;\n\n\t/**\n\t * Defines the options for the page-size-select.\n\t */\n\t@Prop() public _pageSizeOptions: Stringified<number[]> = [];\n\n\t/**\n\t * Gibt an, auf welche Callback-Events reagiert werden.\n\t */\n\t@Prop() public _on!: KoliBriPaginationButtonCallbacks;\n\n\t/**\n\t * Defines the amount of pages to show next to the current page.\n\t */\n\t@Prop() public _siblingCount?: number = 1;\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 the maximum value of the element.\n\t */\n\t@Prop() public _max!: MaxPropType;\n}\n"],"names":[],"mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,kraAAkra;;MCuB7ra,aAAa,GAAA,MAAA;AAP1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AA6BgB,QAAA,IAAc,CAAA,cAAA,GAAY,CAAC;AAe3B,QAAA,IAAW,CAAA,WAAA,GAAgD,IAAI;AAU9B,QAAA,IAAS,CAAA,SAAA,GAAG,CAAC;AAK9C,QAAA,IAAgB,CAAA,gBAAA,GAA0B,EAAE;AAU5C,QAAA,IAAa,CAAA,aAAA,GAAY,CAAC;AAK1B,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAM3D;IAxEO,MAAM,GAAA;AACZ,QAAA,QACC,CAAA,CAAC,kBAAkB,EAAA,EAAA,GAAA,EAAA,0CAAA,EAClB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CACM;;;;;;;;;"}
+{"version":3,"file":"kol-pagination.entry.js","sources":["src/components/pagination/style.scss?tag=kol-pagination&mode=default&encapsulation=shadow","src/components/pagination/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n@use '../tooltip/style.scss' as *;\n@use '../@shared/pagination.mixin' as *;\n\n@layer kol-component {\n\t@include kol-pagination-styles;\n}\n","import type {\n\tCustomClassPropType,\n\tKoliBriPaginationButtonCallbacks,\n\tLabelPropType,\n\tMaxPropType,\n\tPaginationHasButton,\n\tPaginationProps,\n\tStringified,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\n\nimport { KolPaginationWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-pagination',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPagination implements PaginationProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPaginationWcTag\n\t\t\t\t_boundaryCount={this._boundaryCount}\n\t\t\t\t_label={this._label}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_on={this._on}\n\t\t\t\t_hasButtons={this._hasButtons}\n\t\t\t\t_page={this._page}\n\t\t\t\t_pageSize={this._pageSize}\n\t\t\t\t_pageSizeOptions={this._pageSizeOptions}\n\t\t\t\t_siblingCount={this._siblingCount}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_max={this._max}\n\t\t\t></KolPaginationWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the amount of pages to show next to the outer arrow buttons.\n\t */\n\t@Prop() public _boundaryCount?: number = 1;\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 * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which navigation buttons to render (first, last, next, previous buttons).\n\t */\n\t@Prop() public _hasButtons?: boolean | Stringified<PaginationHasButton> = true;\n\n\t/**\n\t * Defines the current page.\n\t */\n\t@Prop() public _page!: number;\n\n\t/**\n\t * Defines the amount of entries to show per page.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _pageSize = 1;\n\n\t/**\n\t * Defines the options for the page-size-select.\n\t */\n\t@Prop() public _pageSizeOptions: Stringified<number[]> = [];\n\n\t/**\n\t * Gibt an, auf welche Callback-Events reagiert werden.\n\t */\n\t@Prop() public _on!: KoliBriPaginationButtonCallbacks;\n\n\t/**\n\t * Defines the amount of pages to show next to the current page.\n\t */\n\t@Prop() public _siblingCount?: number = 1;\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 the maximum value of the element.\n\t */\n\t@Prop() public _max!: MaxPropType;\n}\n"],"names":[],"mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,kzbAAkzb;;MCuB7zb,aAAa,GAAA,MAAA;AAP1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AA6BgB,QAAA,IAAc,CAAA,cAAA,GAAY,CAAC;AAe3B,QAAA,IAAW,CAAA,WAAA,GAAgD,IAAI;AAU9B,QAAA,IAAS,CAAA,SAAA,GAAG,CAAC;AAK9C,QAAA,IAAgB,CAAA,gBAAA,GAA0B,EAAE;AAU5C,QAAA,IAAa,CAAA,aAAA,GAAY,CAAC;AAK1B,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAM3D;IAxEO,MAAM,GAAA;AACZ,QAAA,QACC,CAAA,CAAC,kBAAkB,EAAA,EAAA,GAAA,EAAA,0CAAA,EAClB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CACM;;;;;;;;;"}

package/dist/esm/kol-popover-button-wc.entry.js

@@ -1,15 +1,15 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import { h, r as registerInstance, F as Fragment } from './index-btga56T2.js';
+import { h, r as registerInstance, F as Fragment } from './index-5bbrauFT.js';
 import { a as __rest, _ as __decorate } from './tslib.es6-QNbPBOk5.js';
 import { b as KolButtonWcTag } from './component-names-Dy77vq43.js';
 import { c as clsx } from './clsx-COFh-Vc8.js';
-import { a as alignFloatingElements, b as autoUpdate } from './align-floating-elements-Dg-_rui1.js';
+import { a as alignFloatingElements, b as autoUpdate } from './align-floating-elements-BgsKEL5o.js';
 import './common-D5l8QiaY.js';
 import { v as validateInline } from './inline-W0JvHnyJ.js';
 import { b as validateAlignment } from './align-DpNc6EKs.js';
-import { c as createUniqueId } from './dev.utils-Bhh4oJHO.js';
+import { c as createUniqueId } from './dev.utils-CIi6OrYn.js';
 import { b as directFocus, e as directClick, c as createCtaRef } from './element-interaction-C5-6aPzz.js';
 import './element-focus-BQXzaLL9.js';
 

package/dist/esm/kol-popover-button.entry.js

@@ -1,14 +1,14 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import { r as registerInstance, h, g as getElement } from './index-btga56T2.js';
+import { r as registerInstance, h, g as getElement } from './index-5bbrauFT.js';
 import { _ as __decorate } from './tslib.es6-QNbPBOk5.js';
 import { h as KolPopoverButtonWcTag } from './component-names-Dy77vq43.js';
 import { a as delegateClick, d as delegateFocus, c as createCtaRef } from './element-interaction-C5-6aPzz.js';
 import './common-D5l8QiaY.js';
 import './element-focus-BQXzaLL9.js';
 
-const defaultStyleCss = "@charset \"UTF-8\";\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/* 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     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's\n     * rounding, dropping just below the required minimum.\n     */\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\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: white;\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    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=1784281062679\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1784281062679#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1784281062679\") format(\"woff2\"), url(\"kolicons.woff?t=1784281062679\") format(\"woff\"), url(\"kolicons.ttf?t=1784281062679\") format(\"truetype\"), url(\"kolicons.svg?t=1784281062679#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: black;\n    background-color: white;\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: black;\n    background-color: white;\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    height: 100%;\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  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-popover {\n    opacity: 0;\n    transition: 0.2s ease-out opacity;\n  }\n  .kol-popover-button--open + .kol-popover {\n    opacity: 1;\n  }\n  .kol-popover-button--open .kol-button__tooltip {\n    display: none;\n  }\n  .kol-popover-button--inline {\n    display: inline-block;\n  }\n  .kol-popover-button--inline .kol-button {\n    min-width: 0;\n    min-height: 1em;\n  }\n}";
+const defaultStyleCss = "@charset \"UTF-8\";\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/* 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     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's\n     * rounding, dropping just below the required minimum.\n     */\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\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    --kol-a11y-font-color: black;\n    --kol-a11y-background-color: white;\n    color: var(--kol-a11y-font-color);\n    background-color: var(--kol-a11y-background-color);\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    --kol-a11y-font-family: Verdana;\n    font-family: var(--kol-a11y-font-family);\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: white;\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    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=1785491886871\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1785491886871#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1785491886871\") format(\"woff2\"), url(\"kolicons.woff?t=1785491886871\") format(\"woff\"), url(\"kolicons.ttf?t=1785491886871\") format(\"truetype\"), url(\"kolicons.svg?t=1785491886871#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: black;\n    background-color: white;\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: black;\n    background-color: white;\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    height: 100%;\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  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-popover {\n    opacity: 0;\n    transition: 0.2s ease-out opacity;\n  }\n  .kol-popover-button--open + .kol-popover {\n    opacity: 1;\n  }\n  .kol-popover-button--open .kol-button__tooltip {\n    display: none;\n  }\n  .kol-popover-button--inline {\n    display: inline-block;\n  }\n  .kol-popover-button--inline .kol-button {\n    min-width: 0;\n    min-height: 1em;\n  }\n}";
 
 const KolPopoverButton = class {
     constructor(hostRef) {

package/dist/esm/kol-popover-button.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-popover-button.entry.js","sources":["src/components/popover-button/style.scss?tag=kol-popover-button&mode=default&encapsulation=shadow","src/components/popover-button/shadow.tsx"],"sourcesContent":["@use '../@shared/global' as *;\n@use '../@shared/button.mixin' as *;\n@use '../@shared/popover-button.mixin' as *;\n@use '../tooltip/style' as *;\n\n@layer kol-component {\n\t@include kol-button-styles('kol-button');\n\t@include kol-popover-button-styles;\n\n\t.kol-popover-button {\n\t\t&--open {\n\t\t\t.kol-button__tooltip {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t&--inline {\n\t\t\tdisplay: inline-block;\n\n\t\t\t.kol-button {\n\t\t\t\tmin-width: 0;\n\t\t\t\tmin-height: 1em;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\nimport { KolPopoverButtonWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAriaDescriptionPropType,\n\tButtonTypePropType,\n\tClickableElement,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tInlinePropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\nimport type { PopoverButtonProps } from '../../schema/components/popover-button';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * A button that toggles the visibility of a popover overlay containing arbitrary content.\n * The popover uses the native HTML Popover API for lightweight, non-modal overlays.\n *\n * @slot - The popover content (displayed when the button is clicked).\n * @slot expert - Custom label content for the button (when `_label` is `false`).\n */\n@Component({\n\ttag: 'kol-popover-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPopoverButton implements ClickableElement, FocusableElement, PopoverButtonProps {\n\t@Element() protected readonly host?: HTMLKolPopoverButtonElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolPopoverButtonWcElement>();\n\n\t/**\n\t * Hides the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tvoid this.ctaRef.el?.hidePopover();\n\t}\n\n\t/**\n\t * Shows the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async showPopover() {\n\t\tvoid this.ctaRef.el?.showPopover();\n\t}\n\n\t/**\n\t * Clicks the primary interactive element inside this component.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_inline={this._inline}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_popoverAlign={this._popoverAlign}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t<slot />\n\t\t\t</KolPopoverButtonWcTag>\n\t\t);\n\t}\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 the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\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 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 where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\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 */\n\t@Prop() public _variant?: VariantClassNamePropType = 'normal';\n}\n"],"names":[],"mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,myVAAmyV;;MCsC9yV,gBAAgB,GAAA,MAAA;AAP7B,IAAA,WAAA,CAAA,OAAA,EAAA;;AASoB,QAAA,IAAM,CAAA,MAAA,GAAG,YAAY,EAAiC;AAkF1D,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AAO3B,QAAA,IAAU,CAAA,UAAA,GAAa,KAAK;AAU5B,QAAA,IAAO,CAAA,OAAA,GAAoB,KAAK;AAehC,QAAA,IAAa,CAAA,aAAA,GAA0B,QAAQ;AAqB/C,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAK5C,QAAA,IAAK,CAAA,KAAA,GAAwB,QAAQ;AAUrC,QAAA,IAAQ,CAAA,QAAA,GAA8B,QAAQ;AAC7D;AAhJO,IAAA,MAAM,WAAW,GAAA;;AACvB,QAAA,MAAK,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,CAAC,EAAE,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,EAAE,CAAA;;AAQ5B,IAAA,MAAM,WAAW,GAAA;;AACvB,QAAA,MAAK,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,CAAC,EAAE,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,EAAE,CAAA;;IAQ5B,MAAM,KAAK,GAAA;AASX,IAAA,MAAM,KAAK,CAAC,OAAyB;IAErC,MAAM,GAAA;AACZ,QAAA,QACC,CAAC,CAAA,qBAAqB,EACrB,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,EACzC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACe;;;;AAnCb,UAAA,CAAA;IADZ,aAAa,CAAC,QAAQ;CACe,EAAA,gBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,IAAA,CAAA;AASzB,UAAA,CAAA;IAHZ,aAAa,CAAC,QAAQ;CAGwC,EAAA,gBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,IAAA,CAAA;;;;;;;"}
+{"version":3,"file":"kol-popover-button.entry.js","sources":["src/components/popover-button/style.scss?tag=kol-popover-button&mode=default&encapsulation=shadow","src/components/popover-button/shadow.tsx"],"sourcesContent":["@use '../@shared/global' as *;\n@use '../@shared/button.mixin' as *;\n@use '../@shared/popover-button.mixin' as *;\n@use '../tooltip/style' as *;\n\n@layer kol-component {\n\t@include kol-button-styles('kol-button');\n\t@include kol-popover-button-styles;\n\n\t.kol-popover-button {\n\t\t&--open {\n\t\t\t.kol-button__tooltip {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t&--inline {\n\t\t\tdisplay: inline-block;\n\n\t\t\t.kol-button {\n\t\t\t\tmin-width: 0;\n\t\t\t\tmin-height: 1em;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\nimport { KolPopoverButtonWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAriaDescriptionPropType,\n\tButtonTypePropType,\n\tClickableElement,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tInlinePropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\nimport type { PopoverButtonProps } from '../../schema/components/popover-button';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * A button that toggles the visibility of a popover overlay containing arbitrary content.\n * The popover uses the native HTML Popover API for lightweight, non-modal overlays.\n *\n * @slot - The popover content (displayed when the button is clicked).\n * @slot expert - Custom label content for the button (when `_label` is `false`).\n */\n@Component({\n\ttag: 'kol-popover-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPopoverButton implements ClickableElement, FocusableElement, PopoverButtonProps {\n\t@Element() protected readonly host?: HTMLKolPopoverButtonElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolPopoverButtonWcElement>();\n\n\t/**\n\t * Hides the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tvoid this.ctaRef.el?.hidePopover();\n\t}\n\n\t/**\n\t * Shows the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async showPopover() {\n\t\tvoid this.ctaRef.el?.showPopover();\n\t}\n\n\t/**\n\t * Clicks the primary interactive element inside this component.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_inline={this._inline}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_popoverAlign={this._popoverAlign}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t<slot />\n\t\t\t</KolPopoverButtonWcTag>\n\t\t);\n\t}\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 the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\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 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 where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\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 */\n\t@Prop() public _variant?: VariantClassNamePropType = 'normal';\n}\n"],"names":[],"mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,y9VAAy9V;;MCsCp+V,gBAAgB,GAAA,MAAA;AAP7B,IAAA,WAAA,CAAA,OAAA,EAAA;;AASoB,QAAA,IAAM,CAAA,MAAA,GAAG,YAAY,EAAiC;AAkF1D,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AAO3B,QAAA,IAAU,CAAA,UAAA,GAAa,KAAK;AAU5B,QAAA,IAAO,CAAA,OAAA,GAAoB,KAAK;AAehC,QAAA,IAAa,CAAA,aAAA,GAA0B,QAAQ;AAqB/C,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAK5C,QAAA,IAAK,CAAA,KAAA,GAAwB,QAAQ;AAUrC,QAAA,IAAQ,CAAA,QAAA,GAA8B,QAAQ;AAC7D;AAhJO,IAAA,MAAM,WAAW,GAAA;;AACvB,QAAA,MAAK,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,CAAC,EAAE,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,EAAE,CAAA;;AAQ5B,IAAA,MAAM,WAAW,GAAA;;AACvB,QAAA,MAAK,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,CAAC,EAAE,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,EAAE,CAAA;;IAQ5B,MAAM,KAAK,GAAA;AASX,IAAA,MAAM,KAAK,CAAC,OAAyB;IAErC,MAAM,GAAA;AACZ,QAAA,QACC,CAAC,CAAA,qBAAqB,EACrB,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,EACzC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACe;;;;AAnCb,UAAA,CAAA;IADZ,aAAa,CAAC,QAAQ;CACe,EAAA,gBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,IAAA,CAAA;AASzB,UAAA,CAAA;IAHZ,aAAa,CAAC,QAAQ;CAGwC,EAAA,gBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,IAAA,CAAA;;;;;;;"}

package/dist/esm/kol-progress.entry.js

@@ -1,7 +1,7 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import { h, r as registerInstance, H as Host } from './index-btga56T2.js';
+import { h, r as registerInstance, H as Host } from './index-5bbrauFT.js';
 import { B as BaseWebComponent } from './base-web-component-BT6jbe_v.js';
 import { t as translate } from './i18n-BsXYYo8j.js';
 import './common-D5l8QiaY.js';
@@ -114,7 +114,7 @@ class ProgressController extends BaseController {
     }
 }
 
-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     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's\n     * rounding, dropping just below the required minimum.\n     */\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\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: white;\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    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@layer kol-component {\n  .kol-progress {\n    --color-bar: var(--kol-progress-color-bar, #0075ff);\n  }\n  .kol-progress__bar {\n    display: grid;\n    align-items: center;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    grid-template-columns: 1fr auto;\n  }\n  .kol-progress__bar-label {\n    grid-column-end: 2;\n    grid-area: LABEL;\n  }\n  .kol-progress__bar svg {\n    grid-area: BAR;\n  }\n  .kol-progress__bar-value {\n    grid-area: VALUE;\n    text-align: right;\n  }\n  .kol-progress__bar-unit {\n    grid-area: UNIT;\n  }\n  .kol-progress__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__bar-background {\n    fill: white;\n    stroke: white;\n  }\n  .kol-progress__bar-progress {\n    fill: var(--color-bar);\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__bar-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-progress__cycle {\n    display: grid;\n    align-content: center;\n    justify-items: center;\n    grid-template-areas: \"ALL\";\n    grid-template-columns: auto;\n  }\n  .kol-progress__cycle > * {\n    grid-area: ALL;\n  }\n  .kol-progress__cycle-text {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: x-small;\n    text-align: center;\n  }\n  .kol-progress__cycle-text * {\n    background-color: white;\n  }\n  .kol-progress__cycle-background {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__cycle-whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-progress {\n    transform: rotate(-90deg);\n    transform-origin: 50% 50%;\n    fill: transparent;\n    stroke: var(--color-bar);\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}";
+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     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's\n     * rounding, dropping just below the required minimum.\n     */\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\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    --kol-a11y-font-color: black;\n    --kol-a11y-background-color: white;\n    color: var(--kol-a11y-font-color);\n    background-color: var(--kol-a11y-background-color);\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    --kol-a11y-font-family: Verdana;\n    font-family: var(--kol-a11y-font-family);\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: white;\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    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@layer kol-component {\n  .kol-progress {\n    --color-bar: var(--kol-progress-color-bar, #0075ff);\n  }\n  .kol-progress__bar {\n    display: grid;\n    align-items: center;\n    grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n    grid-template-columns: 1fr auto;\n  }\n  .kol-progress__bar-label {\n    grid-column-end: 2;\n    grid-area: LABEL;\n  }\n  .kol-progress__bar svg {\n    grid-area: BAR;\n  }\n  .kol-progress__bar-value {\n    grid-area: VALUE;\n    text-align: right;\n  }\n  .kol-progress__bar-unit {\n    grid-area: UNIT;\n  }\n  .kol-progress__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__bar-background {\n    fill: white;\n    stroke: white;\n  }\n  .kol-progress__bar-progress {\n    fill: var(--color-bar);\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__bar-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-progress__cycle {\n    display: grid;\n    align-content: center;\n    justify-items: center;\n    grid-template-areas: \"ALL\";\n    grid-template-columns: auto;\n  }\n  .kol-progress__cycle > * {\n    grid-area: ALL;\n  }\n  .kol-progress__cycle-text {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: x-small;\n    text-align: center;\n  }\n  .kol-progress__cycle-text * {\n    background-color: white;\n  }\n  .kol-progress__cycle-background {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__cycle-whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-progress {\n    transform: rotate(-90deg);\n    transform-origin: 50% 50%;\n    fill: transparent;\n    stroke: var(--color-bar);\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}";
 
 const KolProgress = class extends BaseWebComponent {
     constructor(hostRef) {

package/dist/esm/kol-progress.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-progress.entry.js","sources":["src/internal/props/variant-progress.ts","src/internal/functional-components/progress/component.tsx","src/internal/functional-components/progress/api.tsx","src/internal/functional-components/progress/controller.ts","src/components/progress/style.scss?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Variant prop for progress display style\n *\n * Description:\n * Determines the visual presentation of a progress indicator. Both variants use the\n * WAI-ARIA progressbar role and convey the same semantic information to assistive technologies.\n *\n * Usage (according to W3C HTML specification and WAI-ARIA):\n * - \"bar\": Linear horizontal progress bar (default)\n * - \"cycle\": Circular/radial progress indicator\n * - Both variants must expose role=\"progressbar\" with aria-valuenow, aria-valuemin, and aria-valuemax\n * - The visual variant choice is presentation-only and does not affect the accessible semantics\n *\n * Accessibility:\n * - Progress state must be announced to screen readers (WCAG 4.1.3 Status Messages)\n * - The progress indicator must be perceivable through non-visual means (WCAG 1.1.1 Non-text Content)\n * - Animation in the cycle variant must respect prefers-reduced-motion (WCAG 2.3.3 Animation from Interactions)\n *\n * @see https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element\n * @see https://www.w3.org/TR/wai-aria-1.2/#progressbar\n * @see https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html\n */\nexport const progressVariantOptions = ['bar', 'cycle'] as const;\nexport type ProgressVariantType = (typeof progressVariantOptions)[number];\n\nexport type VariantProgressProp = SimpleProp<'variant', ProgressVariantType>;\nexport const variantProgressProp = createPropDefinition<VariantProgressProp>(\n\t'variant',\n\t'bar',\n\t(value: unknown) => {\n\t\tconst str = normalizeString(value);\n\t\tif (progressVariantOptions.includes(str as ProgressVariantType)) {\n\t\t\treturn str as ProgressVariantType;\n\t\t}\n\t\tthrow new Error(`Invalid progress variant: ${str}`);\n\t},\n\t() => true,\n);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport { translate } from '../../../i18n';\n\nimport type { ProgressVariantType } from '../../props';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { ProgressApi } from './api';\n\nconst FULL_CIRCLE = 342;\n\nconst CycleSvg: FC<{ max: number; value: number }> = ({ max, value }) => (\n\t<svg width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<circle class=\"kol-progress__cycle-background\" cx=\"60\" cy=\"60\" r=\"54.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"8\"></circle>\n\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t<circle\n\t\t\tclass=\"kol-progress__cycle-progress\"\n\t\t\tfill=\"currentColor\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstroke-linecap=\"round\"\n\t\t\tstroke-dasharray={`${Math.round((value / max) * FULL_CIRCLE)}px ${FULL_CIRCLE}px`}\n\t\t\tstroke-width=\"6\"\n\t\t\tcx=\"60\"\n\t\t\tcy=\"60\"\n\t\t\tr=\"54.5\"\n\t\t></circle>\n\t</svg>\n);\n\nconst BarSvg: FC<{ max: number; value: number }> = ({ max, value }) => {\n\tconst percentage = 100 * (value / max);\n\treturn (\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"12\" overflow=\"visible\">\n\t\t\t<rect class=\"kol-progress__bar-background\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100%\"></rect>\n\t\t\t<rect class=\"kol-progress__bar-border\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100%\"></rect>\n\t\t\t<rect\n\t\t\t\tclass=\"kol-progress__bar-progress\"\n\t\t\t\tx=\"3\"\n\t\t\t\ty=\"3\"\n\t\t\t\theight=\"7\"\n\t\t\t\trx=\"3.5\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-width=\"3\"\n\t\t\t\tstyle={{ width: `calc(${percentage}% - 4px)` }}\n\t\t\t></rect>\n\t\t</svg>\n\t);\n};\n\nconst createProgressSVG = (variant: ProgressVariantType, max: number, value: number) => {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <CycleSvg max={max} value={value} />;\n\t\tcase 'bar':\n\t\t\treturn <BarSvg max={max} value={value} />;\n\t\tdefault:\n\t\t\tthrow new Error(`Progress variant ${variant as string} not implemented.`);\n\t}\n};\n\nexport const ProgressFC: FC<FunctionalComponentProps<ProgressApi>> = (props) => {\n\tconst { label, max, unit, value, variant, liveValue } = props;\n\tconst isPercentage = unit === '%';\n\tconst liveProgressValue = isPercentage ? `${Math.round((liveValue / max) * 100)}` : liveValue;\n\tconst displayValue = isPercentage ? Math.round((value / max) * 100) : value;\n\tconst valueColumnWidth = `${`${(isPercentage ? 100 : max) + 1}`.length}ch`;\n\n\tconst liveValueText = isPercentage\n\t\t? translate('kol-live-value', { placeholders: { value: String(liveProgressValue), unit } })\n\t\t: translate('kol-live-value-bounded', { placeholders: { value: String(liveProgressValue), max: String(max), unit } });\n\n\treturn (\n\t\t<div class=\"kol-progress\">\n\t\t\t<div\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclass={{\n\t\t\t\t\t'kol-progress__cycle': variant === 'cycle',\n\t\t\t\t\t'kol-progress__bar': variant === 'bar',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{variant === 'bar' && label && <div class=\"kol-progress__bar-label\">{label}</div>}\n\t\t\t\t{createProgressSVG(variant, max, value)}\n\t\t\t\t{variant === 'cycle' && (\n\t\t\t\t\t<div class=\"kol-progress__cycle-text\">\n\t\t\t\t\t\t{label && <div class=\"kol-progress__cycle-label\">{label}</div>}\n\t\t\t\t\t\t<div class=\"kol-progress__cycle-value\">{`${displayValue} ${unit}`}</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{variant === 'bar' && (\n\t\t\t\t\t<div class=\"kol-progress__bar-value\" style={{ width: valueColumnWidth }}>\n\t\t\t\t\t\t{displayValue}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{variant === 'bar' && <div class=\"kol-progress__bar-unit\">{unit}</div>}\n\t\t\t</div>\n\n\t\t\t{/* https://css-tricks.com/html5-progress-element/ */}\n\t\t\t<progress class=\"visually-hidden\" aria-busy={value < max ? 'true' : 'false'} max={max} value={value}></progress>\n\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" class=\"visually-hidden\">\n\t\t\t\t{liveValueText}\n\t\t\t</span>\n\t\t</div>\n\t);\n};\n","import { clampedNumberValueProp, labelProp, maxProp, unitProp, variantProgressProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const progressPropsConfig = {\n\toptional: [labelProp, unitProp, variantProgressProp],\n\trequired: [maxProp, clampedNumberValueProp],\n} as const satisfies PropsConfigShape;\n\nexport type ProgressApi = ApiFromConfig<typeof progressPropsConfig, { States: { liveValue: number } }>;\n","import { clampedNumberValueProp, labelProp, maxProp, unitProp, variantProgressProp, type ProgressVariantType } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';\nimport type { ProgressApi } from './api';\nimport { progressPropsConfig } from './api';\n\nexport class ProgressController extends BaseController<ProgressApi> implements ControllerInterface<ProgressApi> {\n\tprivate interval?: ReturnType<typeof setInterval>;\n\n\tpublic constructor(stateAccess: StateAccess<ProgressApi>) {\n\t\tsuper(stateAccess, progressPropsConfig);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<ProgressApi>): void {\n\t\tconst { label, max, unit, value, variant } = props;\n\t\tthis.watchLabel(label);\n\t\tthis.watchMax(max);\n\t\tthis.watchUnit(unit);\n\t\tthis.watchValue(value);\n\t\tthis.watchVariant(variant);\n\n\t\tthis.setState('liveValue', this.getRenderProp('value'));\n\t\tthis.startLiveValueInterval();\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});\n\t}\n\n\tpublic watchMax(value?: number): void {\n\t\tmaxProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('max', v);\n\t\t\tthis.watchValue(this.getRawProp('value'));\n\t\t});\n\t}\n\n\tpublic watchUnit(value?: string): void {\n\t\tunitProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('unit', v);\n\t\t});\n\t}\n\n\tpublic watchValue(value?: number): void {\n\t\tthis.setRawProp('value', value);\n\t\tclampedNumberValueProp.apply(\n\t\t\tvalue,\n\t\t\t(v) => {\n\t\t\t\tthis.setRenderProp('value', v);\n\t\t\t},\n\t\t\t{ min: 0, max: this.getRenderProp('max') },\n\t\t);\n\t}\n\n\tpublic watchVariant(value?: ProgressVariantType): void {\n\t\tvariantProgressProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('variant', v);\n\t\t});\n\t}\n\n\t// a11y: says the value of the component every 5s\n\tprivate startLiveValueInterval(): void {\n\t\tthis.interval = setInterval(() => {\n\t\t\tconst value = this.getRenderProp('value');\n\t\t\tthis.setState('liveValue', value);\n\t\t}, 5000);\n\t}\n\n\tpublic destroy(): void {\n\t\tif (this.interval) {\n\t\t\tclearInterval(this.interval);\n\t\t\tthis.interval = undefined;\n\t\t}\n\t}\n}\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n\n@layer kol-component {\n\t.kol-progress {\n\t\t--color-bar: var(--kol-progress-color-bar, #0075ff);\n\n\t\t&__bar {\n\t\t\tdisplay: grid;\n\t\t\talign-items: center;\n\t\t\tgrid-template-areas:\n\t\t\t\t'LABEL LABEL LABEL'\n\t\t\t\t'BAR VALUE UNIT';\n\t\t\tgrid-template-columns: 1fr auto;\n\n\t\t\t&-label {\n\t\t\t\tgrid-column-end: 2;\n\t\t\t\tgrid-area: LABEL;\n\t\t\t}\n\n\t\t\tsvg {\n\t\t\t\tgrid-area: BAR;\n\t\t\t}\n\n\t\t\t&-value {\n\t\t\t\tgrid-area: VALUE;\n\t\t\t\ttext-align: right;\n\t\t\t}\n\n\t\t\t&-unit {\n\t\t\t\tgrid-area: UNIT;\n\t\t\t}\n\n\t\t\t&-border {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: black;\n\t\t\t}\n\n\t\t\t&-background {\n\t\t\t\tfill: white;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-progress {\n\t\t\t\tfill: var(--color-bar);\n\t\t\t\tstroke: transparent;\n\n\t\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__cycle {\n\t\t\tdisplay: grid;\n\t\t\talign-content: center;\n\t\t\tjustify-items: center;\n\t\t\tgrid-template-areas: 'ALL';\n\t\t\tgrid-template-columns: auto;\n\n\t\t\t> * {\n\t\t\t\tgrid-area: ALL;\n\t\t\t}\n\n\t\t\t&-text {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tjustify-content: center;\n\n\t\t\t\tfont-size: x-small;\n\t\t\t\ttext-align: center;\n\n\t\t\t\t* {\n\t\t\t\t\tbackground-color: white;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&-background {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-border {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: black;\n\t\t\t}\n\n\t\t\t&-whitespace {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-progress {\n\t\t\t\ttransform: rotate(-90deg);\n\t\t\t\ttransform-origin: 50% 50%;\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: var(--color-bar);\n\n\t\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { ProgressApi } from '../../internal/functional-components/progress/api';\nimport { ProgressFC } from '../../internal/functional-components/progress/component';\nimport { ProgressController } from '../../internal/functional-components/progress/controller';\nimport type { ProgressVariantType } from '../../internal/props';\n\n/**\n * The **Progress** component visualizes the completion status of a task or process. It supports both determinate (percentage-based) and indeterminate variants.\n */\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolProgress extends BaseWebComponent<ProgressApi> implements WebComponentInterface<ProgressApi> {\n\tprivate readonly ctrl = new ProgressController(this.stateAccess);\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 * Defines the maximum value of the element.\n\t */\n\t@Prop()\n\tpublic _max!: number;\n\n\t@Watch('_max')\n\tpublic watchMax(value?: number): void {\n\t\tthis.ctrl.watchMax(value);\n\t}\n\n\t/**\n\t * Defines the unit of the step values (not shown).\n\t */\n\t@Prop()\n\tpublic _unit?: string;\n\n\t@Watch('_unit')\n\tpublic watchUnit(value?: string): void {\n\t\tthis.ctrl.watchUnit(value);\n\t}\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop()\n\tpublic _value!: number;\n\n\t@Watch('_value')\n\tpublic watchValue(value?: number): void {\n\t\tthis.ctrl.watchValue(value);\n\t}\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop()\n\tpublic _variant?: ProgressVariantType;\n\n\t@Watch('_variant')\n\tpublic watchVariant(value?: ProgressVariantType): void {\n\t\tthis.ctrl.watchVariant(value);\n\t}\n\n\t/**\n\t * A11y: Aria live value\n\t */\n\t@State()\n\tpublic liveValue: number = 0;\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tlabel: this._label,\n\t\t\tmax: this._max,\n\t\t\tunit: this._unit,\n\t\t\tvalue: this._value,\n\t\t\tvariant: this._variant,\n\t\t});\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ctrl.destroy();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<ProgressFC\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tmax={this.ctrl.getRenderProp('max')}\n\t\t\t\t\tunit={this.ctrl.getRenderProp('unit')}\n\t\t\t\t\tvalue={this.ctrl.getRenderProp('value')}\n\t\t\t\t\tvariant={this.ctrl.getRenderProp('variant')}\n\t\t\t\t\tliveValue={this.liveValue}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kol-progress.entry.js","sources":["src/internal/props/variant-progress.ts","src/internal/functional-components/progress/component.tsx","src/internal/functional-components/progress/api.tsx","src/internal/functional-components/progress/controller.ts","src/components/progress/style.scss?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Variant prop for progress display style\n *\n * Description:\n * Determines the visual presentation of a progress indicator. Both variants use the\n * WAI-ARIA progressbar role and convey the same semantic information to assistive technologies.\n *\n * Usage (according to W3C HTML specification and WAI-ARIA):\n * - \"bar\": Linear horizontal progress bar (default)\n * - \"cycle\": Circular/radial progress indicator\n * - Both variants must expose role=\"progressbar\" with aria-valuenow, aria-valuemin, and aria-valuemax\n * - The visual variant choice is presentation-only and does not affect the accessible semantics\n *\n * Accessibility:\n * - Progress state must be announced to screen readers (WCAG 4.1.3 Status Messages)\n * - The progress indicator must be perceivable through non-visual means (WCAG 1.1.1 Non-text Content)\n * - Animation in the cycle variant must respect prefers-reduced-motion (WCAG 2.3.3 Animation from Interactions)\n *\n * @see https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element\n * @see https://www.w3.org/TR/wai-aria-1.2/#progressbar\n * @see https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html\n */\nexport const progressVariantOptions = ['bar', 'cycle'] as const;\nexport type ProgressVariantType = (typeof progressVariantOptions)[number];\n\nexport type VariantProgressProp = SimpleProp<'variant', ProgressVariantType>;\nexport const variantProgressProp = createPropDefinition<VariantProgressProp>(\n\t'variant',\n\t'bar',\n\t(value: unknown) => {\n\t\tconst str = normalizeString(value);\n\t\tif (progressVariantOptions.includes(str as ProgressVariantType)) {\n\t\t\treturn str as ProgressVariantType;\n\t\t}\n\t\tthrow new Error(`Invalid progress variant: ${str}`);\n\t},\n\t() => true,\n);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport { translate } from '../../../i18n';\n\nimport type { ProgressVariantType } from '../../props';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { ProgressApi } from './api';\n\nconst FULL_CIRCLE = 342;\n\nconst CycleSvg: FC<{ max: number; value: number }> = ({ max, value }) => (\n\t<svg width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<circle class=\"kol-progress__cycle-background\" cx=\"60\" cy=\"60\" r=\"54.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"8\"></circle>\n\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t<circle\n\t\t\tclass=\"kol-progress__cycle-progress\"\n\t\t\tfill=\"currentColor\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstroke-linecap=\"round\"\n\t\t\tstroke-dasharray={`${Math.round((value / max) * FULL_CIRCLE)}px ${FULL_CIRCLE}px`}\n\t\t\tstroke-width=\"6\"\n\t\t\tcx=\"60\"\n\t\t\tcy=\"60\"\n\t\t\tr=\"54.5\"\n\t\t></circle>\n\t</svg>\n);\n\nconst BarSvg: FC<{ max: number; value: number }> = ({ max, value }) => {\n\tconst percentage = 100 * (value / max);\n\treturn (\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"12\" overflow=\"visible\">\n\t\t\t<rect class=\"kol-progress__bar-background\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100%\"></rect>\n\t\t\t<rect class=\"kol-progress__bar-border\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100%\"></rect>\n\t\t\t<rect\n\t\t\t\tclass=\"kol-progress__bar-progress\"\n\t\t\t\tx=\"3\"\n\t\t\t\ty=\"3\"\n\t\t\t\theight=\"7\"\n\t\t\t\trx=\"3.5\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-width=\"3\"\n\t\t\t\tstyle={{ width: `calc(${percentage}% - 4px)` }}\n\t\t\t></rect>\n\t\t</svg>\n\t);\n};\n\nconst createProgressSVG = (variant: ProgressVariantType, max: number, value: number) => {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <CycleSvg max={max} value={value} />;\n\t\tcase 'bar':\n\t\t\treturn <BarSvg max={max} value={value} />;\n\t\tdefault:\n\t\t\tthrow new Error(`Progress variant ${variant as string} not implemented.`);\n\t}\n};\n\nexport const ProgressFC: FC<FunctionalComponentProps<ProgressApi>> = (props) => {\n\tconst { label, max, unit, value, variant, liveValue } = props;\n\tconst isPercentage = unit === '%';\n\tconst liveProgressValue = isPercentage ? `${Math.round((liveValue / max) * 100)}` : liveValue;\n\tconst displayValue = isPercentage ? Math.round((value / max) * 100) : value;\n\tconst valueColumnWidth = `${`${(isPercentage ? 100 : max) + 1}`.length}ch`;\n\n\tconst liveValueText = isPercentage\n\t\t? translate('kol-live-value', { placeholders: { value: String(liveProgressValue), unit } })\n\t\t: translate('kol-live-value-bounded', { placeholders: { value: String(liveProgressValue), max: String(max), unit } });\n\n\treturn (\n\t\t<div class=\"kol-progress\">\n\t\t\t<div\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclass={{\n\t\t\t\t\t'kol-progress__cycle': variant === 'cycle',\n\t\t\t\t\t'kol-progress__bar': variant === 'bar',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{variant === 'bar' && label && <div class=\"kol-progress__bar-label\">{label}</div>}\n\t\t\t\t{createProgressSVG(variant, max, value)}\n\t\t\t\t{variant === 'cycle' && (\n\t\t\t\t\t<div class=\"kol-progress__cycle-text\">\n\t\t\t\t\t\t{label && <div class=\"kol-progress__cycle-label\">{label}</div>}\n\t\t\t\t\t\t<div class=\"kol-progress__cycle-value\">{`${displayValue} ${unit}`}</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{variant === 'bar' && (\n\t\t\t\t\t<div class=\"kol-progress__bar-value\" style={{ width: valueColumnWidth }}>\n\t\t\t\t\t\t{displayValue}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{variant === 'bar' && <div class=\"kol-progress__bar-unit\">{unit}</div>}\n\t\t\t</div>\n\n\t\t\t{/* https://css-tricks.com/html5-progress-element/ */}\n\t\t\t<progress class=\"visually-hidden\" aria-busy={value < max ? 'true' : 'false'} max={max} value={value}></progress>\n\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" class=\"visually-hidden\">\n\t\t\t\t{liveValueText}\n\t\t\t</span>\n\t\t</div>\n\t);\n};\n","import { clampedNumberValueProp, labelProp, maxProp, unitProp, variantProgressProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const progressPropsConfig = {\n\toptional: [labelProp, unitProp, variantProgressProp],\n\trequired: [maxProp, clampedNumberValueProp],\n} as const satisfies PropsConfigShape;\n\nexport type ProgressApi = ApiFromConfig<typeof progressPropsConfig, { States: { liveValue: number } }>;\n","import { clampedNumberValueProp, labelProp, maxProp, unitProp, variantProgressProp, type ProgressVariantType } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';\nimport type { ProgressApi } from './api';\nimport { progressPropsConfig } from './api';\n\nexport class ProgressController extends BaseController<ProgressApi> implements ControllerInterface<ProgressApi> {\n\tprivate interval?: ReturnType<typeof setInterval>;\n\n\tpublic constructor(stateAccess: StateAccess<ProgressApi>) {\n\t\tsuper(stateAccess, progressPropsConfig);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<ProgressApi>): void {\n\t\tconst { label, max, unit, value, variant } = props;\n\t\tthis.watchLabel(label);\n\t\tthis.watchMax(max);\n\t\tthis.watchUnit(unit);\n\t\tthis.watchValue(value);\n\t\tthis.watchVariant(variant);\n\n\t\tthis.setState('liveValue', this.getRenderProp('value'));\n\t\tthis.startLiveValueInterval();\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});\n\t}\n\n\tpublic watchMax(value?: number): void {\n\t\tmaxProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('max', v);\n\t\t\tthis.watchValue(this.getRawProp('value'));\n\t\t});\n\t}\n\n\tpublic watchUnit(value?: string): void {\n\t\tunitProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('unit', v);\n\t\t});\n\t}\n\n\tpublic watchValue(value?: number): void {\n\t\tthis.setRawProp('value', value);\n\t\tclampedNumberValueProp.apply(\n\t\t\tvalue,\n\t\t\t(v) => {\n\t\t\t\tthis.setRenderProp('value', v);\n\t\t\t},\n\t\t\t{ min: 0, max: this.getRenderProp('max') },\n\t\t);\n\t}\n\n\tpublic watchVariant(value?: ProgressVariantType): void {\n\t\tvariantProgressProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('variant', v);\n\t\t});\n\t}\n\n\t// a11y: says the value of the component every 5s\n\tprivate startLiveValueInterval(): void {\n\t\tthis.interval = setInterval(() => {\n\t\t\tconst value = this.getRenderProp('value');\n\t\t\tthis.setState('liveValue', value);\n\t\t}, 5000);\n\t}\n\n\tpublic destroy(): void {\n\t\tif (this.interval) {\n\t\t\tclearInterval(this.interval);\n\t\t\tthis.interval = undefined;\n\t\t}\n\t}\n}\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n\n@layer kol-component {\n\t.kol-progress {\n\t\t--color-bar: var(--kol-progress-color-bar, #0075ff);\n\n\t\t&__bar {\n\t\t\tdisplay: grid;\n\t\t\talign-items: center;\n\t\t\tgrid-template-areas:\n\t\t\t\t'LABEL LABEL LABEL'\n\t\t\t\t'BAR VALUE UNIT';\n\t\t\tgrid-template-columns: 1fr auto;\n\n\t\t\t&-label {\n\t\t\t\tgrid-column-end: 2;\n\t\t\t\tgrid-area: LABEL;\n\t\t\t}\n\n\t\t\tsvg {\n\t\t\t\tgrid-area: BAR;\n\t\t\t}\n\n\t\t\t&-value {\n\t\t\t\tgrid-area: VALUE;\n\t\t\t\ttext-align: right;\n\t\t\t}\n\n\t\t\t&-unit {\n\t\t\t\tgrid-area: UNIT;\n\t\t\t}\n\n\t\t\t&-border {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: black;\n\t\t\t}\n\n\t\t\t&-background {\n\t\t\t\tfill: white;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-progress {\n\t\t\t\tfill: var(--color-bar);\n\t\t\t\tstroke: transparent;\n\n\t\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__cycle {\n\t\t\tdisplay: grid;\n\t\t\talign-content: center;\n\t\t\tjustify-items: center;\n\t\t\tgrid-template-areas: 'ALL';\n\t\t\tgrid-template-columns: auto;\n\n\t\t\t> * {\n\t\t\t\tgrid-area: ALL;\n\t\t\t}\n\n\t\t\t&-text {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tjustify-content: center;\n\n\t\t\t\tfont-size: x-small;\n\t\t\t\ttext-align: center;\n\n\t\t\t\t* {\n\t\t\t\t\tbackground-color: white;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&-background {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-border {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: black;\n\t\t\t}\n\n\t\t\t&-whitespace {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-progress {\n\t\t\t\ttransform: rotate(-90deg);\n\t\t\t\ttransform-origin: 50% 50%;\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: var(--color-bar);\n\n\t\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { ProgressApi } from '../../internal/functional-components/progress/api';\nimport { ProgressFC } from '../../internal/functional-components/progress/component';\nimport { ProgressController } from '../../internal/functional-components/progress/controller';\nimport type { ProgressVariantType } from '../../internal/props';\n\n/**\n * The **Progress** component visualizes the completion status of a task or process. It supports both determinate (percentage-based) and indeterminate variants.\n */\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolProgress extends BaseWebComponent<ProgressApi> implements WebComponentInterface<ProgressApi> {\n\tprivate readonly ctrl = new ProgressController(this.stateAccess);\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 * Defines the maximum value of the element.\n\t */\n\t@Prop()\n\tpublic _max!: number;\n\n\t@Watch('_max')\n\tpublic watchMax(value?: number): void {\n\t\tthis.ctrl.watchMax(value);\n\t}\n\n\t/**\n\t * Defines the unit of the step values (not shown).\n\t */\n\t@Prop()\n\tpublic _unit?: string;\n\n\t@Watch('_unit')\n\tpublic watchUnit(value?: string): void {\n\t\tthis.ctrl.watchUnit(value);\n\t}\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop()\n\tpublic _value!: number;\n\n\t@Watch('_value')\n\tpublic watchValue(value?: number): void {\n\t\tthis.ctrl.watchValue(value);\n\t}\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop()\n\tpublic _variant?: ProgressVariantType;\n\n\t@Watch('_variant')\n\tpublic watchVariant(value?: ProgressVariantType): void {\n\t\tthis.ctrl.watchVariant(value);\n\t}\n\n\t/**\n\t * A11y: Aria live value\n\t */\n\t@State()\n\tpublic liveValue: number = 0;\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tlabel: this._label,\n\t\t\tmax: this._max,\n\t\t\tunit: this._unit,\n\t\t\tvalue: this._value,\n\t\t\tvariant: this._variant,\n\t\t});\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ctrl.destroy();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<ProgressFC\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tmax={this.ctrl.getRenderProp('max')}\n\t\t\t\t\tunit={this.ctrl.getRenderProp('unit')}\n\t\t\t\t\tvalue={this.ctrl.getRenderProp('value')}\n\t\t\t\t\tvariant={this.ctrl.getRenderProp('variant')}\n\t\t\t\t\tliveValue={this.liveValue}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}