@public-ui/components 4.0.0-alpha.9 → 4.0.0-beta.1

package/dist/components/kol-tree-item-wc.js.map

@@ -1 +1 @@
-{"file":"kol-tree-item-wc.js","mappings":"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","names":["KolTreeItemWc","__stencil_proxyCustomElement"],"sources":["src/schema/props/active.ts","src/components/tree-item/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchBooleanOptions } from '../utils';\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type ActivePropType = boolean;\n\n/**\n * Defines whether something is active.\n */\nexport type PropActive = {\n\tactive: ActivePropType;\n};\n\n/* validator */\nexport const validateActive = (component: Generic.Element.Component, value: ActivePropType, options?: WatchBooleanOptions): void => {\n\twatchBoolean(component, '_active', value, options);\n};\n","import { Component, Element, h, Host, type JSX, Method, Prop, State, Watch } from '@stencil/core';\n\nimport clsx from 'clsx';\nimport { KolIconTag, KolLinkWcTag, KolTreeTag } from '../../core/component-names';\nimport type { ActivePropType, HrefPropType, LabelPropType, OpenPropType, TreeItemAPI, TreeItemStates } from '../../schema';\nimport { validateActive, validateHref, validateLabel, validateOpen } from '../../schema';\nimport { nonce } from '../../utils/dev.utils';\n\n@Component({\n\ttag: `kol-tree-item-wc`,\n\tshadow: false,\n})\nexport class KolTreeItemWc implements TreeItemAPI {\n\tprivate linkElement!: HTMLKolLinkWcElement;\n\tprivate groupId = `tree-group-${nonce()}`;\n\n\t@State() private level?: number;\n\t@Element() host!: HTMLElement;\n\n\tpublic render(): JSX.Element {\n\t\tconst { _href, _active, _hasChildren, _open, _label } = this.state;\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)}>\n\t\t\t\t<li\n\t\t\t\t\tclass=\"kol-tree-item\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t'--level': `${this.level}`,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\tclass={clsx('kol-tree-item__link', {\n\t\t\t\t\t\t\t'kol-tree-item__link--first-level': this.level === 0,\n\t\t\t\t\t\t\t'kol-tree-item__link--active': _active,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t_href={_href}\n\t\t\t\t\t\t_label=\"\"\n\t\t\t\t\t\t_role=\"treeitem\"\n\t\t\t\t\t\t_tabIndex={_active ? 0 : -1}\n\t\t\t\t\t\t_ariaExpanded={_hasChildren ? _open : undefined}\n\t\t\t\t\t\t_ariaOwns={_hasChildren ? this.groupId : undefined}\n\t\t\t\t\t\tref={(element?: HTMLKolLinkWcElement) => (this.linkElement = element!)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"kol-tree-item__link-inner\" slot=\"expert\">\n\t\t\t\t\t\t\t{_hasChildren ? (\n\t\t\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"kol-tree-item__toggle-button\"\n\t\t\t\t\t\t\t\t\tonClick={(event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event))}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<KolIconTag\n\t\t\t\t\t\t\t\t\t\tclass=\"kol-tree-item__toggle-button-icon\"\n\t\t\t\t\t\t\t\t\t\t_icons={`codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`}\n\t\t\t\t\t\t\t\t\t\t_label={'' /* Label deliberately left empty */}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"kol-tree-item__toggle-button-placeholder\"></span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class=\"kol-tree-item__text\">{_label}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</KolLinkWcTag>\n\t\t\t\t\t<ul class=\"kol-tree-item__children\" hidden={!_hasChildren || !_open} role=\"group\" id={this.groupId}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</li>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@State() public state: TreeItemStates = {\n\t\t_active: false,\n\t\t_hasChildren: false,\n\t\t_href: '',\n\t\t_label: '',\n\t\t_open: false,\n\t};\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\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() _label!: LabelPropType;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t@Watch('_active') validateActive(value?: ActivePropType): void {\n\t\tvalidateActive(this, value || false);\n\t}\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_open') validateOpen(value?: OpenPropType): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\t@Watch('_href') validateHref(value?: HrefPropType): void {\n\t\tvalidateHref(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateActive(this._active);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateHref(this._href);\n\n\t\tthis.checkForChildren();\n\t\tthis.determineTreeItemDepth();\n\t}\n\n\tprivate determineTreeItemDepth() {\n\t\tlet level = 0;\n\t\tlet traverseItem: HTMLElement | null = (this.host.parentNode as unknown as ShadowRoot).host.parentNode as HTMLElement;\n\t\twhile (traverseItem !== null && traverseItem.tagName.toLowerCase() !== KolTreeTag && traverseItem !== document.body) {\n\t\t\ttraverseItem = traverseItem.parentElement;\n\t\t\tlevel += 1;\n\t\t}\n\t\tthis.level = level;\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.checkForChildren();\n\t}\n\n\tprivate checkForChildren() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_hasChildren: Boolean(this.host.querySelector('slot')?.assignedElements?.().length),\n\t\t};\n\t}\n\n\t/**\n\t * Focuses the link element.\n\t */\n\t@Method() async focusLink() {\n\t\tawait this.linkElement.kolFocus();\n\t}\n\n\tprivate async handleExpandClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tawait this.linkElement.kolFocus();\n\t\tawait this.expand();\n\t}\n\n\t/**\n\t * Expands the tree item.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async expand() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: true,\n\t\t\t};\n\t\t}\n\t}\n\n\tprivate async handleCollapseClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tthis.linkElement.focus();\n\t\tawait this.collapse();\n\t}\n\n\t/**\n\t * Collapses the tree item.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async collapse() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: false,\n\t\t\t};\n\t\t}\n\t}\n\n\t/**\n\t * Returns whether the tree item is expanded.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async isOpen() {\n\t\treturn this.state._open ?? false;\n\t}\n}\n"],"version":3}
+{"file":"kol-tree-item-wc.js","mappings":"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","names":["KolTreeItemWc","__stencil_proxyCustomElement"],"sources":["src/schema/props/active.ts","src/components/tree-item/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchBooleanOptions } from '../utils';\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type ActivePropType = boolean;\n\n/**\n * Defines whether something is active.\n */\nexport type PropActive = {\n\tactive: ActivePropType;\n};\n\n/* validator */\nexport const validateActive = (component: Generic.Element.Component, value: ActivePropType, options?: WatchBooleanOptions): void => {\n\twatchBoolean(component, '_active', value, options);\n};\n","import { Component, Element, h, Host, type JSX, Method, Prop, State, Watch } from '@stencil/core';\n\nimport clsx from 'clsx';\nimport { KolIconTag, KolLinkWcTag, KolTreeTag } from '../../core/component-names';\nimport type { ActivePropType, HrefPropType, LabelPropType, OpenPropType, TreeItemAPI, TreeItemStates } from '../../schema';\nimport { validateActive, validateHref, validateLabel, validateOpen } from '../../schema';\nimport { nonce } from '../../utils/dev.utils';\n\n@Component({\n\ttag: `kol-tree-item-wc`,\n\tshadow: false,\n})\nexport class KolTreeItemWc implements TreeItemAPI {\n\tprivate linkElement?: HTMLKolLinkWcElement;\n\tprivate groupId = `tree-group-${nonce()}`;\n\n\t@State() private level?: number;\n\t@Element() host!: HTMLElement;\n\n\tpublic render(): JSX.Element {\n\t\tconst { _href, _active, _hasChildren, _open, _label } = this.state;\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)}>\n\t\t\t\t<li\n\t\t\t\t\tclass=\"kol-tree-item\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t'--level': `${this.level}`,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\tclass={clsx('kol-tree-item__link', {\n\t\t\t\t\t\t\t'kol-tree-item__link--first-level': this.level === 0,\n\t\t\t\t\t\t\t'kol-tree-item__link--active': _active,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t_href={_href}\n\t\t\t\t\t\t_label=\"\"\n\t\t\t\t\t\t_role=\"treeitem\"\n\t\t\t\t\t\t_tabIndex={_active ? 0 : -1}\n\t\t\t\t\t\t_ariaExpanded={_hasChildren ? _open : undefined}\n\t\t\t\t\t\t_ariaOwns={_hasChildren ? this.groupId : undefined}\n\t\t\t\t\t\tref={(element?: HTMLKolLinkWcElement) => (this.linkElement = element!)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"kol-tree-item__link-inner\" slot=\"expert\">\n\t\t\t\t\t\t\t{_hasChildren ? (\n\t\t\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"kol-tree-item__toggle-button\"\n\t\t\t\t\t\t\t\t\tonClick={(event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event))}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<KolIconTag\n\t\t\t\t\t\t\t\t\t\tclass=\"kol-tree-item__toggle-button-icon\"\n\t\t\t\t\t\t\t\t\t\t_icons={`kolicon kolicon-${_open ? 'chevron-down' : 'chevron-right'}`}\n\t\t\t\t\t\t\t\t\t\t_label={'' /* Label deliberately left empty */}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"kol-tree-item__toggle-button-placeholder\"></span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class=\"kol-tree-item__text\">{_label}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</KolLinkWcTag>\n\t\t\t\t\t<ul class=\"kol-tree-item__children\" hidden={!_hasChildren || !_open} role=\"group\" id={this.groupId}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</li>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@State() public state: TreeItemStates = {\n\t\t_active: false,\n\t\t_hasChildren: false,\n\t\t_href: '',\n\t\t_label: '',\n\t\t_open: false,\n\t};\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\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() _label!: LabelPropType;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t@Watch('_active') validateActive(value?: ActivePropType): void {\n\t\tvalidateActive(this, value || false);\n\t}\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_open') validateOpen(value?: OpenPropType): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\t@Watch('_href') validateHref(value?: HrefPropType): void {\n\t\tvalidateHref(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateActive(this._active);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateHref(this._href);\n\n\t\tthis.checkForChildren();\n\t\tthis.determineTreeItemDepth();\n\t}\n\n\tprivate determineTreeItemDepth() {\n\t\tlet level = 0;\n\t\tlet traverseItem: HTMLElement | null = (this.host.parentNode as unknown as ShadowRoot).host.parentNode as HTMLElement;\n\t\twhile (traverseItem !== null && traverseItem.tagName.toLowerCase() !== KolTreeTag && traverseItem !== document.body) {\n\t\t\ttraverseItem = traverseItem.parentElement;\n\t\t\tlevel += 1;\n\t\t}\n\t\tthis.level = level;\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.checkForChildren();\n\t}\n\n\tprivate checkForChildren() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_hasChildren: Boolean(this.host.querySelector('slot')?.assignedElements?.().length),\n\t\t};\n\t}\n\n\t/**\n\t * Focuses the link element.\n\t */\n\t@Method() async focus() {\n\t\treturn Promise.resolve(this.linkElement?.focus());\n\t}\n\n\tprivate async handleExpandClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tawait this.linkElement?.focus();\n\t\tawait this.expand();\n\t}\n\n\t/**\n\t * Expands the tree item.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async expand() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: true,\n\t\t\t};\n\t\t}\n\t}\n\n\tprivate async handleCollapseClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tawait this.linkElement?.focus();\n\t\tawait this.collapse();\n\t}\n\n\t/**\n\t * Collapses the tree item.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async collapse() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: false,\n\t\t\t};\n\t\t}\n\t}\n\n\t/**\n\t * Returns whether the tree item is expanded.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async isOpen() {\n\t\treturn this.state._open ?? false;\n\t}\n}\n"],"version":3}

package/dist/components/kol-tree-item.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{v as KolTreeItemWcTag}from"./component-names.js";const defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tree-item {\n    --indentation: var(--tree-item-indentation, calc(10 * 1rem / var(--kolibri-root-font-size, 16)));\n  }\n  .kol-tree-item__link .kol-link {\n    display: inline-flex;\n    min-height: var(--a11y-min-size);\n    padding-right: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-left: max(var(--indentation) * var(--level) + 8 * 1rem / var(--kolibri-root-font-size, 16), 8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    text-decoration: none;\n  }\n  .kol-tree-item__link--first-level .kol-link {\n    padding-left: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree-item__link-inner {\n    display: flex;\n    align-items: center;\n  }\n  .kol-tree-item__children {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree-item .kol-span {\n    place-items: unset;\n  }\n  .kol-tree-item__toggle-button, .kol-tree-item__toggle-button-placeholder {\n    display: inline-flex;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-tree-item__text {\n    text-decoration: underline;\n  }\n}",KolTreeItem$1=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}async focusLink(){this.element&&await this.element.focusLink()}async expand(){this.element&&await this.element.expand()}async collapse(){this.element&&await this.element.collapse()}async isOpen(){var e,n;return null!==(n=await(null===(e=this.element)||void 0===e?void 0:e.isOpen()))&&void 0!==n&&n}render(){return h(KolTreeItemWcTag,{key:"86e4e84ea04f0fa50c0b2436577917e376fa5f38",_active:this._active,_label:this._label,_open:this._open,_href:this._href,ref:e=>this.element=e},h("slot",{key:"c0d67156ca3e9036cd0d36aba3f1a82a7d842089"}))}static get style(){return{default:defaultStyleCss}}},[289,"kol-tree-item",{_active:[4],_label:[1],_open:[4],_href:[1],focusLink:[64],expand:[64],collapse:[64],isOpen:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tree-item"].forEach(e=>{if("kol-tree-item"===e)customElements.get(e)||customElements.define(e,KolTreeItem$1)})}const KolTreeItem=KolTreeItem$1,defineCustomElement=defineCustomElement$1;export{KolTreeItem,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{w as KolTreeItemWcTag}from"./component-names.js";const defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tree-item {\n    --indentation: var(--tree-item-indentation, calc(10 * 1rem / var(--kolibri-root-font-size, 16)));\n  }\n  .kol-tree-item__link .kol-link {\n    display: inline-flex;\n    min-height: var(--a11y-min-size);\n    padding-right: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-left: max(var(--indentation) * var(--level) + 8 * 1rem / var(--kolibri-root-font-size, 16), 8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    text-decoration: none;\n  }\n  .kol-tree-item__link--first-level .kol-link {\n    padding-left: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree-item__link-inner {\n    display: flex;\n    align-items: center;\n  }\n  .kol-tree-item__children {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree-item .kol-span {\n    place-items: unset;\n  }\n  .kol-tree-item__toggle-button, .kol-tree-item__toggle-button-placeholder {\n    display: inline-flex;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-tree-item__text {\n    text-decoration: underline;\n  }\n}",KolTreeItem$1=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}async focus(){var e;return Promise.resolve(null===(e=this.element)||void 0===e?void 0:e.focus())}async expand(){var e;return Promise.resolve(null===(e=this.element)||void 0===e?void 0:e.expand())}async collapse(){var e;return Promise.resolve(null===(e=this.element)||void 0===e?void 0:e.collapse())}async isOpen(){var e,n;return null!==(n=await(null===(e=this.element)||void 0===e?void 0:e.isOpen()))&&void 0!==n&&n}render(){return h(KolTreeItemWcTag,{key:"92fa2ccaf67dfa24531f8fca4c802c2bbfc03916",_active:this._active,_label:this._label,_open:this._open,_href:this._href,ref:e=>this.element=e},h("slot",{key:"164f21da0af88f1021068e5e310d1487707f7059"}))}static get style(){return{default:defaultStyleCss}}},[289,"kol-tree-item",{_active:[4],_label:[1],_open:[4],_href:[1],focus:[64],expand:[64],collapse:[64],isOpen:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tree-item"].forEach(e=>{if("kol-tree-item"===e)customElements.get(e)||customElements.define(e,KolTreeItem$1)})}const KolTreeItem=KolTreeItem$1,defineCustomElement=defineCustomElement$1;export{KolTreeItem,defineCustomElement};

package/dist/components/kol-tree-item.js.map

@@ -1 +1 @@
-{"file":"kol-tree-item.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,w3MAAw3M;;MCYn4MA,aAAW,GAAAC,kBAAA,CAAA,MAAA,WAAA,SAAA,WAAA,CAAA;;;;;;;;AA0Bb,IAAA,MAAM,SAAS,GAAA;AACxB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,MAAM,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;;;AAOtB,IAAA,MAAM,MAAM,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,MAAM,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;;;AAOnB,IAAA,MAAM,QAAQ,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,MAAM,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;;;AAOrB,IAAA,MAAM,MAAM,GAAA;;QACrB,OAAO,CAAA,EAAA,IAAC,OAAM,MAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,EAAE,CAAA,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,KAAK;;IAGxC,MAAM,GAAA;AACZ,QAAA,QACC,CAAC,CAAA,gBAAgB,qDAChB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,CAAC,OAAkC,MAAM,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,EAAA,EAErE,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolTreeItem","__stencil_proxyCustomElement"],"sources":["src/components/tree-item/style.scss?tag=kol-tree-item&mode=default&encapsulation=shadow","src/components/tree-item/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t$base-horizontal-padding: to-rem(8);\n\n\t.kol-tree-item {\n\t\t--indentation: var(--tree-item-indentation, #{to-rem(10)}); // Set `--tree-item-indentation` in themes to control padding\n\t\t$root: &;\n\n\t\t&__link {\n\t\t\t.kol-link {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmin-height: var(--a11y-min-size);\n\t\t\t\tpadding-right: to-rem(6);\n\t\t\t\tpadding-left: max(calc((var(--indentation) * var(--level)) + $base-horizontal-padding), $base-horizontal-padding);\n\t\t\t\talign-items: center;\n\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\n\t\t\t&--first-level .kol-link {\n\t\t\t\tpadding-left: to-rem(6);\n\t\t\t}\n\t\t}\n\n\t\t&__link-inner {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&__children {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t.kol-span {\n\t\t\tplace-items: unset; // unset 'center' style from global layer\n\t\t}\n\n\t\t&__toggle-button,\n\t\t&__toggle-button-placeholder {\n\t\t\tdisplay: inline-flex;\n\t\t\twidth: var(--a11y-min-size);\n\t\t\theight: var(--a11y-min-size);\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t}\n\n\t\t&__text {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n}\n","import { Component, h, type JSX, Method, Prop } from '@stencil/core';\n\nimport { KolTreeItemWcTag } from '../../core/component-names';\nimport type { HrefPropType, LabelPropType, OpenPropType, TreeItemProps } from '../../schema';\n\n@Component({\n\ttag: 'kol-tree-item', // keep in sync with `const TREE_ITEM_TAG_NAME`\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTreeItem implements TreeItemProps {\n\tprivate element?: HTMLKolTreeItemWcElement;\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\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() _label!: LabelPropType;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t/**\n\t * Focuses the link element.\n\t */\n\t@Method() async focusLink() {\n\t\tif (this.element) {\n\t\t\tawait this.element.focusLink();\n\t\t}\n\t}\n\n\t/**\n\t * Expands the tree item.\n\t */\n\t@Method() async expand() {\n\t\tif (this.element) {\n\t\t\tawait this.element.expand();\n\t\t}\n\t}\n\n\t/**\n\t * Collapses the tree item.\n\t */\n\t@Method() async collapse() {\n\t\tif (this.element) {\n\t\t\tawait this.element.collapse();\n\t\t}\n\t}\n\n\t/**\n\t * Returns whether the tree item is expanded.\n\t */\n\t@Method() async isOpen() {\n\t\treturn (await this.element?.isOpen()) ?? false;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeItemWcTag\n\t\t\t\t_active={this._active}\n\t\t\t\t_label={this._label}\n\t\t\t\t_open={this._open}\n\t\t\t\t_href={this._href}\n\t\t\t\tref={(element?: HTMLKolTreeItemWcElement) => (this.element = element)}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</KolTreeItemWcTag>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-tree-item.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,w3MAAw3M;;MCYn4MA,aAAW,GAAAC,kBAAA,CAAA,MAAA,WAAA,SAAA,WAAA,CAAA;;;;;;;;AA0Bb,IAAA,MAAM,KAAK,GAAA;;AACpB,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE,CAAC;;AAMpC,IAAA,MAAM,MAAM,GAAA;;AACrB,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,MAAM,EAAE,CAAC;;AAMrC,IAAA,MAAM,QAAQ,GAAA;;AACvB,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE,CAAC;;AAMvC,IAAA,MAAM,MAAM,GAAA;;QACrB,OAAO,CAAA,EAAA,IAAC,OAAM,MAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,EAAE,CAAA,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,KAAK;;IAGxC,MAAM,GAAA;AACZ,QAAA,QACC,CAAC,CAAA,gBAAgB,qDAChB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,CAAC,OAAkC,MAAM,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,EAAA,EAErE,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolTreeItem","__stencil_proxyCustomElement"],"sources":["src/components/tree-item/style.scss?tag=kol-tree-item&mode=default&encapsulation=shadow","src/components/tree-item/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t$base-horizontal-padding: to-rem(8);\n\n\t.kol-tree-item {\n\t\t--indentation: var(--tree-item-indentation, #{to-rem(10)}); // Set `--tree-item-indentation` in themes to control padding\n\t\t$root: &;\n\n\t\t&__link {\n\t\t\t.kol-link {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmin-height: var(--a11y-min-size);\n\t\t\t\tpadding-right: to-rem(6);\n\t\t\t\tpadding-left: max(calc((var(--indentation) * var(--level)) + $base-horizontal-padding), $base-horizontal-padding);\n\t\t\t\talign-items: center;\n\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\n\t\t\t&--first-level .kol-link {\n\t\t\t\tpadding-left: to-rem(6);\n\t\t\t}\n\t\t}\n\n\t\t&__link-inner {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&__children {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t.kol-span {\n\t\t\tplace-items: unset; // unset 'center' style from global layer\n\t\t}\n\n\t\t&__toggle-button,\n\t\t&__toggle-button-placeholder {\n\t\t\tdisplay: inline-flex;\n\t\t\twidth: var(--a11y-min-size);\n\t\t\theight: var(--a11y-min-size);\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t}\n\n\t\t&__text {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n}\n","import { Component, h, type JSX, Method, Prop } from '@stencil/core';\n\nimport { KolTreeItemWcTag } from '../../core/component-names';\nimport type { HrefPropType, LabelPropType, OpenPropType, TreeItemProps } from '../../schema';\n\n@Component({\n\ttag: 'kol-tree-item', // keep in sync with `const TREE_ITEM_TAG_NAME`\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTreeItem implements TreeItemProps {\n\tprivate element?: HTMLKolTreeItemWcElement;\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\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() _label!: LabelPropType;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t/**\n\t * Focuses the link element.\n\t */\n\t@Method() async focus() {\n\t\treturn Promise.resolve(this.element?.focus());\n\t}\n\n\t/**\n\t * Expands the tree item.\n\t */\n\t@Method() async expand() {\n\t\treturn Promise.resolve(this.element?.expand());\n\t}\n\n\t/**\n\t * Collapses the tree item.\n\t */\n\t@Method() async collapse() {\n\t\treturn Promise.resolve(this.element?.collapse());\n\t}\n\n\t/**\n\t * Returns whether the tree item is expanded.\n\t */\n\t@Method() async isOpen() {\n\t\treturn (await this.element?.isOpen()) ?? false;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeItemWcTag\n\t\t\t\t_active={this._active}\n\t\t\t\t_label={this._label}\n\t\t\t\t_open={this._open}\n\t\t\t\t_href={this._href}\n\t\t\t\tref={(element?: HTMLKolTreeItemWcElement) => (this.element = element)}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</KolTreeItemWcTag>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/kol-tree-wc.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{x as KolTreeItemTag,w as KolTreeTag}from"./component-names.js";import"./common.js";import{v as validateLabel}from"./label.js";const KolTreeWc$1=proxyCustomElement(class e extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.state={_label:""}}validateLabel(e){validateLabel(this,e)}render(){return h(Host,{key:"39caf084d89cd53900a3467ed61bb3768ab0cf0c",onSlotchange:this.handleSlotchange.bind(this)},h("nav",{key:"d27027c36afd0d6ed1aa9ad455f6e63ab89d9b4d",class:"kol-tree","aria-label":this.state._label},h("ul",{key:"42b9f0647c3ba8ac6035ea7e12d4fa7fa299eb52",class:"kol-tree__treeview-navigation",role:"tree","aria-label":this.state._label},h("slot",{key:"d9fcc22c79d74067b0a979272e18035ab079c016"}))))}static isTreeItem(e){return(null==e?void 0:e.tagName)===KolTreeItemTag.toUpperCase()}componentWillLoad(){this.validateLabel(this._label),this.handleTreeChange(),this.observeChildListMutations()}disconnectedCallback(){var e;null===(e=this.observer)||void 0===e||e.disconnect()}observeChildListMutations(){this.observer=new MutationObserver(this.handleTreeChange.bind(this)),this.observeTopLevelItems()}handleSlotchange(){this.observeTopLevelItems(),this.handleTreeChange()}observeTopLevelItems(){var e;null===(e=this.getTopLevelTreeItems())||void 0===e||e.forEach(e=>{var t;null===(t=this.observer)||void 0===t||t.observe(e,{childList:!0,subtree:!0})})}getTopLevelTreeItems(){var t,a,l;return null===(l=null===(a=null===(t=this.host.querySelector("slot"))||void 0===t?void 0:t.assignedNodes)||void 0===a?void 0:a.call(t))||void 0===l?void 0:l.filter(e.isTreeItem)}handleTreeChange(){this.treeItemElements=this.getTreeItemElements(),this.ensureActiveItemVisibility()}getTreeItemElements(){var e;return null===(e=this.getTopLevelTreeItems())||void 0===e?void 0:e.reduce((e,t)=>{const a=t.querySelectorAll(KolTreeItemTag);return[...e,t,...a]},[])}async getOpenTreeItemElements(){if(!this.treeItemElements)return;const t=async a=>!e.isTreeItem(a.parentElement)||await a.parentElement.isOpen()&&await t(a.parentElement);return(await Promise.all(this.treeItemElements.map(async e=>({value:e,include:await t(e)})))).filter(e=>e.include).map(e=>e.value)}async handleKeyDown(e){var t,a,l,i,n,s,o,r,c;const d=await this.getOpenTreeItemElements(),u=null===(t=document.activeElement)||void 0===t?void 0:t.closest(KolTreeItemTag),v=e.metaKey||e.altKey||e.ctrlKey||e.shiftKey;if(!d||!u)return;const m=null==d?void 0:d.findIndex(e=>e===u);switch(e.key){case"ArrowDown":await(null===(a=d[m+1])||void 0===a?void 0:a.focusLink()),e.preventDefault();break;case"ArrowUp":await(null===(l=d[m-1])||void 0===l?void 0:l.focusLink()),e.preventDefault();break;case"Right":case"ArrowRight":e.preventDefault(),await u.isOpen()?await(null===(i=d[m+1])||void 0===i?void 0:i.focusLink()):await u.expand();break;case"Left":case"ArrowLeft":if(e.preventDefault(),await u.isOpen())await u.collapse();else{const e=d.findIndex(e=>e===u.parentElement);-1!==e&&await(null===(n=d[e])||void 0===n?void 0:n.focusLink())}break;case"Home":await(null===(s=d[0])||void 0===s?void 0:s.focusLink()),e.preventDefault();break;case"End":await(null===(o=d[d.length-1])||void 0===o?void 0:o.focusLink()),e.preventDefault();break;case null===(r=e.key.match(/^[a-zA-Z0-9]$/))||void 0===r?void 0:r.input:if(!v){const t=e.key.toLowerCase(),a=d.indexOf(u)+1,l=d.concat(d),i=l.slice(a,a+d.length).findIndex(e=>{var a;return null===(a=e.getAttribute("_label"))||void 0===a?void 0:a.trim().toLowerCase().startsWith(t)});-1!==i&&(await l[a+i].focusLink(),e.preventDefault())}break;case"*":{const e=null===(c=u.parentElement)||void 0===c?void 0:c.querySelectorAll(KolTreeItemTag);null==e||e.forEach(e=>{e.expand()});break}}}async handleFocusOut(e){e.relatedTarget&&!e.relatedTarget.closest(KolTreeTag)&&await this.ensureActiveItemVisibility()}async ensureActiveItemVisibility(){const t=a=>{e.isTreeItem(a.parentElement)&&(a.parentElement.expand(),t(a.parentElement))},a=(()=>{var t,a,l,i;const n=null!==(i=null===(l=null===(a=null===(t=this.host.querySelector("slot"))||void 0===t?void 0:t.assignedNodes)||void 0===a?void 0:a.call(t))||void 0===l?void 0:l.filter(e.isTreeItem))&&void 0!==i?i:[];for(const e of n){if(e._active)return e;const t=e.querySelector(`${KolTreeItemTag}[_active="true"]`);if(t&&t._active)return t}})();a&&t(a)}get host(){return this}static get watchers(){return{_label:["validateLabel"]}}},[260,"kol-tree-wc",{_label:[1],state:[32]},[[0,"keydown","handleKeyDown"],[0,"focusout","handleFocusOut"]],{_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tree-wc"].forEach(e=>{if("kol-tree-wc"===e)customElements.get(e)||customElements.define(e,KolTreeWc$1)})}const KolTreeWc=KolTreeWc$1,defineCustomElement=defineCustomElement$1;export{KolTreeWc,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{y as KolTreeItemTag,x as KolTreeTag}from"./component-names.js";import"./common.js";import{v as validateLabel}from"./label.js";const KolTreeWc$1=proxyCustomElement(class e extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.state={_label:""}}validateLabel(e){validateLabel(this,e)}render(){return h(Host,{key:"6e1fc1f0d6757fec0658d28ff54fe73a58b60fa9",onSlotchange:this.handleSlotchange.bind(this)},h("nav",{key:"dfc733503c12e36fc8e6fc958273555f4e698237",class:"kol-tree","aria-label":this.state._label},h("ul",{key:"9c68ce61a9bfbe5ade976515eaa43e2d9fbf380d",class:"kol-tree__treeview-navigation",role:"tree","aria-label":this.state._label},h("slot",{key:"db660a5bc5cb5544f2c35e9e14f2a61d6e06ac69"}))))}static isTreeItem(e){return(null==e?void 0:e.tagName)===KolTreeItemTag.toUpperCase()}componentWillLoad(){this.validateLabel(this._label),this.handleTreeChange(),this.observeChildListMutations()}disconnectedCallback(){var e;null===(e=this.observer)||void 0===e||e.disconnect()}observeChildListMutations(){this.observer=new MutationObserver(this.handleTreeChange.bind(this)),this.observeTopLevelItems()}handleSlotchange(){this.observeTopLevelItems(),this.handleTreeChange()}observeTopLevelItems(){var e;null===(e=this.getTopLevelTreeItems())||void 0===e||e.forEach(e=>{var t;null===(t=this.observer)||void 0===t||t.observe(e,{childList:!0,subtree:!0})})}getTopLevelTreeItems(){var t,l,a;return null===(a=null===(l=null===(t=this.host.querySelector("slot"))||void 0===t?void 0:t.assignedNodes)||void 0===l?void 0:l.call(t))||void 0===a?void 0:a.filter(e.isTreeItem)}handleTreeChange(){this.treeItemElements=this.getTreeItemElements(),this.ensureActiveItemVisibility()}getTreeItemElements(){var e;return null===(e=this.getTopLevelTreeItems())||void 0===e?void 0:e.reduce((e,t)=>{const l=t.querySelectorAll(KolTreeItemTag);return[...e,t,...l]},[])}async getOpenTreeItemElements(){if(!this.treeItemElements)return;const t=async l=>!e.isTreeItem(l.parentElement)||await l.parentElement.isOpen()&&await t(l.parentElement);return(await Promise.all(this.treeItemElements.map(async e=>({value:e,include:await t(e)})))).filter(e=>e.include).map(e=>e.value)}async handleKeyDown(e){var t,l,a,i,n,o,s,r,c,d;const u=await this.getOpenTreeItemElements(),v=null===(t=document.activeElement)||void 0===t?void 0:t.closest(KolTreeItemTag),m=e.metaKey||e.altKey||e.ctrlKey||e.shiftKey;if(!u||!v)return;const h=null==u?void 0:u.findIndex(e=>e===v);switch(e.key){case"ArrowDown":await(null===(l=u[h+1])||void 0===l?void 0:l.focus()),e.preventDefault();break;case"ArrowUp":await(null===(a=u[h-1])||void 0===a?void 0:a.focus()),e.preventDefault();break;case"Right":case"ArrowRight":e.preventDefault(),await v.isOpen()?await(null===(i=u[h+1])||void 0===i?void 0:i.focus()):await v.expand();break;case"Left":case"ArrowLeft":if(e.preventDefault(),await v.isOpen())await v.collapse();else{const e=u.findIndex(e=>e===v.parentElement);-1!==e&&await(null===(n=u[e])||void 0===n?void 0:n.focus())}break;case"Home":await(null===(o=u[0])||void 0===o?void 0:o.focus()),e.preventDefault();break;case"End":await(null===(s=u[u.length-1])||void 0===s?void 0:s.focus()),e.preventDefault();break;case null===(r=e.key.match(/^[a-zA-Z0-9]$/))||void 0===r?void 0:r.input:if(!m){const t=e.key.toLowerCase(),l=u.indexOf(v)+1,a=u.concat(u),i=a.slice(l,l+u.length).findIndex(e=>{var l;return null===(l=e.getAttribute("_label"))||void 0===l?void 0:l.trim().toLowerCase().startsWith(t)});-1!==i&&(await(null===(c=a[l+i])||void 0===c?void 0:c.focus()),e.preventDefault())}break;case"*":{const e=null===(d=v.parentElement)||void 0===d?void 0:d.querySelectorAll(KolTreeItemTag);null==e||e.forEach(e=>{e.expand()});break}}}async handleFocusOut(e){e.relatedTarget&&!e.relatedTarget.closest(KolTreeTag)&&await this.ensureActiveItemVisibility()}async ensureActiveItemVisibility(){const t=l=>{e.isTreeItem(l.parentElement)&&(l.parentElement.expand(),t(l.parentElement))},l=(()=>{var t,l,a,i;const n=null!==(i=null===(a=null===(l=null===(t=this.host.querySelector("slot"))||void 0===t?void 0:t.assignedNodes)||void 0===l?void 0:l.call(t))||void 0===a?void 0:a.filter(e.isTreeItem))&&void 0!==i?i:[];for(const e of n){if(e._active)return e;const t=e.querySelector(`${KolTreeItemTag}[_active="true"]`);if(t&&t._active)return t}})();l&&t(l)}get host(){return this}static get watchers(){return{_label:["validateLabel"]}}},[260,"kol-tree-wc",{_label:[1],state:[32]},[[0,"keydown","handleKeyDown"],[0,"focusout","handleFocusOut"]],{_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tree-wc"].forEach(e=>{if("kol-tree-wc"===e)customElements.get(e)||customElements.define(e,KolTreeWc$1)})}const KolTreeWc=KolTreeWc$1,defineCustomElement=defineCustomElement$1;export{KolTreeWc,defineCustomElement};

package/dist/components/kol-tree-wc.js.map

@@ -1 +1 @@
-{"file":"kol-tree-wc.js","mappings":"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","names":["KolTreeWc","__stencil_proxyCustomElement"],"sources":["src/components/tree/component.tsx"],"sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport { KolTreeItemTag, KolTreeTag } from '../../core/component-names';\nimport type { LabelPropType, TreeAPI, TreeStates } from '../../schema';\nimport { validateLabel } from '../../schema';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-tree-wc',\n\tshadow: false,\n})\nexport class KolTreeWc implements TreeAPI {\n\t@Element() host!: HTMLElement;\n\n\t@State() public state: TreeStates = {\n\t\t_label: '',\n\t};\n\tprivate observer?: MutationObserver;\n\tprivate treeItemElements?: HTMLKolTreeItemElement[];\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() _label!: LabelPropType;\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)}>\n\t\t\t\t<nav class=\"kol-tree\" aria-label={this.state._label}>\n\t\t\t\t\t<ul class=\"kol-tree__treeview-navigation\" role=\"tree\" aria-label={this.state._label}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate static isTreeItem(this: void, element?: HTMLElement | null): element is HTMLKolTreeItemElement {\n\t\treturn element?.tagName === KolTreeItemTag.toUpperCase();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\n\t\tthis.handleTreeChange();\n\t\tthis.observeChildListMutations();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.observer?.disconnect();\n\t}\n\n\tprivate observeChildListMutations() {\n\t\tthis.observer = new MutationObserver(this.handleTreeChange.bind(this));\n\t\tthis.observeTopLevelItems();\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.observeTopLevelItems();\n\t\tthis.handleTreeChange();\n\t}\n\n\tprivate observeTopLevelItems() {\n\t\tthis.getTopLevelTreeItems()?.forEach((treeItem) => {\n\t\t\tthis.observer?.observe(treeItem, { childList: true, subtree: true });\n\t\t});\n\t}\n\n\tprivate getTopLevelTreeItems(): HTMLKolTreeItemElement[] {\n\t\treturn (this.host.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem);\n\t}\n\n\tprivate handleTreeChange(): void {\n\t\tthis.treeItemElements = this.getTreeItemElements();\n\t\tvoid this.ensureActiveItemVisibility();\n\t}\n\n\t/**\n\t * Returns array of all TreeItem elements in the order they appear\n\t */\n\tprivate getTreeItemElements(): HTMLKolTreeItemElement[] {\n\t\treturn this.getTopLevelTreeItems()?.reduce((accumulator: HTMLKolTreeItemElement[], currentValue: HTMLKolTreeItemElement) => {\n\t\t\tconst children = currentValue.querySelectorAll(KolTreeItemTag);\n\n\t\t\treturn [...accumulator, currentValue, ...children];\n\t\t}, []);\n\t}\n\n\tprivate async getOpenTreeItemElements(): Promise<HTMLKolTreeItemElement[] | undefined> {\n\t\tif (!this.treeItemElements) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst areElementAndAllParentsOpen = async (element: HTMLKolTreeItemElement): Promise<boolean> => {\n\t\t\tif (!KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\t// parent is tree itself, top level is always open\n\t\t\t\treturn true;\n\t\t\t} else {\n\t\t\t\treturn (await element.parentElement.isOpen()) && (await areElementAndAllParentsOpen(element.parentElement));\n\t\t\t}\n\t\t};\n\n\t\tconst elementsWithInclude = await Promise.all(\n\t\t\tthis.treeItemElements.map(async (element) => ({\n\t\t\t\tvalue: element,\n\t\t\t\tinclude: await areElementAndAllParentsOpen(element),\n\t\t\t})),\n\t\t);\n\n\t\treturn elementsWithInclude.filter((element) => element.include).map((element) => element.value);\n\t}\n\n\t@Listen('keydown')\n\tpublic async handleKeyDown(event: KeyboardEvent) {\n\t\tconst openItems = await this.getOpenTreeItemElements();\n\t\tconst currentTreeItem: HTMLKolTreeItemElement | undefined | null = document.activeElement?.closest(KolTreeItemTag);\n\t\tconst hasModifierKeyPressed = event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;\n\n\t\tif (!openItems || !currentTreeItem) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentIndex = openItems?.findIndex((elem) => elem === currentTreeItem);\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tawait openItems[currentIndex + 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tawait openItems[currentIndex - 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Right':\n\t\t\tcase 'ArrowRight': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait openItems[currentIndex + 1]?.focusLink();\n\t\t\t\t} else {\n\t\t\t\t\tawait currentTreeItem.expand();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Left':\n\t\t\tcase 'ArrowLeft': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait currentTreeItem.collapse();\n\t\t\t\t} else {\n\t\t\t\t\tconst parentIndex = openItems.findIndex((item) => item === currentTreeItem.parentElement);\n\t\t\t\t\tparentIndex !== -1 && (await openItems[parentIndex]?.focusLink());\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\tawait openItems[0]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'End': {\n\t\t\t\tawait openItems[openItems.length - 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase event.key.match(/^[a-zA-Z0-9]$/)?.input: {\n\t\t\t\t/* Ignore events with any modifier key to avoid breaking native browser or OS shortcuts such as ⌘+L */\n\t\t\t\tif (!hasModifierKeyPressed) {\n\t\t\t\t\tconst char = event.key.toLowerCase();\n\t\t\t\t\tconst startIndex = openItems.indexOf(currentTreeItem) + 1;\n\t\t\t\t\tconst wrapAroundItems = openItems.concat(openItems);\n\t\t\t\t\tconst matchIndex = wrapAroundItems\n\t\t\t\t\t\t.slice(startIndex, startIndex + openItems.length)\n\t\t\t\t\t\t.findIndex((item) => item.getAttribute('_label')?.trim().toLowerCase().startsWith(char));\n\n\t\t\t\t\tif (matchIndex !== -1) {\n\t\t\t\t\t\tawait wrapAroundItems[startIndex + matchIndex].focusLink();\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase '*': {\n\t\t\t\tconst siblings = currentTreeItem.parentElement?.querySelectorAll(KolTreeItemTag);\n\t\t\t\tsiblings?.forEach((element) => {\n\t\t\t\t\tvoid element.expand();\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t@Listen('focusout')\n\tpublic async handleFocusOut(event: FocusEvent) {\n\t\tif (event.relatedTarget && !(event.relatedTarget as Element).closest(KolTreeTag)) {\n\t\t\t/* Tree lost focus */\n\t\t\tawait this.ensureActiveItemVisibility();\n\t\t}\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tprivate async ensureActiveItemVisibility() {\n\t\tconst findActiveItem = (): HTMLKolTreeItemElement | undefined => {\n\t\t\tconst rootNodes = (this.host.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem) ?? [];\n\t\t\tfor (const rootNode of rootNodes) {\n\t\t\t\tif (rootNode._active) {\n\t\t\t\t\treturn rootNode;\n\t\t\t\t}\n\t\t\t\tconst childMatch = rootNode.querySelector(`${KolTreeItemTag}[_active=\"true\"]`);\n\t\t\t\tif (childMatch && (childMatch as HTMLKolTreeItemElement)._active) {\n\t\t\t\t\treturn childMatch as HTMLKolTreeItemElement;\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst expandParentElements = (element: HTMLKolTreeItemElement) => {\n\t\t\tif (KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\tvoid element.parentElement.expand();\n\t\t\t\texpandParentElements(element.parentElement);\n\t\t\t}\n\t\t};\n\n\t\tconst target = findActiveItem();\n\t\tif (target) {\n\t\t\texpandParentElements(target);\n\t\t}\n\t}\n}\n"],"version":3}
+{"file":"kol-tree-wc.js","mappings":"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","names":["KolTreeWc","__stencil_proxyCustomElement"],"sources":["src/components/tree/component.tsx"],"sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport { KolTreeItemTag, KolTreeTag } from '../../core/component-names';\nimport type { LabelPropType, TreeAPI, TreeStates } from '../../schema';\nimport { validateLabel } from '../../schema';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-tree-wc',\n\tshadow: false,\n})\nexport class KolTreeWc implements TreeAPI {\n\t@Element() host!: HTMLElement;\n\n\t@State() public state: TreeStates = {\n\t\t_label: '',\n\t};\n\tprivate observer?: MutationObserver;\n\tprivate treeItemElements?: HTMLKolTreeItemElement[];\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() _label!: LabelPropType;\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)}>\n\t\t\t\t<nav class=\"kol-tree\" aria-label={this.state._label}>\n\t\t\t\t\t<ul class=\"kol-tree__treeview-navigation\" role=\"tree\" aria-label={this.state._label}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate static isTreeItem(this: void, element?: HTMLElement | null): element is HTMLKolTreeItemElement {\n\t\treturn element?.tagName === KolTreeItemTag.toUpperCase();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\n\t\tthis.handleTreeChange();\n\t\tthis.observeChildListMutations();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.observer?.disconnect();\n\t}\n\n\tprivate observeChildListMutations() {\n\t\tthis.observer = new MutationObserver(this.handleTreeChange.bind(this));\n\t\tthis.observeTopLevelItems();\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.observeTopLevelItems();\n\t\tthis.handleTreeChange();\n\t}\n\n\tprivate observeTopLevelItems() {\n\t\tthis.getTopLevelTreeItems()?.forEach((treeItem) => {\n\t\t\tthis.observer?.observe(treeItem, { childList: true, subtree: true });\n\t\t});\n\t}\n\n\tprivate getTopLevelTreeItems(): HTMLKolTreeItemElement[] {\n\t\treturn (this.host.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem);\n\t}\n\n\tprivate handleTreeChange(): void {\n\t\tthis.treeItemElements = this.getTreeItemElements();\n\t\tvoid this.ensureActiveItemVisibility();\n\t}\n\n\t/**\n\t * Returns array of all TreeItem elements in the order they appear\n\t */\n\tprivate getTreeItemElements(): HTMLKolTreeItemElement[] {\n\t\treturn this.getTopLevelTreeItems()?.reduce((accumulator: HTMLKolTreeItemElement[], currentValue: HTMLKolTreeItemElement) => {\n\t\t\tconst children = currentValue.querySelectorAll(KolTreeItemTag);\n\n\t\t\treturn [...accumulator, currentValue, ...children];\n\t\t}, []);\n\t}\n\n\tprivate async getOpenTreeItemElements(): Promise<HTMLKolTreeItemElement[] | undefined> {\n\t\tif (!this.treeItemElements) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst areElementAndAllParentsOpen = async (element: HTMLKolTreeItemElement): Promise<boolean> => {\n\t\t\tif (!KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\t// parent is tree itself, top level is always open\n\t\t\t\treturn true;\n\t\t\t} else {\n\t\t\t\treturn (await element.parentElement.isOpen()) && (await areElementAndAllParentsOpen(element.parentElement));\n\t\t\t}\n\t\t};\n\n\t\tconst elementsWithInclude = await Promise.all(\n\t\t\tthis.treeItemElements.map(async (element) => ({\n\t\t\t\tvalue: element,\n\t\t\t\tinclude: await areElementAndAllParentsOpen(element),\n\t\t\t})),\n\t\t);\n\n\t\treturn elementsWithInclude.filter((element) => element.include).map((element) => element.value);\n\t}\n\n\t@Listen('keydown')\n\tpublic async handleKeyDown(event: KeyboardEvent) {\n\t\tconst openItems = await this.getOpenTreeItemElements();\n\t\tconst currentTreeItem: HTMLKolTreeItemElement | undefined | null = document.activeElement?.closest(KolTreeItemTag);\n\t\tconst hasModifierKeyPressed = event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;\n\n\t\tif (!openItems || !currentTreeItem) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentIndex = openItems?.findIndex((elem) => elem === currentTreeItem);\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tawait openItems[currentIndex + 1]?.focus();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tawait openItems[currentIndex - 1]?.focus();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Right':\n\t\t\tcase 'ArrowRight': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait openItems[currentIndex + 1]?.focus();\n\t\t\t\t} else {\n\t\t\t\t\tawait currentTreeItem.expand();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Left':\n\t\t\tcase 'ArrowLeft': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait currentTreeItem.collapse();\n\t\t\t\t} else {\n\t\t\t\t\tconst parentIndex = openItems.findIndex((item) => item === currentTreeItem.parentElement);\n\t\t\t\t\tparentIndex !== -1 && (await openItems[parentIndex]?.focus());\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\tawait openItems[0]?.focus();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'End': {\n\t\t\t\tawait openItems[openItems.length - 1]?.focus();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase event.key.match(/^[a-zA-Z0-9]$/)?.input: {\n\t\t\t\t/* Ignore events with any modifier key to avoid breaking native browser or OS shortcuts such as ⌘+L */\n\t\t\t\tif (!hasModifierKeyPressed) {\n\t\t\t\t\tconst char = event.key.toLowerCase();\n\t\t\t\t\tconst startIndex = openItems.indexOf(currentTreeItem) + 1;\n\t\t\t\t\tconst wrapAroundItems = openItems.concat(openItems);\n\t\t\t\t\tconst matchIndex = wrapAroundItems\n\t\t\t\t\t\t.slice(startIndex, startIndex + openItems.length)\n\t\t\t\t\t\t.findIndex((item) => item.getAttribute('_label')?.trim().toLowerCase().startsWith(char));\n\n\t\t\t\t\tif (matchIndex !== -1) {\n\t\t\t\t\t\tawait wrapAroundItems[startIndex + matchIndex]?.focus();\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase '*': {\n\t\t\t\tconst siblings = currentTreeItem.parentElement?.querySelectorAll(KolTreeItemTag);\n\t\t\t\tsiblings?.forEach((element) => {\n\t\t\t\t\tvoid element.expand();\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t@Listen('focusout')\n\tpublic async handleFocusOut(event: FocusEvent) {\n\t\tif (event.relatedTarget && !(event.relatedTarget as Element).closest(KolTreeTag)) {\n\t\t\t/* Tree lost focus */\n\t\t\tawait this.ensureActiveItemVisibility();\n\t\t}\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tprivate async ensureActiveItemVisibility() {\n\t\tconst findActiveItem = (): HTMLKolTreeItemElement | undefined => {\n\t\t\tconst rootNodes = (this.host.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem) ?? [];\n\t\t\tfor (const rootNode of rootNodes) {\n\t\t\t\tif (rootNode._active) {\n\t\t\t\t\treturn rootNode;\n\t\t\t\t}\n\t\t\t\tconst childMatch = rootNode.querySelector(`${KolTreeItemTag}[_active=\"true\"]`);\n\t\t\t\tif (childMatch && (childMatch as HTMLKolTreeItemElement)._active) {\n\t\t\t\t\treturn childMatch as HTMLKolTreeItemElement;\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst expandParentElements = (element: HTMLKolTreeItemElement) => {\n\t\t\tif (KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\tvoid element.parentElement.expand();\n\t\t\t\texpandParentElements(element.parentElement);\n\t\t\t}\n\t\t};\n\n\t\tconst target = findActiveItem();\n\t\tif (target) {\n\t\t\texpandParentElements(target);\n\t\t}\n\t}\n}\n"],"version":3}

package/dist/components/kol-tree.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{u as KolTreeWcTag}from"./component-names.js";const defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tree__treeview-navigation {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}",KolTree$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow()}render(){return h(KolTreeWcTag,{key:"67f868d38de33d334b05b93c82e56feead46b255",_label:this._label},h("slot",{key:"0a316d5d93a20c0ada8e5aa425c9f5fdf5cf16f6"}))}static get style(){return{default:defaultStyleCss}}},[289,"kol-tree",{_label:[1]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tree"].forEach(n=>{if("kol-tree"===n)customElements.get(n)||customElements.define(n,KolTree$1)})}const KolTree=KolTree$1,defineCustomElement=defineCustomElement$1;export{KolTree,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{v as KolTreeWcTag}from"./component-names.js";const defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tree__treeview-navigation {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}",KolTree$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow()}render(){return h(KolTreeWcTag,{key:"0a42e480a9fe270180fa75f07b87bfb00a634ac9",_label:this._label},h("slot",{key:"19c9f71d5a62202b0022adff62b36a277797dd0c"}))}static get style(){return{default:defaultStyleCss}}},[289,"kol-tree",{_label:[1]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tree"].forEach(n=>{if("kol-tree"===n)customElements.get(n)||customElements.define(n,KolTree$1)})}const KolTree=KolTree$1,defineCustomElement=defineCustomElement$1;export{KolTree,defineCustomElement};

package/dist/components/kol-version.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import"./common.js";import{v as validateLabel}from"./label.js";import{t as translate}from"./i18n.js";import{y as KolBadgeTag}from"./component-names.js";const defaultStyleCss="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}",KolVersion$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.translateVersion=translate("kol-version"),this.state={_label:"0.0.0-alpha.0"}}render(){return h(Host,{key:"8bb2e7607ac89318676c76d90466e13d445d492a",class:"kol-version"},h(KolBadgeTag,{key:"033d28fec624afa5976153c7fe58359dd52dea2b",_color:"#bec5c9",_icons:{left:{icon:"codicon codicon-versions",label:this.translateVersion}},_label:this.state._label}))}validateLabel(n){validateLabel(this,n,{required:!0})}componentWillLoad(){this.validateLabel(this._label)}static get watchers(){return{_label:["validateLabel"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-version",{_label:[1],state:[32]},void 0,{_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-version"].forEach(n=>{if("kol-version"===n)customElements.get(n)||customElements.define(n,KolVersion$1)})}const KolVersion=KolVersion$1,defineCustomElement=defineCustomElement$1;export{KolVersion,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import"./common.js";import{v as validateLabel}from"./label.js";import{t as translate}from"./i18n.js";import{z as KolBadgeTag}from"./component-names.js";const defaultStyleCss="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}",KolVersion$1=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.translateVersion=translate("kol-version"),this.state={_label:"0.0.0-alpha.0"}}render(){return h(Host,{key:"c2c4090511476f2b782e5ec11eeefb14e84aeef8",class:"kol-version"},h(KolBadgeTag,{key:"8cca6fc737968718a4ade9c153711209b562c9bf",_color:"#bec5c9",_icons:{left:{icon:"kolicon-version",label:this.translateVersion}},_label:this.state._label}))}validateLabel(e){validateLabel(this,e,{required:!0})}componentWillLoad(){this.validateLabel(this._label)}static get watchers(){return{_label:["validateLabel"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-version",{_label:[1],state:[32]},void 0,{_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-version"].forEach(e=>{if("kol-version"===e)customElements.get(e)||customElements.define(e,KolVersion$1)})}const KolVersion=KolVersion$1,defineCustomElement=defineCustomElement$1;export{KolVersion,defineCustomElement};

package/dist/components/kol-version.js.map

@@ -1 +1 @@
-{"file":"kol-version.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,0sKAA0sK;;MCgBrtKA,YAAU,GAAAC,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;AAPvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQkB,QAAA,IAAA,CAAA,gBAAgB,GAAG,SAAS,CAAC,aAAa,CAAC;QAoB5C,IAAA,CAAA,KAAK,GAAkB;AACtC,YAAA,MAAM,EAAE,eAAe;SACvB;AAYD;IAjCO,MAAM,GAAA;AACZ,QAAA,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACxB,CAAA,CAAC,WAAW,EACX,EAAA,GAAA,EAAA,0CAAA,EAAA,MAAM,EAAC,SAAS,EAChB,MAAM,EAAE;gBACP,IAAI,EAAE,EAAE,IAAI,EAAE,0BAA0B,EAAE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE;aACxE,EACD,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAA,CACxB,CACI;;AAcF,IAAA,aAAa,CAAC,KAAqB,EAAA;AACzC,QAAA,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;AAC1B,YAAA,QAAQ,EAAE,IAAI;AACd,SAAA,CAAC;;IAGI,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolVersion","__stencil_proxyCustomElement"],"sources":["src/components/version/style.scss?tag=kol-version&mode=default&encapsulation=shadow","src/components/version/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { LabelPropType, VersionAPI, VersionStates } from '../../schema';\nimport { validateLabel } from '../../schema';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport { KolBadgeTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-version',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolVersion implements VersionAPI {\n\tprivate readonly translateVersion = translate('kol-version');\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-version\">\n\t\t\t\t<KolBadgeTag\n\t\t\t\t\t_color=\"#bec5c9\"\n\t\t\t\t\t_icons={{\n\t\t\t\t\t\tleft: { icon: 'codicon codicon-versions', label: this.translateVersion },\n\t\t\t\t\t}}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: VersionStates = {\n\t\t_label: '0.0.0-alpha.0',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"version":3}
+{"file":"kol-version.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,0sKAA0sK;;MCgBrtKA,YAAU,GAAAC,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;AAPvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQkB,QAAA,IAAA,CAAA,gBAAgB,GAAG,SAAS,CAAC,aAAa,CAAC;QAoB5C,IAAA,CAAA,KAAK,GAAkB;AACtC,YAAA,MAAM,EAAE,eAAe;SACvB;AAYD;IAjCO,MAAM,GAAA;AACZ,QAAA,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACxB,CAAA,CAAC,WAAW,EACX,EAAA,GAAA,EAAA,0CAAA,EAAA,MAAM,EAAC,SAAS,EAChB,MAAM,EAAE;gBACP,IAAI,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE;aAC/D,EACD,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAA,CACxB,CACI;;AAcF,IAAA,aAAa,CAAC,KAAqB,EAAA;AACzC,QAAA,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;AAC1B,YAAA,QAAQ,EAAE,IAAI;AACd,SAAA,CAAC;;IAGI,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolVersion","__stencil_proxyCustomElement"],"sources":["src/components/version/style.scss?tag=kol-version&mode=default&encapsulation=shadow","src/components/version/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { LabelPropType, VersionAPI, VersionStates } from '../../schema';\nimport { validateLabel } from '../../schema';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport { KolBadgeTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-version',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolVersion implements VersionAPI {\n\tprivate readonly translateVersion = translate('kol-version');\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-version\">\n\t\t\t\t<KolBadgeTag\n\t\t\t\t\t_color=\"#bec5c9\"\n\t\t\t\t\t_icons={{\n\t\t\t\t\t\tleft: { icon: 'kolicon-version', label: this.translateVersion },\n\t\t\t\t\t}}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: VersionStates = {\n\t\t_label: '0.0.0-alpha.0',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"version":3}

package/dist/components/label.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{w as watchValidator,r as a11yHint,B as uiUxHint}from"./common.js";const headingLevelOptions=[0,1,2,3,4,5,6],READABLE_CHARS=/[a-zA-Z0-9äöüÄÖÜß]/g,ONLY_NUMBERS=/^\d+$/;function countReadableChars(a){var t;return"string"==typeof a&&(null===(t=a.match(READABLE_CHARS))||void 0===t?void 0:t.length)||0}function hasEnoughReadableChars(a,t=1){return countReadableChars(a)>=t}function containsOnlyNumbers(a){return ONLY_NUMBERS.test(a)}function getValidationOptions(a){var t;return Object.assign(Object.assign({},a),{hooks:{afterPatch:(t,e,n,o)=>{var i,s;"function"==typeof(null===(i=a.hooks)||void 0===i?void 0:i.afterPatch)&&(null===(s=a.hooks)||void 0===s||s.afterPatch(t,e,n,o)),"string"==typeof t&&!1===hasEnoughReadableChars(t,3)&&!1===containsOnlyNumbers(t)&&a11yHint(`The heading or label ("${t}") is inaccessible. A label should consist of at least three readable characters.`),"string"==typeof t&&t.length>80&&uiUxHint("A heading or label should not be longer than 80 characters.")},beforePatch:null===(t=a.hooks)||void 0===t?void 0:t.beforePatch}})}const LABEL_VALUES=new Set(["string"]),validateLabel=(a,t,e={})=>{watchValidator(a,"_label",a=>"string"==typeof a,LABEL_VALUES,t,getValidationOptions(e))},validateLabelWithExpertSlot=validateLabel;export{validateLabelWithExpertSlot as a,hasEnoughReadableChars as b,containsOnlyNumbers as c,headingLevelOptions as h,validateLabel as v};
+import{w as watchValidator,t as a11yHint,u as uiUxHint}from"./common.js";const headingLevelOptions=[0,1,2,3,4,5,6],READABLE_CHARS=/[a-zA-Z0-9äöüÄÖÜß]/g,ONLY_NUMBERS=/^\d+$/;function countReadableChars(a){var t;return"string"==typeof a&&(null===(t=a.match(READABLE_CHARS))||void 0===t?void 0:t.length)||0}function hasEnoughReadableChars(a,t=1){return countReadableChars(a)>=t}function containsOnlyNumbers(a){return ONLY_NUMBERS.test(a)}function getValidationOptions(a){var t;return Object.assign(Object.assign({},a),{hooks:{afterPatch:(t,e,n,o)=>{var i,s;"function"==typeof(null===(i=a.hooks)||void 0===i?void 0:i.afterPatch)&&(null===(s=a.hooks)||void 0===s||s.afterPatch(t,e,n,o)),"string"==typeof t&&!1===hasEnoughReadableChars(t,3)&&!1===containsOnlyNumbers(t)&&a11yHint(`The heading or label ("${t}") is inaccessible. A label should consist of at least three readable characters.`),"string"==typeof t&&t.length>80&&uiUxHint("A heading or label should not be longer than 80 characters.")},beforePatch:null===(t=a.hooks)||void 0===t?void 0:t.beforePatch}})}const LABEL_VALUES=new Set(["string"]),validateLabel=(a,t,e={})=>{watchValidator(a,"_label",a=>"string"==typeof a,LABEL_VALUES,t,getValidationOptions(e))},validateLabelWithExpertSlot=validateLabel;export{validateLabelWithExpertSlot as a,hasEnoughReadableChars as b,containsOnlyNumbers as c,headingLevelOptions as h,validateLabel as v};