@public-ui/components 3.0.0-alpha.0 → 4.0.0-alpha.0

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,F as e,H as i,r as n,g as o}from"./index-a0b4dca2.js";import{n as s}from"./dev.utils-5d039f3c.js";import{s as a,t as l}from"./events-29e84d75.js";import{I as r}from"./controller-icon-30817124.js";import{i as d,b as h}from"./prop.validators-c5e6ad2d.js";import{v as c}from"./suggestions-33f55ec2.js";import{i as u,d as p}from"./component-names-aa3cbc3c.js";import{g as b}from"./controller-ae3a41a0.js";import{t as f}from"./i18n-5fe08f1c.js";import{c as m}from"./clsx-09a06a12.js";import{I as y}from"./InternalUnderlinedBadgeText-3e2de35c.js";import{s as v,b as g}from"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./icons-f3b7aabd.js";import"./common-54bf85ba.js";import"./index-541b643a.js";import"./associated.controller-bce3d721.js";import"./access-and-short-key-864aafba.js";import"./tooltip-align-c001aae2.js";import"./align-3f029493.js";import"./hide-label-db0db59c.js";import"./label-d70e7c34.js";import"./i18n-7ea9f137.js";class k extends r{constructor(e,t,n){super(e,t,n),this.component=e}validatePlaceholder(e){d(this.component,"_placeholder",e)}validateRequired(e){h(this.component,"_required",e)}validateSuggestions(e){c(this.component,e)}validateValue(e){d(this.component,"_value",e)}componentWillLoad(){super.componentWillLoad(),this.validatePlaceholder(this.component._placeholder),this.validateRequired(this.component._required),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const x="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox {\n    position: relative;\n  }\n  .combobox--disabled, .combobox--disabled * {\n    cursor: not-allowed !important;\n  }\n  .combobox--disabled {\n    opacity: 0.5;\n    outline: none;\n  }\n  .combobox__group {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  .combobox__input {\n    flex-grow: 1;\n  }\n  .combobox__icon {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .combobox__listbox {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item {\n    cursor: pointer;\n  }\n  .combobox__listbox--cursor-hidden .combobox__item {\n    cursor: none !important;\n  }\n}",w=x,_=class{async getValue(){return this.state._value}async kolFocus(){var e;null===(e=this.refInput)||void 0===e||e.focus()}selectOption(e,t){var n;this.controller.onFacade.onInput(e,!0,t),this.controller.onFacade.onChange(e,t),this.controller.setFormAssociatedValue(t),this.state._value=t,null===(n=this.refInput)||void 0===n||n.focus()}onInput(e){const t=e.target;this.state._value=t.value,this.controller.onFacade.onInput(e),this.setFilteredSuggestionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredSuggestionsByQuery(e){""===e.trim()?this._filteredSuggestions=[...this._suggestions]:(this._filteredSuggestions=Array.isArray(this._suggestions)?this._suggestions.filter((t=>t.toLowerCase().includes(e.toLowerCase()))):this._filteredSuggestions,this._isOpen=!!(this._filteredSuggestions&&this._filteredSuggestions.length>0))}moveFocus(e){if(!this._filteredSuggestions)return;let t=this._focusedOptionIndex+e;t>=this._filteredSuggestions.length&&(t=0),t<0&&(t=this._filteredSuggestions.length-1),this.focusOption(t)}focusOption(e){if(this._focusedOptionIndex=e,this.refSuggestions){const t=this.refSuggestions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),n=Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.findIndex((e=>e.toLowerCase().startsWith(t)));"number"==typeof n&&this.focusOption(n)}render(){const n=v(this.state._label),{ariaDescribedBy:o}=b(this.state);return t(i,{key:"c582c7ea460408d5092d339f8c354948ade0ace8",class:"kol-combobox"},t("div",{key:"449497a4ee717f7b7a9a234b06523dcdcd7fe15e",class:m("combobox",this.state._disabled&&"combobox--disabled")},t(u,{key:"c4a306c636ea1489fa24e68639a82e240012a421",_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.refInput)||void 0===e?void 0:e.focus()},role:"presentation"},t("span",{key:"b4d1279c194cf29ad53f826bb1caffb64867ce5b",slot:"label"},n?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?t(e,null,t(y,{badgeText:g(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",t("span",{class:"access-key-hint","aria-hidden":"true"},g(this.state._accessKey,this.state._shortKey))):t("span",null,this.state._label)),t("div",{key:"d2fdc0250f343437d5c3214e37849b36af724fa7",slot:"input"},t("div",{key:"999e8c651d2443c743c2e610b6c2781dd7132e3b",class:"combobox__group"},t("input",Object.assign({key:"111e6973eec55e0904cea83641c315d2bf5d0444",ref:this.catchRef,class:"combobox__input",type:"text",role:"combobox","aria-autocomplete":"both","aria-expanded":this._isOpen?"true":"false","aria-controls":"listbox",value:this.state._value,accessKey:this.state._accessKey,"aria-describedby":o.length>0?o.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-labelledby":this.state._id,"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,name:this.state._name,required:this.state._required,spellcheck:"false"},this.controller.onFacade,{onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},onChange:this.onChange.bind(this),onInput:this.onInput.bind(this),placeholder:this.state._placeholder})),t("button",{key:"84199174f7e26dff86b32f1cfce56263b84dfc90",tabindex:"-1",class:"combobox__icon",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled},t(p,{key:"0c1ddd3951e85d229c24262d1cb6537c6aab6dec",_icons:"codicon codicon-triangle-down",_label:f("kol-dropdown")}))),this._isOpen&&!(!0===this.state._disabled)&&t("ul",{key:"25f7c5ea63432722e958965cf484973d0d0aff05",role:"listbox",class:m("combobox__listbox",this.blockSuggestionMouseOver&&"combobox__listbox--cursor-hidden"),onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.map(((e,n)=>t("li",{id:`option-${n}`,key:`-${n}`,ref:e=>{e&&(this.refSuggestions[n]=e)},"data-index":n,tabIndex:-1,role:"option","aria-selected":this.state._value===e,onClick:t=>{this.selectOption(t,e),this.toggleListbox()},onMouseOver:()=>{this.blockSuggestionMouseOver||this.focusOption(n)},onFocus:()=>{this.focusOption(n)},class:"combobox__item",onKeyDown:t=>{"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(t,e),this.toggleListbox(),t.preventDefault())}},e))))))))}handleKeyDown(e){var t,n;const i=(t,n)=>{var i;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(-1)));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":i(!1),null===(n=this.refInput)||void 0===n||n.focus();break;case"NumpadEnter":case"Enter":this.toggleListbox();break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&this.focusOption(0)}));break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&this.focusOption(this._filteredSuggestions?this._filteredSuggestions.length-1:0)}));break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(-10)));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(10)))}}handleWindowClick(e){null==this.host||this.host.contains(e.target)||(this._isOpen=!1)}constructor(e){n(this,e),this.refSuggestions=[],this._focusedOptionIndex=-1,this.toggleListbox=()=>{var e;if(!0===this.state._disabled)this._isOpen=!1;else if(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus(),this._isOpen&&Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0){const e=this._filteredSuggestions.findIndex((e=>e===this.state._value));this._focusedOptionIndex=e>=0?e:0,this.focusOption(this._focusedOptionIndex)}},this.catchRef=e=>{this.refInput=e},this.blockSuggestionMouseOver=!1,this._isOpen=!1,this._filteredSuggestions=void 0,this._accessKey=void 0,this._placeholder=void 0,this._alert=void 0,this._disabled=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._suggestions=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${s()}`,_label:"",_suggestions:[],_value:""},this.inputHasFocus=!1,this.controller=new k(this,"combobox",this.host),this.onInput=this.onInput.bind(this)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSuggestions(e){this.controller.validateSuggestions(e),this._filteredSuggestions=e}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.controller.setFormAssociatedValue(e)}componentWillLoad(){this.refSuggestions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e)),this._filteredSuggestions=this.state._suggestions}handleMouseEvent(){this.blockSuggestionMouseOver=!1}handleFocusOut(){setTimeout((()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()}),0)}handleWindowBlur(){this.onBlur()}onBlur(){var e;this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus())}onChange(e){var t;a(e),l("change",this.host,this.state._value),this.controller.setFormAssociatedValue(this.state._value),"function"!=typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)||this._isOpen||this.state._on.onChange(e,this.state._value)}static get delegatesFocus(){return!0}get host(){return o(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};_.style={default:w};export{_ as kol_combobox};
+import{h as t,F as e,H as i,r as n,g as o}from"./index-4c718166.js";import{n as s}from"./dev.utils-5db255b5.js";import{s as a,t as l}from"./events-29e84d75.js";import{I as r}from"./controller-icon-30817124.js";import{i as d,b as h}from"./prop.validators-c5e6ad2d.js";import{v as c}from"./suggestions-33f55ec2.js";import{i as u,d as p}from"./component-names-aa3cbc3c.js";import{g as b}from"./controller-ae3a41a0.js";import{t as f}from"./i18n-5fe08f1c.js";import{c as m}from"./clsx-09a06a12.js";import{I as y}from"./InternalUnderlinedBadgeText-68465b64.js";import{s as v,b as g}from"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./icons-f3b7aabd.js";import"./common-54bf85ba.js";import"./index-541b643a.js";import"./associated.controller-bce3d721.js";import"./access-and-short-key-864aafba.js";import"./tooltip-align-c001aae2.js";import"./align-3f029493.js";import"./hide-label-db0db59c.js";import"./label-d70e7c34.js";import"./i18n-7ea9f137.js";class k extends r{constructor(e,t,n){super(e,t,n),this.component=e}validatePlaceholder(e){d(this.component,"_placeholder",e)}validateRequired(e){h(this.component,"_required",e)}validateSuggestions(e){c(this.component,e)}validateValue(e){d(this.component,"_value",e)}componentWillLoad(){super.componentWillLoad(),this.validatePlaceholder(this.component._placeholder),this.validateRequired(this.component._required),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const x="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox {\n    position: relative;\n  }\n  .combobox--disabled, .combobox--disabled * {\n    cursor: not-allowed !important;\n  }\n  .combobox--disabled {\n    opacity: 0.5;\n    outline: none;\n  }\n  .combobox__group {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  .combobox__input {\n    flex-grow: 1;\n  }\n  .combobox__icon {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .combobox__listbox {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item {\n    cursor: pointer;\n  }\n  .combobox__listbox--cursor-hidden .combobox__item {\n    cursor: none !important;\n  }\n}",w=x,_=class{async getValue(){return this.state._value}async kolFocus(){var e;null===(e=this.refInput)||void 0===e||e.focus()}selectOption(e,t){var n;this.controller.onFacade.onInput(e,!0,t),this.controller.onFacade.onChange(e,t),this.controller.setFormAssociatedValue(t),this.state._value=t,null===(n=this.refInput)||void 0===n||n.focus()}onInput(e){const t=e.target;this.state._value=t.value,this.controller.onFacade.onInput(e),this.setFilteredSuggestionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredSuggestionsByQuery(e){""===e.trim()?this._filteredSuggestions=[...this._suggestions]:(this._filteredSuggestions=Array.isArray(this._suggestions)?this._suggestions.filter((t=>t.toLowerCase().includes(e.toLowerCase()))):this._filteredSuggestions,this._isOpen=!!(this._filteredSuggestions&&this._filteredSuggestions.length>0))}moveFocus(e){if(!this._filteredSuggestions)return;let t=this._focusedOptionIndex+e;t>=this._filteredSuggestions.length&&(t=0),t<0&&(t=this._filteredSuggestions.length-1),this.focusOption(t)}focusOption(e){if(this._focusedOptionIndex=e,this.refSuggestions){const t=this.refSuggestions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),n=Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.findIndex((e=>e.toLowerCase().startsWith(t)));"number"==typeof n&&this.focusOption(n)}render(){const n=v(this.state._label),{ariaDescribedBy:o}=b(this.state);return t(i,{key:"c582c7ea460408d5092d339f8c354948ade0ace8",class:"kol-combobox"},t("div",{key:"449497a4ee717f7b7a9a234b06523dcdcd7fe15e",class:m("combobox",this.state._disabled&&"combobox--disabled")},t(u,{key:"c4a306c636ea1489fa24e68639a82e240012a421",_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.refInput)||void 0===e?void 0:e.focus()},role:"presentation"},t("span",{key:"b4d1279c194cf29ad53f826bb1caffb64867ce5b",slot:"label"},n?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?t(e,null,t(y,{badgeText:g(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",t("span",{class:"access-key-hint","aria-hidden":"true"},g(this.state._accessKey,this.state._shortKey))):t("span",null,this.state._label)),t("div",{key:"d2fdc0250f343437d5c3214e37849b36af724fa7",slot:"input"},t("div",{key:"999e8c651d2443c743c2e610b6c2781dd7132e3b",class:"combobox__group"},t("input",Object.assign({key:"111e6973eec55e0904cea83641c315d2bf5d0444",ref:this.catchRef,class:"combobox__input",type:"text",role:"combobox","aria-autocomplete":"both","aria-expanded":this._isOpen?"true":"false","aria-controls":"listbox",value:this.state._value,accessKey:this.state._accessKey,"aria-describedby":o.length>0?o.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-labelledby":this.state._id,"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,name:this.state._name,required:this.state._required,spellcheck:"false"},this.controller.onFacade,{onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},onChange:this.onChange.bind(this),onInput:this.onInput.bind(this),placeholder:this.state._placeholder})),t("button",{key:"84199174f7e26dff86b32f1cfce56263b84dfc90",tabindex:"-1",class:"combobox__icon",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled},t(p,{key:"0c1ddd3951e85d229c24262d1cb6537c6aab6dec",_icons:"codicon codicon-triangle-down",_label:f("kol-dropdown")}))),this._isOpen&&!(!0===this.state._disabled)&&t("ul",{key:"25f7c5ea63432722e958965cf484973d0d0aff05",role:"listbox",class:m("combobox__listbox",this.blockSuggestionMouseOver&&"combobox__listbox--cursor-hidden"),onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.map(((e,n)=>t("li",{id:`option-${n}`,key:`-${n}`,ref:e=>{e&&(this.refSuggestions[n]=e)},"data-index":n,tabIndex:-1,role:"option","aria-selected":this.state._value===e,onClick:t=>{this.selectOption(t,e),this.toggleListbox()},onMouseOver:()=>{this.blockSuggestionMouseOver||this.focusOption(n)},onFocus:()=>{this.focusOption(n)},class:"combobox__item",onKeyDown:t=>{"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(t,e),this.toggleListbox(),t.preventDefault())}},e))))))))}handleKeyDown(e){var t,n;const i=(t,n)=>{var i;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(-1)));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":i(!1),null===(n=this.refInput)||void 0===n||n.focus();break;case"NumpadEnter":case"Enter":this.toggleListbox();break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&this.focusOption(0)}));break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&this.focusOption(this._filteredSuggestions?this._filteredSuggestions.length-1:0)}));break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(-10)));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(10)))}}handleWindowClick(e){null==this.host||this.host.contains(e.target)||(this._isOpen=!1)}constructor(e){n(this,e),this.refSuggestions=[],this._focusedOptionIndex=-1,this.toggleListbox=()=>{var e;if(!0===this.state._disabled)this._isOpen=!1;else if(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus(),this._isOpen&&Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0){const e=this._filteredSuggestions.findIndex((e=>e===this.state._value));this._focusedOptionIndex=e>=0?e:0,this.focusOption(this._focusedOptionIndex)}},this.catchRef=e=>{this.refInput=e},this.blockSuggestionMouseOver=!1,this._isOpen=!1,this._filteredSuggestions=void 0,this._accessKey=void 0,this._placeholder=void 0,this._alert=void 0,this._disabled=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._suggestions=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${s()}`,_label:"",_suggestions:[],_value:""},this.inputHasFocus=!1,this.controller=new k(this,"combobox",this.host),this.onInput=this.onInput.bind(this)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSuggestions(e){this.controller.validateSuggestions(e),this._filteredSuggestions=e}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.controller.setFormAssociatedValue(e)}componentWillLoad(){this.refSuggestions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e)),this._filteredSuggestions=this.state._suggestions}handleMouseEvent(){this.blockSuggestionMouseOver=!1}handleFocusOut(){setTimeout((()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()}),0)}handleWindowBlur(){this.onBlur()}onBlur(){var e;this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus())}onChange(e){var t;a(e),l("change",this.host,this.state._value),this.controller.setFormAssociatedValue(this.state._value),"function"!=typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)||this._isOpen||this.state._on.onChange(e,this.state._value)}static get delegatesFocus(){return!0}get host(){return o(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};_.style={default:w};export{_ as kol_combobox};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t,g as i}from"./index-a0b4dca2.js";import{n as o}from"./dev.utils-5d039f3c.js";import{w as a}from"./validation-e83461ea.js";import{t as s}from"./events-29e84d75.js";import{K as l}from"./Collapsible-0f95c96e.js";import{w as r}from"./prop.validators-c5e6ad2d.js";import{v as d}from"./disabled-5fc4b444.js";import{v as h}from"./label-d70e7c34.js";import{v as c}from"./open-f7031548.js";import"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./tslib.es6-2e5096f8.js";import"./clsx-09a06a12.js";import"./component-names-aa3cbc3c.js";import"./Heading-781aa65b.js";import"./index-541b643a.js";const p=(n,e)=>{r(n,"_on",(n=>"object"==typeof n&&null!==n),new Set(["DetailsCallbacksPropType {Events.onToggle}"]),e)},b="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n  .collapsible {\n    /* @see https://github.com/public-ui/kolibri/issues/5952 */\n    /*\n          * Inside a button, the caption text is always centered.\n          * So we have to align the text to the left.\n          */\n  }\n  .collapsible__wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    overflow: hidden;\n    transition: grid-template-rows 0.3s;\n  }\n  .collapsible__wrapper-animation {\n    min-height: 0;\n    transition: visibility 0.3s;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n  }\n  .open .collapsible__wrapper {\n    grid-template-rows: 1fr;\n  }\n  .open .collapsible__wrapper-animation {\n    visibility: visible;\n  }\n  @media (prefers-reduced-motion) {\n    .collapsible__wrapper-animation, .collapsible__wrapper {\n      transition-duration: 0s;\n    }\n  }\n  @media print {\n    :not(.open) .collapsible__wrapper-animation {\n      display: none;\n    }\n  }\n  .collapsible__heading-button button .kol-span-wc {\n    justify-items: start;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .details__heading-button {\n    display: flex;\n  }\n  .details__heading-button button {\n    min-height: auto;\n  }\n  .details__heading-button button .kol-span-wc .span-label {\n    border-bottom-color: grey;\n    border-bottom-style: solid;\n  }\n  .open .details__heading-button .kol-icon::part(icon) {\n    transform: rotate(90deg);\n  }\n}",m=b,u=class{constructor(e){n(this,e),this.nonce=o(),this.catchRef=n=>{this.buttonWcRef=n},this.handleOnClick=n=>{this._open=!this._open,clearTimeout(this.toggleTimeout),this.toggleTimeout=setTimeout((()=>{var e,t;s("toggle",this.host,this._open),null===(t=null===(e=this.state._on)||void 0===e?void 0:e.onToggle)||void 0===t||t.call(e,n,Boolean(this._open))}),25)},this._disabled=!1,this._label=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_label:"",_level:1,_on:{}}}async focus(){await this.kolFocus()}async kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){const{_open:n,_label:i,_disabled:o}=this.state,a="details",s={id:this.nonce,label:i,open:n,disabled:o,level:1,onClick:this.handleOnClick,class:a,HeadingProps:{class:`${a}__heading`},HeadingButtonProps:{ref:this.catchRef,class:`${a}__heading-button`,_icons:"codicon codicon-chevron-right"},ContentProps:{class:`${a}__content indented-text`,wrapperClass:`${a}__wrapper`,animationClass:`${a}__wrapper-animation`}};return e(t,{key:"f1625220d7832b2d95371580b50b771e41b3db35",class:"kol-details"},e(l,Object.assign({key:"fcfcb5eb41b2657a8ef67acd4ef3d86be31a17d1"},s),e("slot",{key:"ef6a5d7ce16cd5e971f84ba18757f490edc218b6"})))}validateDisabled(n){d(this,n)}validateLabel(n){h(this,n,{required:!0})}validateLevel(n){a(this,n)}validateOn(n){p(this,n)}validateOpen(n){c(this,n)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}get host(){return i(this)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};u.style={default:m};export{u as kol_details};
+import{r as n,h as e,H as t,g as i}from"./index-4c718166.js";import{n as o}from"./dev.utils-5db255b5.js";import{w as a}from"./validation-e83461ea.js";import{t as s}from"./events-29e84d75.js";import{K as l}from"./Collapsible-d17302d5.js";import{w as r}from"./prop.validators-c5e6ad2d.js";import{v as d}from"./disabled-5fc4b444.js";import{v as h}from"./label-d70e7c34.js";import{v as c}from"./open-f7031548.js";import"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./tslib.es6-2e5096f8.js";import"./clsx-09a06a12.js";import"./component-names-aa3cbc3c.js";import"./Heading-98b6ed4f.js";import"./index-541b643a.js";const p=(n,e)=>{r(n,"_on",(n=>"object"==typeof n&&null!==n),new Set(["DetailsCallbacksPropType {Events.onToggle}"]),e)},b="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n  .collapsible {\n    /* @see https://github.com/public-ui/kolibri/issues/5952 */\n    /*\n          * Inside a button, the caption text is always centered.\n          * So we have to align the text to the left.\n          */\n  }\n  .collapsible__wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    overflow: hidden;\n    transition: grid-template-rows 0.3s;\n  }\n  .collapsible__wrapper-animation {\n    min-height: 0;\n    transition: visibility 0.3s;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n  }\n  .open .collapsible__wrapper {\n    grid-template-rows: 1fr;\n  }\n  .open .collapsible__wrapper-animation {\n    visibility: visible;\n  }\n  @media (prefers-reduced-motion) {\n    .collapsible__wrapper-animation, .collapsible__wrapper {\n      transition-duration: 0s;\n    }\n  }\n  @media print {\n    :not(.open) .collapsible__wrapper-animation {\n      display: none;\n    }\n  }\n  .collapsible__heading-button button .kol-span-wc {\n    justify-items: start;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .details__heading-button {\n    display: flex;\n  }\n  .details__heading-button button {\n    min-height: auto;\n  }\n  .details__heading-button button .kol-span-wc .span-label {\n    border-bottom-color: grey;\n    border-bottom-style: solid;\n  }\n  .open .details__heading-button .kol-icon::part(icon) {\n    transform: rotate(90deg);\n  }\n}",m=b,u=class{constructor(e){n(this,e),this.nonce=o(),this.catchRef=n=>{this.buttonWcRef=n},this.handleOnClick=n=>{this._open=!this._open,clearTimeout(this.toggleTimeout),this.toggleTimeout=setTimeout((()=>{var e,t;s("toggle",this.host,this._open),null===(t=null===(e=this.state._on)||void 0===e?void 0:e.onToggle)||void 0===t||t.call(e,n,Boolean(this._open))}),25)},this._disabled=!1,this._label=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_label:"",_level:1,_on:{}}}async focus(){await this.kolFocus()}async kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){const{_open:n,_label:i,_disabled:o}=this.state,a="details",s={id:this.nonce,label:i,open:n,disabled:o,level:1,onClick:this.handleOnClick,class:a,HeadingProps:{class:`${a}__heading`},HeadingButtonProps:{ref:this.catchRef,class:`${a}__heading-button`,_icons:"codicon codicon-chevron-right"},ContentProps:{class:`${a}__content indented-text`,wrapperClass:`${a}__wrapper`,animationClass:`${a}__wrapper-animation`}};return e(t,{key:"f1625220d7832b2d95371580b50b771e41b3db35",class:"kol-details"},e(l,Object.assign({key:"fcfcb5eb41b2657a8ef67acd4ef3d86be31a17d1"},s),e("slot",{key:"ef6a5d7ce16cd5e971f84ba18757f490edc218b6"})))}validateDisabled(n){d(this,n)}validateLabel(n){h(this,n,{required:!0})}validateLevel(n){a(this,n)}validateOn(n){p(this,n)}validateOpen(n){c(this,n)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}get host(){return i(this)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};u.style={default:m};export{u as kol_details};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-a0b4dca2.js";import{v as i}from"./align-3f029493.js";import{b as o,s as a}from"./prop.validators-c5e6ad2d.js";import{v as s}from"./label-d70e7c34.js";import{v as l}from"./open-f7031548.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";const r=(n,e)=>{o(n,"_modal",e)},d="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .drawer__wrapper {\n    position: fixed;\n    width: auto;\n    overflow: auto;\n    background-color: white;\n  }\n  .drawer__wrapper--left {\n    top: 0;\n    left: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .drawer__wrapper--right {\n    top: 0;\n    right: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .drawer__wrapper--top {\n    left: 0;\n    top: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .drawer__wrapper--bottom {\n    left: 0;\n    bottom: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .drawer__content {\n    position: relative;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",h=d,c=class{constructor(e){n(this,e),this.getWrapperRef=n=>this.dialogWrapperElement=n,this.getRef=n=>this.dialogElement=n,this._open=void 0,this._align=void 0,this._label=void 0,this._modal=void 0,this._on=void 0,this.state={_label:"",_open:!1,_align:"left"}}async open(){var n,e;this.state=Object.assign(Object.assign({},this.state),{_open:!0}),this.state._modal?null===(n=this.dialogElement)||void 0===n||n.showModal():null===(e=this.dialogElement)||void 0===e||e.show()}async close(){this.state=Object.assign(Object.assign({},this.state),{_open:!1});const n=this.dialogWrapperElement;if(!n)return;"none"===window.getComputedStyle(n).animationName&&this.handleCloseDialog()}renderDialogContent(){const n=this.state._align;return e("div",{ref:this.getWrapperRef,class:`drawer__wrapper drawer__wrapper--${n} ${this.state._open?"drawer__wrapper--open":"is-closing"}`,"aria-label":this.state._label},e("div",{class:"drawer__content"},e("slot",null)))}render(){const n=this.state._modal;return e(t,{key:"0d09864696d1d178fbf93db7e5198147610afd1f",class:"kol-drawer drawer "+(n?"drawer--modal":""),ref:n=>this.hostElement=n},e("dialog",{key:"ed6d121734ab4f5a6ec5b8d7c8090509c7a94d80",class:"drawer__dialog",ref:this.getRef},this.renderDialogContent()))}validateLabel(n){s(this,n,{required:!0})}validateAlign(n){i(this,n)}validateModal(n){r(this,n)}async validateOpen(n){"boolean"==typeof n&&(l(this,n),n?await this.open():await this.close())}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"==typeof n.onClose&&(e.onClose=n.onClose),a(this,"_on",e)}}handleCloseDialog(){var n,e,t;null===(n=this.dialogElement)||void 0===n||n.close(),null===(t=null===(e=this._on)||void 0===e?void 0:e.onClose)||void 0===t||t.call(e)}handleClose(){}handleAnimationEnd(n){n.animationName.includes("slideOut")&&this.handleCloseDialog()}componentDidLoad(){var n,e;null===(n=this.dialogElement)||void 0===n||n.addEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.addEventListener("close",this.handleClose.bind(this))}disconnectedCallback(){var n,e;null===(n=this.dialogElement)||void 0===n||n.removeEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.removeEventListener("close",this.handleClose.bind(this))}async componentWillLoad(){this.validateLabel(this._label),await this.validateOpen(this._open),this.validateAlign(this._align),this.validateModal(this._modal),this.validateOn(this._on)}static get watchers(){return{_label:["validateLabel"],_align:["validateAlign"],_modal:["validateModal"],_open:["validateOpen"],_on:["validateOn"]}}};c.style={default:h};export{c as kol_drawer};
+import{r as n,h as e,H as t}from"./index-4c718166.js";import{v as i}from"./align-3f029493.js";import{b as o,s as a}from"./prop.validators-c5e6ad2d.js";import{v as s}from"./label-d70e7c34.js";import{v as l}from"./open-f7031548.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";const r=(n,e)=>{o(n,"_modal",e)},d="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .drawer__wrapper {\n    position: fixed;\n    width: auto;\n    overflow: auto;\n    background-color: white;\n  }\n  .drawer__wrapper--left {\n    top: 0;\n    left: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .drawer__wrapper--right {\n    top: 0;\n    right: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .drawer__wrapper--top {\n    left: 0;\n    top: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .drawer__wrapper--bottom {\n    left: 0;\n    bottom: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .drawer__content {\n    position: relative;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",h=d,c=class{constructor(e){n(this,e),this.getWrapperRef=n=>this.dialogWrapperElement=n,this.getRef=n=>this.dialogElement=n,this._open=void 0,this._align=void 0,this._label=void 0,this._modal=void 0,this._on=void 0,this.state={_label:"",_open:!1,_align:"left"}}async open(){var n,e;this.state=Object.assign(Object.assign({},this.state),{_open:!0}),this.state._modal?null===(n=this.dialogElement)||void 0===n||n.showModal():null===(e=this.dialogElement)||void 0===e||e.show()}async close(){this.state=Object.assign(Object.assign({},this.state),{_open:!1});const n=this.dialogWrapperElement;if(!n)return;"none"===window.getComputedStyle(n).animationName&&this.handleCloseDialog()}renderDialogContent(){const n=this.state._align;return e("div",{ref:this.getWrapperRef,class:`drawer__wrapper drawer__wrapper--${n} ${this.state._open?"drawer__wrapper--open":"is-closing"}`,"aria-label":this.state._label},e("div",{class:"drawer__content"},e("slot",null)))}render(){const n=this.state._modal;return e(t,{key:"0d09864696d1d178fbf93db7e5198147610afd1f",class:"kol-drawer drawer "+(n?"drawer--modal":""),ref:n=>this.hostElement=n},e("dialog",{key:"ed6d121734ab4f5a6ec5b8d7c8090509c7a94d80",class:"drawer__dialog",ref:this.getRef},this.renderDialogContent()))}validateLabel(n){s(this,n,{required:!0})}validateAlign(n){i(this,n)}validateModal(n){r(this,n)}async validateOpen(n){"boolean"==typeof n&&(l(this,n),n?await this.open():await this.close())}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"==typeof n.onClose&&(e.onClose=n.onClose),a(this,"_on",e)}}handleCloseDialog(){var n,e,t;null===(n=this.dialogElement)||void 0===n||n.close(),null===(t=null===(e=this._on)||void 0===e?void 0:e.onClose)||void 0===t||t.call(e)}handleClose(){}handleAnimationEnd(n){n.animationName.includes("slideOut")&&this.handleCloseDialog()}componentDidLoad(){var n,e;null===(n=this.dialogElement)||void 0===n||n.addEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.addEventListener("close",this.handleClose.bind(this))}disconnectedCallback(){var n,e;null===(n=this.dialogElement)||void 0===n||n.removeEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.removeEventListener("close",this.handleClose.bind(this))}async componentWillLoad(){this.validateLabel(this._label),await this.validateOpen(this._open),this.validateAlign(this._align),this.validateModal(this._modal),this.validateOn(this._on)}static get watchers(){return{_label:["validateLabel"],_align:["validateAlign"],_modal:["validateModal"],_open:["validateOpen"],_on:["validateOn"]}}};c.style={default:h};export{c as kol_drawer};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as t,H as e}from"./index-a0b4dca2.js";import{t as i}from"./i18n-5fe08f1c.js";import{g as o}from"./component-names-aa3cbc3c.js";import{K as a}from"./Alert-a0cdc528.js";import{w as l,b as r,i as s}from"./prop.validators-c5e6ad2d.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./tslib.es6-2e5096f8.js";import"./clsx-09a06a12.js";import"./Heading-781aa65b.js";import"./dev.utils-fab45cbc.js";import"./index-541b643a.js";const d=(n,t)=>{l(n,"errorList",(n=>"object"==typeof n),new Set(["Object"]),t)},c="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :is(a, button) {\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  :is(a, button) .kol-span-wc .span-label {\n    text-decoration-line: underline;\n  }\n  a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n  button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n    text-decoration-thickness: 0.2em;\n  }\n  .skip {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .skip:focus {\n    background-color: #fff;\n    left: unset;\n    padding: 1em;\n    position: unset;\n  }\n  .kol-icon.external-link-icon {\n    display: inline-flex;\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",p=c,h=class{constructor(t){n(this,t),this.onSubmit=n=>{var t,e;n.preventDefault(),n.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onSubmit)&&(null===(e=this.state._on)||void 0===e||e.onSubmit(n))},this.onReset=n=>{var t,e;n.preventDefault(),n.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onReset)&&(null===(e=this.state._on)||void 0===e||e.onReset(n))},this.handleLinkClick=n=>{var t;const e=null===(t=n.target)||void 0===t?void 0:t.href;if(e){const n=new URL(e),t=document.querySelector(n.hash);t&&"function"==typeof t.focus&&(t.scrollIntoView({behavior:"smooth"}),t.focus())}},this._on=void 0,this._requiredText=!0,this._errorList=void 0,this.state={}}renderErrorList(n){return t(a,{type:"error",variant:"card",label:i("kol-error-list-message")},t("nav",{"aria-label":i("kol-error-list")},t("ul",null,null==n?void 0:n.map(((n,e)=>t("li",{key:e},t(o,{_href:n.selector,_label:n.message,_on:{onClick:this.handleLinkClick},ref:n=>{0===e&&(this.errorListElement=n)}})))))))}renderFormElement(){return t("form",{method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},!0===this.state._requiredText?t("p",null,t("div",{class:"mandatory-fields-hint"},i("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?t("p",null,t("div",{class:"mandatory-fields-hint"},this.state._requiredText)):null,t("slot",null))}render(){const n=Array.isArray(this._errorList)&&this._errorList.length>0;return t(e,{key:"287a0d74e3d7d647ce3016cdab697fe4fe7e89fd",class:"kol-form"},n&&this.renderErrorList(this._errorList),this.renderFormElement())}async focusErrorList(){var n;return this._errorList&&this._errorList.length>0&&(null===(n=this.errorListElement)||void 0===n||n.focus()),Promise.resolve()}validateOn(n){"object"==typeof n&&null!==n&&(this.state=Object.assign(Object.assign({},this.state),{_on:n}))}validateRequiredText(n){"boolean"==typeof n?r(this,"_requiredText",n):s(this,"_requiredText",n)}validateErrorList(n){d(this,n)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}};h.style={default:p};export{h as kol_form};
+import{r as n,h as t,H as e}from"./index-4c718166.js";import{t as i}from"./i18n-5fe08f1c.js";import{g as o}from"./component-names-aa3cbc3c.js";import{K as a}from"./Alert-472252f1.js";import{w as l,b as r,i as s}from"./prop.validators-c5e6ad2d.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./tslib.es6-2e5096f8.js";import"./clsx-09a06a12.js";import"./Heading-98b6ed4f.js";import"./dev.utils-fab45cbc.js";import"./index-541b643a.js";const d=(n,t)=>{l(n,"errorList",(n=>"object"==typeof n),new Set(["Object"]),t)},c="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :is(a, button) {\n    align-items: baseline;\n    display: inline-flex;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  :is(a, button) .kol-span-wc .span-label {\n    text-decoration-line: underline;\n  }\n  a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n  button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n    text-decoration-thickness: 0.2em;\n  }\n  .skip {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .skip:focus {\n    background-color: #fff;\n    left: unset;\n    padding: 1em;\n    position: unset;\n  }\n  .kol-icon.external-link-icon {\n    display: inline-flex;\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",p=c,h=class{constructor(t){n(this,t),this.onSubmit=n=>{var t,e;n.preventDefault(),n.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onSubmit)&&(null===(e=this.state._on)||void 0===e||e.onSubmit(n))},this.onReset=n=>{var t,e;n.preventDefault(),n.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onReset)&&(null===(e=this.state._on)||void 0===e||e.onReset(n))},this.handleLinkClick=n=>{var t;const e=null===(t=n.target)||void 0===t?void 0:t.href;if(e){const n=new URL(e),t=document.querySelector(n.hash);t&&"function"==typeof t.focus&&(t.scrollIntoView({behavior:"smooth"}),t.focus())}},this._on=void 0,this._requiredText=!0,this._errorList=void 0,this.state={}}renderErrorList(n){return t(a,{type:"error",variant:"card",label:i("kol-error-list-message")},t("nav",{"aria-label":i("kol-error-list")},t("ul",null,null==n?void 0:n.map(((n,e)=>t("li",{key:e},t(o,{_href:n.selector,_label:n.message,_on:{onClick:this.handleLinkClick},ref:n=>{0===e&&(this.errorListElement=n)}})))))))}renderFormElement(){return t("form",{method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},!0===this.state._requiredText?t("p",null,t("div",{class:"mandatory-fields-hint"},i("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?t("p",null,t("div",{class:"mandatory-fields-hint"},this.state._requiredText)):null,t("slot",null))}render(){const n=Array.isArray(this._errorList)&&this._errorList.length>0;return t(e,{key:"287a0d74e3d7d647ce3016cdab697fe4fe7e89fd",class:"kol-form"},n&&this.renderErrorList(this._errorList),this.renderFormElement())}async focusErrorList(){var n;return this._errorList&&this._errorList.length>0&&(null===(n=this.errorListElement)||void 0===n||n.focus()),Promise.resolve()}validateOn(n){"object"==typeof n&&null!==n&&(this.state=Object.assign(Object.assign({},this.state),{_on:n}))}validateRequiredText(n){"boolean"==typeof n?r(this,"_requiredText",n):s(this,"_requiredText",n)}validateErrorList(n){d(this,n)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}};h.style={default:p};export{h as kol_form};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-a0b4dca2.js";import{w as i}from"./validation-e83461ea.js";import{a}from"./label-d70e7c34.js";import{w as o,i as s}from"./prop.validators-c5e6ad2d.js";import{K as l}from"./Heading-781aa65b.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";import"./tslib.es6-2e5096f8.js";import"./clsx-09a06a12.js";const r=["h1","h2","h3","h4","h5","h6","strong"],d=(n,e)=>{o(n,"_variant",(n=>"string"==typeof n&&r.includes(n)),new Set([`KoliBriHeadingVariant {${r.join(", ")}`]),e)},h="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",c=h,b=class{constructor(e){n(this,e),this._label=void 0,this._level=1,this._secondaryHeadline=void 0,this._variant=void 0,this.state={_label:"",_level:1}}validateLabel(n){a(this,n)}validateLevel(n){i(this,n)}validateSecondaryHeadline(n){s(this,"_secondaryHeadline",n)}validateVariant(n){d(this,n)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateSecondaryHeadline(this._secondaryHeadline),this.validateVariant(this._variant)}render(){const{_secondaryHeadline:n,_label:i,_level:a,_variant:o}=this.state;return e(t,{key:"bfab2225b60f9dd5996a817aa1cb8fbcdc8aa340",class:"kol-heading"},e(l,{key:"006284abc68cd3a3bfbb643c5d72e675806e4047",secondaryHeadline:n,level:a,variant:o},i,e("slot",{key:"d34f814523e61ef56203dcdb98c0ceae90d9dcf7",name:"expert",slot:"expert"})))}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_secondaryHeadline:["validateSecondaryHeadline"],_variant:["validateVariant"]}}};b.style={default:c};export{b as kol_heading};
+import{r as n,h as e,H as t}from"./index-4c718166.js";import{w as i}from"./validation-e83461ea.js";import{a}from"./label-d70e7c34.js";import{w as o,i as s}from"./prop.validators-c5e6ad2d.js";import{K as l}from"./Heading-98b6ed4f.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";import"./tslib.es6-2e5096f8.js";import"./clsx-09a06a12.js";const r=["h1","h2","h3","h4","h5","h6","strong"],d=(n,e)=>{o(n,"_variant",(n=>"string"==typeof n&&r.includes(n)),new Set([`KoliBriHeadingVariant {${r.join(", ")}`]),e)},h="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",c=h,b=class{constructor(e){n(this,e),this._label=void 0,this._level=1,this._secondaryHeadline=void 0,this._variant=void 0,this.state={_label:"",_level:1}}validateLabel(n){a(this,n)}validateLevel(n){i(this,n)}validateSecondaryHeadline(n){s(this,"_secondaryHeadline",n)}validateVariant(n){d(this,n)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateSecondaryHeadline(this._secondaryHeadline),this.validateVariant(this._variant)}render(){const{_secondaryHeadline:n,_label:i,_level:a,_variant:o}=this.state;return e(t,{key:"bfab2225b60f9dd5996a817aa1cb8fbcdc8aa340",class:"kol-heading"},e(l,{key:"006284abc68cd3a3bfbb643c5d72e675806e4047",secondaryHeadline:n,level:a,variant:o},i,e("slot",{key:"d34f814523e61ef56203dcdb98c0ceae90d9dcf7",name:"expert",slot:"expert"})))}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_secondaryHeadline:["validateSecondaryHeadline"],_variant:["validateVariant"]}}};b.style={default:c};export{b as kol_heading};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as o}from"./index-a0b4dca2.js";import{i as c}from"./prop.validators-c5e6ad2d.js";import{v as t}from"./label-d70e7c34.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";const b='/*---------------------------------------------------------------------------------------------\n *  Copyright (c) Microsoft Corporation. All rights reserved.\n *  Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n@font-face {\n  font-family: "codicon";\n  font-display: block;\n  src: url("./codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa") format("truetype");\n}\n.codicon[class*=codicon-] {\n  font: normal normal normal 16px/1 codicon;\n  display: inline-block;\n  text-decoration: none;\n  text-rendering: auto;\n  text-align: center;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  user-select: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n\n/*---------------------\n *  Modifiers\n *-------------------*/\n@keyframes codicon-spin {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.codicon-sync.codicon-modifier-spin,\n.codicon-loading.codicon-modifier-spin,\n.codicon-gear.codicon-modifier-spin {\n  /* Use steps to throttle FPS to reduce CPU usage */\n  animation: codicon-spin 1.5s steps(30) infinite;\n}\n\n.codicon-modifier-disabled {\n  opacity: 0.5;\n}\n\n.codicon-modifier-hidden {\n  opacity: 0;\n}\n\n/* custom speed & easing for loading icon */\n.codicon-loading {\n  animation-duration: 1s !important;\n  animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;\n}\n\n/*---------------------\n *  Icons\n *-------------------*/\n.codicon-add:before {\n  content: "\\ea60";\n}\n\n.codicon-plus:before {\n  content: "\\ea60";\n}\n\n.codicon-gist-new:before {\n  content: "\\ea60";\n}\n\n.codicon-repo-create:before {\n  content: "\\ea60";\n}\n\n.codicon-lightbulb:before {\n  content: "\\ea61";\n}\n\n.codicon-light-bulb:before {\n  content: "\\ea61";\n}\n\n.codicon-repo:before {\n  content: "\\ea62";\n}\n\n.codicon-repo-delete:before {\n  content: "\\ea62";\n}\n\n.codicon-gist-fork:before {\n  content: "\\ea63";\n}\n\n.codicon-repo-forked:before {\n  content: "\\ea63";\n}\n\n.codicon-git-pull-request:before {\n  content: "\\ea64";\n}\n\n.codicon-git-pull-request-abandoned:before {\n  content: "\\ea64";\n}\n\n.codicon-record-keys:before {\n  content: "\\ea65";\n}\n\n.codicon-keyboard:before {\n  content: "\\ea65";\n}\n\n.codicon-tag:before {\n  content: "\\ea66";\n}\n\n.codicon-tag-add:before {\n  content: "\\ea66";\n}\n\n.codicon-tag-remove:before {\n  content: "\\ea66";\n}\n\n.codicon-person:before {\n  content: "\\ea67";\n}\n\n.codicon-person-follow:before {\n  content: "\\ea67";\n}\n\n.codicon-person-outline:before {\n  content: "\\ea67";\n}\n\n.codicon-person-filled:before {\n  content: "\\ea67";\n}\n\n.codicon-git-branch:before {\n  content: "\\ea68";\n}\n\n.codicon-git-branch-create:before {\n  content: "\\ea68";\n}\n\n.codicon-git-branch-delete:before {\n  content: "\\ea68";\n}\n\n.codicon-source-control:before {\n  content: "\\ea68";\n}\n\n.codicon-mirror:before {\n  content: "\\ea69";\n}\n\n.codicon-mirror-public:before {\n  content: "\\ea69";\n}\n\n.codicon-star:before {\n  content: "\\ea6a";\n}\n\n.codicon-star-add:before {\n  content: "\\ea6a";\n}\n\n.codicon-star-delete:before {\n  content: "\\ea6a";\n}\n\n.codicon-star-empty:before {\n  content: "\\ea6a";\n}\n\n.codicon-comment:before {\n  content: "\\ea6b";\n}\n\n.codicon-comment-add:before {\n  content: "\\ea6b";\n}\n\n.codicon-alert:before {\n  content: "\\ea6c";\n}\n\n.codicon-warning:before {\n  content: "\\ea6c";\n}\n\n.codicon-search:before {\n  content: "\\ea6d";\n}\n\n.codicon-search-save:before {\n  content: "\\ea6d";\n}\n\n.codicon-log-out:before {\n  content: "\\ea6e";\n}\n\n.codicon-sign-out:before {\n  content: "\\ea6e";\n}\n\n.codicon-log-in:before {\n  content: "\\ea6f";\n}\n\n.codicon-sign-in:before {\n  content: "\\ea6f";\n}\n\n.codicon-eye:before {\n  content: "\\ea70";\n}\n\n.codicon-eye-unwatch:before {\n  content: "\\ea70";\n}\n\n.codicon-eye-watch:before {\n  content: "\\ea70";\n}\n\n.codicon-circle-filled:before {\n  content: "\\ea71";\n}\n\n.codicon-primitive-dot:before {\n  content: "\\ea71";\n}\n\n.codicon-close-dirty:before {\n  content: "\\ea71";\n}\n\n.codicon-debug-breakpoint:before {\n  content: "\\ea71";\n}\n\n.codicon-debug-breakpoint-disabled:before {\n  content: "\\ea71";\n}\n\n.codicon-debug-hint:before {\n  content: "\\ea71";\n}\n\n.codicon-primitive-square:before {\n  content: "\\ea72";\n}\n\n.codicon-edit:before {\n  content: "\\ea73";\n}\n\n.codicon-pencil:before {\n  content: "\\ea73";\n}\n\n.codicon-info:before {\n  content: "\\ea74";\n}\n\n.codicon-issue-opened:before {\n  content: "\\ea74";\n}\n\n.codicon-gist-private:before {\n  content: "\\ea75";\n}\n\n.codicon-git-fork-private:before {\n  content: "\\ea75";\n}\n\n.codicon-lock:before {\n  content: "\\ea75";\n}\n\n.codicon-mirror-private:before {\n  content: "\\ea75";\n}\n\n.codicon-close:before {\n  content: "\\ea76";\n}\n\n.codicon-remove-close:before {\n  content: "\\ea76";\n}\n\n.codicon-x:before {\n  content: "\\ea76";\n}\n\n.codicon-repo-sync:before {\n  content: "\\ea77";\n}\n\n.codicon-sync:before {\n  content: "\\ea77";\n}\n\n.codicon-clone:before {\n  content: "\\ea78";\n}\n\n.codicon-desktop-download:before {\n  content: "\\ea78";\n}\n\n.codicon-beaker:before {\n  content: "\\ea79";\n}\n\n.codicon-microscope:before {\n  content: "\\ea79";\n}\n\n.codicon-vm:before {\n  content: "\\ea7a";\n}\n\n.codicon-device-desktop:before {\n  content: "\\ea7a";\n}\n\n.codicon-file:before {\n  content: "\\ea7b";\n}\n\n.codicon-file-text:before {\n  content: "\\ea7b";\n}\n\n.codicon-more:before {\n  content: "\\ea7c";\n}\n\n.codicon-ellipsis:before {\n  content: "\\ea7c";\n}\n\n.codicon-kebab-horizontal:before {\n  content: "\\ea7c";\n}\n\n.codicon-mail-reply:before {\n  content: "\\ea7d";\n}\n\n.codicon-reply:before {\n  content: "\\ea7d";\n}\n\n.codicon-organization:before {\n  content: "\\ea7e";\n}\n\n.codicon-organization-filled:before {\n  content: "\\ea7e";\n}\n\n.codicon-organization-outline:before {\n  content: "\\ea7e";\n}\n\n.codicon-new-file:before {\n  content: "\\ea7f";\n}\n\n.codicon-file-add:before {\n  content: "\\ea7f";\n}\n\n.codicon-new-folder:before {\n  content: "\\ea80";\n}\n\n.codicon-file-directory-create:before {\n  content: "\\ea80";\n}\n\n.codicon-trash:before {\n  content: "\\ea81";\n}\n\n.codicon-trashcan:before {\n  content: "\\ea81";\n}\n\n.codicon-history:before {\n  content: "\\ea82";\n}\n\n.codicon-clock:before {\n  content: "\\ea82";\n}\n\n.codicon-folder:before {\n  content: "\\ea83";\n}\n\n.codicon-file-directory:before {\n  content: "\\ea83";\n}\n\n.codicon-symbol-folder:before {\n  content: "\\ea83";\n}\n\n.codicon-logo-github:before {\n  content: "\\ea84";\n}\n\n.codicon-mark-github:before {\n  content: "\\ea84";\n}\n\n.codicon-github:before {\n  content: "\\ea84";\n}\n\n.codicon-terminal:before {\n  content: "\\ea85";\n}\n\n.codicon-console:before {\n  content: "\\ea85";\n}\n\n.codicon-repl:before {\n  content: "\\ea85";\n}\n\n.codicon-zap:before {\n  content: "\\ea86";\n}\n\n.codicon-symbol-event:before {\n  content: "\\ea86";\n}\n\n.codicon-error:before {\n  content: "\\ea87";\n}\n\n.codicon-stop:before {\n  content: "\\ea87";\n}\n\n.codicon-variable:before {\n  content: "\\ea88";\n}\n\n.codicon-symbol-variable:before {\n  content: "\\ea88";\n}\n\n.codicon-array:before {\n  content: "\\ea8a";\n}\n\n.codicon-symbol-array:before {\n  content: "\\ea8a";\n}\n\n.codicon-symbol-module:before {\n  content: "\\ea8b";\n}\n\n.codicon-symbol-package:before {\n  content: "\\ea8b";\n}\n\n.codicon-symbol-namespace:before {\n  content: "\\ea8b";\n}\n\n.codicon-symbol-object:before {\n  content: "\\ea8b";\n}\n\n.codicon-symbol-method:before {\n  content: "\\ea8c";\n}\n\n.codicon-symbol-function:before {\n  content: "\\ea8c";\n}\n\n.codicon-symbol-constructor:before {\n  content: "\\ea8c";\n}\n\n.codicon-symbol-boolean:before {\n  content: "\\ea8f";\n}\n\n.codicon-symbol-null:before {\n  content: "\\ea8f";\n}\n\n.codicon-symbol-numeric:before {\n  content: "\\ea90";\n}\n\n.codicon-symbol-number:before {\n  content: "\\ea90";\n}\n\n.codicon-symbol-structure:before {\n  content: "\\ea91";\n}\n\n.codicon-symbol-struct:before {\n  content: "\\ea91";\n}\n\n.codicon-symbol-parameter:before {\n  content: "\\ea92";\n}\n\n.codicon-symbol-type-parameter:before {\n  content: "\\ea92";\n}\n\n.codicon-symbol-key:before {\n  content: "\\ea93";\n}\n\n.codicon-symbol-text:before {\n  content: "\\ea93";\n}\n\n.codicon-symbol-reference:before {\n  content: "\\ea94";\n}\n\n.codicon-go-to-file:before {\n  content: "\\ea94";\n}\n\n.codicon-symbol-enum:before {\n  content: "\\ea95";\n}\n\n.codicon-symbol-value:before {\n  content: "\\ea95";\n}\n\n.codicon-symbol-ruler:before {\n  content: "\\ea96";\n}\n\n.codicon-symbol-unit:before {\n  content: "\\ea96";\n}\n\n.codicon-activate-breakpoints:before {\n  content: "\\ea97";\n}\n\n.codicon-archive:before {\n  content: "\\ea98";\n}\n\n.codicon-arrow-both:before {\n  content: "\\ea99";\n}\n\n.codicon-arrow-down:before {\n  content: "\\ea9a";\n}\n\n.codicon-arrow-left:before {\n  content: "\\ea9b";\n}\n\n.codicon-arrow-right:before {\n  content: "\\ea9c";\n}\n\n.codicon-arrow-small-down:before {\n  content: "\\ea9d";\n}\n\n.codicon-arrow-small-left:before {\n  content: "\\ea9e";\n}\n\n.codicon-arrow-small-right:before {\n  content: "\\ea9f";\n}\n\n.codicon-arrow-small-up:before {\n  content: "\\eaa0";\n}\n\n.codicon-arrow-up:before {\n  content: "\\eaa1";\n}\n\n.codicon-bell:before {\n  content: "\\eaa2";\n}\n\n.codicon-bold:before {\n  content: "\\eaa3";\n}\n\n.codicon-book:before {\n  content: "\\eaa4";\n}\n\n.codicon-bookmark:before {\n  content: "\\eaa5";\n}\n\n.codicon-debug-breakpoint-conditional-unverified:before {\n  content: "\\eaa6";\n}\n\n.codicon-debug-breakpoint-conditional:before {\n  content: "\\eaa7";\n}\n\n.codicon-debug-breakpoint-conditional-disabled:before {\n  content: "\\eaa7";\n}\n\n.codicon-debug-breakpoint-data-unverified:before {\n  content: "\\eaa8";\n}\n\n.codicon-debug-breakpoint-data:before {\n  content: "\\eaa9";\n}\n\n.codicon-debug-breakpoint-data-disabled:before {\n  content: "\\eaa9";\n}\n\n.codicon-debug-breakpoint-log-unverified:before {\n  content: "\\eaaa";\n}\n\n.codicon-debug-breakpoint-log:before {\n  content: "\\eaab";\n}\n\n.codicon-debug-breakpoint-log-disabled:before {\n  content: "\\eaab";\n}\n\n.codicon-briefcase:before {\n  content: "\\eaac";\n}\n\n.codicon-broadcast:before {\n  content: "\\eaad";\n}\n\n.codicon-browser:before {\n  content: "\\eaae";\n}\n\n.codicon-bug:before {\n  content: "\\eaaf";\n}\n\n.codicon-calendar:before {\n  content: "\\eab0";\n}\n\n.codicon-case-sensitive:before {\n  content: "\\eab1";\n}\n\n.codicon-check:before {\n  content: "\\eab2";\n}\n\n.codicon-checklist:before {\n  content: "\\eab3";\n}\n\n.codicon-chevron-down:before {\n  content: "\\eab4";\n}\n\n.codicon-chevron-left:before {\n  content: "\\eab5";\n}\n\n.codicon-chevron-right:before {\n  content: "\\eab6";\n}\n\n.codicon-chevron-up:before {\n  content: "\\eab7";\n}\n\n.codicon-chrome-close:before {\n  content: "\\eab8";\n}\n\n.codicon-chrome-maximize:before {\n  content: "\\eab9";\n}\n\n.codicon-chrome-minimize:before {\n  content: "\\eaba";\n}\n\n.codicon-chrome-restore:before {\n  content: "\\eabb";\n}\n\n.codicon-circle-outline:before {\n  content: "\\eabc";\n}\n\n.codicon-debug-breakpoint-unverified:before {\n  content: "\\eabc";\n}\n\n.codicon-circle-slash:before {\n  content: "\\eabd";\n}\n\n.codicon-circuit-board:before {\n  content: "\\eabe";\n}\n\n.codicon-clear-all:before {\n  content: "\\eabf";\n}\n\n.codicon-clippy:before {\n  content: "\\eac0";\n}\n\n.codicon-close-all:before {\n  content: "\\eac1";\n}\n\n.codicon-cloud-download:before {\n  content: "\\eac2";\n}\n\n.codicon-cloud-upload:before {\n  content: "\\eac3";\n}\n\n.codicon-code:before {\n  content: "\\eac4";\n}\n\n.codicon-collapse-all:before {\n  content: "\\eac5";\n}\n\n.codicon-color-mode:before {\n  content: "\\eac6";\n}\n\n.codicon-comment-discussion:before {\n  content: "\\eac7";\n}\n\n.codicon-credit-card:before {\n  content: "\\eac9";\n}\n\n.codicon-dash:before {\n  content: "\\eacc";\n}\n\n.codicon-dashboard:before {\n  content: "\\eacd";\n}\n\n.codicon-database:before {\n  content: "\\eace";\n}\n\n.codicon-debug-continue:before {\n  content: "\\eacf";\n}\n\n.codicon-debug-disconnect:before {\n  content: "\\ead0";\n}\n\n.codicon-debug-pause:before {\n  content: "\\ead1";\n}\n\n.codicon-debug-restart:before {\n  content: "\\ead2";\n}\n\n.codicon-debug-start:before {\n  content: "\\ead3";\n}\n\n.codicon-debug-step-into:before {\n  content: "\\ead4";\n}\n\n.codicon-debug-step-out:before {\n  content: "\\ead5";\n}\n\n.codicon-debug-step-over:before {\n  content: "\\ead6";\n}\n\n.codicon-debug-stop:before {\n  content: "\\ead7";\n}\n\n.codicon-debug:before {\n  content: "\\ead8";\n}\n\n.codicon-device-camera-video:before {\n  content: "\\ead9";\n}\n\n.codicon-device-camera:before {\n  content: "\\eada";\n}\n\n.codicon-device-mobile:before {\n  content: "\\eadb";\n}\n\n.codicon-diff-added:before {\n  content: "\\eadc";\n}\n\n.codicon-diff-ignored:before {\n  content: "\\eadd";\n}\n\n.codicon-diff-modified:before {\n  content: "\\eade";\n}\n\n.codicon-diff-removed:before {\n  content: "\\eadf";\n}\n\n.codicon-diff-renamed:before {\n  content: "\\eae0";\n}\n\n.codicon-diff:before {\n  content: "\\eae1";\n}\n\n.codicon-discard:before {\n  content: "\\eae2";\n}\n\n.codicon-editor-layout:before {\n  content: "\\eae3";\n}\n\n.codicon-empty-window:before {\n  content: "\\eae4";\n}\n\n.codicon-exclude:before {\n  content: "\\eae5";\n}\n\n.codicon-extensions:before {\n  content: "\\eae6";\n}\n\n.codicon-eye-closed:before {\n  content: "\\eae7";\n}\n\n.codicon-file-binary:before {\n  content: "\\eae8";\n}\n\n.codicon-file-code:before {\n  content: "\\eae9";\n}\n\n.codicon-file-media:before {\n  content: "\\eaea";\n}\n\n.codicon-file-pdf:before {\n  content: "\\eaeb";\n}\n\n.codicon-file-submodule:before {\n  content: "\\eaec";\n}\n\n.codicon-file-symlink-directory:before {\n  content: "\\eaed";\n}\n\n.codicon-file-symlink-file:before {\n  content: "\\eaee";\n}\n\n.codicon-file-zip:before {\n  content: "\\eaef";\n}\n\n.codicon-files:before {\n  content: "\\eaf0";\n}\n\n.codicon-filter:before {\n  content: "\\eaf1";\n}\n\n.codicon-flame:before {\n  content: "\\eaf2";\n}\n\n.codicon-fold-down:before {\n  content: "\\eaf3";\n}\n\n.codicon-fold-up:before {\n  content: "\\eaf4";\n}\n\n.codicon-fold:before {\n  content: "\\eaf5";\n}\n\n.codicon-folder-active:before {\n  content: "\\eaf6";\n}\n\n.codicon-folder-opened:before {\n  content: "\\eaf7";\n}\n\n.codicon-gear:before {\n  content: "\\eaf8";\n}\n\n.codicon-gift:before {\n  content: "\\eaf9";\n}\n\n.codicon-gist-secret:before {\n  content: "\\eafa";\n}\n\n.codicon-gist:before {\n  content: "\\eafb";\n}\n\n.codicon-git-commit:before {\n  content: "\\eafc";\n}\n\n.codicon-git-compare:before {\n  content: "\\eafd";\n}\n\n.codicon-compare-changes:before {\n  content: "\\eafd";\n}\n\n.codicon-git-merge:before {\n  content: "\\eafe";\n}\n\n.codicon-github-action:before {\n  content: "\\eaff";\n}\n\n.codicon-github-alt:before {\n  content: "\\eb00";\n}\n\n.codicon-globe:before {\n  content: "\\eb01";\n}\n\n.codicon-grabber:before {\n  content: "\\eb02";\n}\n\n.codicon-graph:before {\n  content: "\\eb03";\n}\n\n.codicon-gripper:before {\n  content: "\\eb04";\n}\n\n.codicon-heart:before {\n  content: "\\eb05";\n}\n\n.codicon-home:before {\n  content: "\\eb06";\n}\n\n.codicon-horizontal-rule:before {\n  content: "\\eb07";\n}\n\n.codicon-hubot:before {\n  content: "\\eb08";\n}\n\n.codicon-inbox:before {\n  content: "\\eb09";\n}\n\n.codicon-issue-reopened:before {\n  content: "\\eb0b";\n}\n\n.codicon-issues:before {\n  content: "\\eb0c";\n}\n\n.codicon-italic:before {\n  content: "\\eb0d";\n}\n\n.codicon-jersey:before {\n  content: "\\eb0e";\n}\n\n.codicon-json:before {\n  content: "\\eb0f";\n}\n\n.codicon-kebab-vertical:before {\n  content: "\\eb10";\n}\n\n.codicon-key:before {\n  content: "\\eb11";\n}\n\n.codicon-law:before {\n  content: "\\eb12";\n}\n\n.codicon-lightbulb-autofix:before {\n  content: "\\eb13";\n}\n\n.codicon-link-external:before {\n  content: "\\eb14";\n}\n\n.codicon-link:before {\n  content: "\\eb15";\n}\n\n.codicon-list-ordered:before {\n  content: "\\eb16";\n}\n\n.codicon-list-unordered:before {\n  content: "\\eb17";\n}\n\n.codicon-live-share:before {\n  content: "\\eb18";\n}\n\n.codicon-loading:before {\n  content: "\\eb19";\n}\n\n.codicon-location:before {\n  content: "\\eb1a";\n}\n\n.codicon-mail-read:before {\n  content: "\\eb1b";\n}\n\n.codicon-mail:before {\n  content: "\\eb1c";\n}\n\n.codicon-markdown:before {\n  content: "\\eb1d";\n}\n\n.codicon-megaphone:before {\n  content: "\\eb1e";\n}\n\n.codicon-mention:before {\n  content: "\\eb1f";\n}\n\n.codicon-milestone:before {\n  content: "\\eb20";\n}\n\n.codicon-mortar-board:before {\n  content: "\\eb21";\n}\n\n.codicon-move:before {\n  content: "\\eb22";\n}\n\n.codicon-multiple-windows:before {\n  content: "\\eb23";\n}\n\n.codicon-mute:before {\n  content: "\\eb24";\n}\n\n.codicon-no-newline:before {\n  content: "\\eb25";\n}\n\n.codicon-note:before {\n  content: "\\eb26";\n}\n\n.codicon-octoface:before {\n  content: "\\eb27";\n}\n\n.codicon-open-preview:before {\n  content: "\\eb28";\n}\n\n.codicon-package:before {\n  content: "\\eb29";\n}\n\n.codicon-paintcan:before {\n  content: "\\eb2a";\n}\n\n.codicon-pin:before {\n  content: "\\eb2b";\n}\n\n.codicon-play:before {\n  content: "\\eb2c";\n}\n\n.codicon-run:before {\n  content: "\\eb2c";\n}\n\n.codicon-plug:before {\n  content: "\\eb2d";\n}\n\n.codicon-preserve-case:before {\n  content: "\\eb2e";\n}\n\n.codicon-preview:before {\n  content: "\\eb2f";\n}\n\n.codicon-project:before {\n  content: "\\eb30";\n}\n\n.codicon-pulse:before {\n  content: "\\eb31";\n}\n\n.codicon-question:before {\n  content: "\\eb32";\n}\n\n.codicon-quote:before {\n  content: "\\eb33";\n}\n\n.codicon-radio-tower:before {\n  content: "\\eb34";\n}\n\n.codicon-reactions:before {\n  content: "\\eb35";\n}\n\n.codicon-references:before {\n  content: "\\eb36";\n}\n\n.codicon-refresh:before {\n  content: "\\eb37";\n}\n\n.codicon-regex:before {\n  content: "\\eb38";\n}\n\n.codicon-remote-explorer:before {\n  content: "\\eb39";\n}\n\n.codicon-remote:before {\n  content: "\\eb3a";\n}\n\n.codicon-remove:before {\n  content: "\\eb3b";\n}\n\n.codicon-replace-all:before {\n  content: "\\eb3c";\n}\n\n.codicon-replace:before {\n  content: "\\eb3d";\n}\n\n.codicon-repo-clone:before {\n  content: "\\eb3e";\n}\n\n.codicon-repo-force-push:before {\n  content: "\\eb3f";\n}\n\n.codicon-repo-pull:before {\n  content: "\\eb40";\n}\n\n.codicon-repo-push:before {\n  content: "\\eb41";\n}\n\n.codicon-report:before {\n  content: "\\eb42";\n}\n\n.codicon-request-changes:before {\n  content: "\\eb43";\n}\n\n.codicon-rocket:before {\n  content: "\\eb44";\n}\n\n.codicon-root-folder-opened:before {\n  content: "\\eb45";\n}\n\n.codicon-root-folder:before {\n  content: "\\eb46";\n}\n\n.codicon-rss:before {\n  content: "\\eb47";\n}\n\n.codicon-ruby:before {\n  content: "\\eb48";\n}\n\n.codicon-save-all:before {\n  content: "\\eb49";\n}\n\n.codicon-save-as:before {\n  content: "\\eb4a";\n}\n\n.codicon-save:before {\n  content: "\\eb4b";\n}\n\n.codicon-screen-full:before {\n  content: "\\eb4c";\n}\n\n.codicon-screen-normal:before {\n  content: "\\eb4d";\n}\n\n.codicon-search-stop:before {\n  content: "\\eb4e";\n}\n\n.codicon-server:before {\n  content: "\\eb50";\n}\n\n.codicon-settings-gear:before {\n  content: "\\eb51";\n}\n\n.codicon-settings:before {\n  content: "\\eb52";\n}\n\n.codicon-shield:before {\n  content: "\\eb53";\n}\n\n.codicon-smiley:before {\n  content: "\\eb54";\n}\n\n.codicon-sort-precedence:before {\n  content: "\\eb55";\n}\n\n.codicon-split-horizontal:before {\n  content: "\\eb56";\n}\n\n.codicon-split-vertical:before {\n  content: "\\eb57";\n}\n\n.codicon-squirrel:before {\n  content: "\\eb58";\n}\n\n.codicon-star-full:before {\n  content: "\\eb59";\n}\n\n.codicon-star-half:before {\n  content: "\\eb5a";\n}\n\n.codicon-symbol-class:before {\n  content: "\\eb5b";\n}\n\n.codicon-symbol-color:before {\n  content: "\\eb5c";\n}\n\n.codicon-symbol-constant:before {\n  content: "\\eb5d";\n}\n\n.codicon-symbol-enum-member:before {\n  content: "\\eb5e";\n}\n\n.codicon-symbol-field:before {\n  content: "\\eb5f";\n}\n\n.codicon-symbol-file:before {\n  content: "\\eb60";\n}\n\n.codicon-symbol-interface:before {\n  content: "\\eb61";\n}\n\n.codicon-symbol-keyword:before {\n  content: "\\eb62";\n}\n\n.codicon-symbol-misc:before {\n  content: "\\eb63";\n}\n\n.codicon-symbol-operator:before {\n  content: "\\eb64";\n}\n\n.codicon-symbol-property:before {\n  content: "\\eb65";\n}\n\n.codicon-wrench:before {\n  content: "\\eb65";\n}\n\n.codicon-wrench-subaction:before {\n  content: "\\eb65";\n}\n\n.codicon-symbol-snippet:before {\n  content: "\\eb66";\n}\n\n.codicon-tasklist:before {\n  content: "\\eb67";\n}\n\n.codicon-telescope:before {\n  content: "\\eb68";\n}\n\n.codicon-text-size:before {\n  content: "\\eb69";\n}\n\n.codicon-three-bars:before {\n  content: "\\eb6a";\n}\n\n.codicon-thumbsdown:before {\n  content: "\\eb6b";\n}\n\n.codicon-thumbsup:before {\n  content: "\\eb6c";\n}\n\n.codicon-tools:before {\n  content: "\\eb6d";\n}\n\n.codicon-triangle-down:before {\n  content: "\\eb6e";\n}\n\n.codicon-triangle-left:before {\n  content: "\\eb6f";\n}\n\n.codicon-triangle-right:before {\n  content: "\\eb70";\n}\n\n.codicon-triangle-up:before {\n  content: "\\eb71";\n}\n\n.codicon-twitter:before {\n  content: "\\eb72";\n}\n\n.codicon-unfold:before {\n  content: "\\eb73";\n}\n\n.codicon-unlock:before {\n  content: "\\eb74";\n}\n\n.codicon-unmute:before {\n  content: "\\eb75";\n}\n\n.codicon-unverified:before {\n  content: "\\eb76";\n}\n\n.codicon-verified:before {\n  content: "\\eb77";\n}\n\n.codicon-versions:before {\n  content: "\\eb78";\n}\n\n.codicon-vm-active:before {\n  content: "\\eb79";\n}\n\n.codicon-vm-outline:before {\n  content: "\\eb7a";\n}\n\n.codicon-vm-running:before {\n  content: "\\eb7b";\n}\n\n.codicon-watch:before {\n  content: "\\eb7c";\n}\n\n.codicon-whitespace:before {\n  content: "\\eb7d";\n}\n\n.codicon-whole-word:before {\n  content: "\\eb7e";\n}\n\n.codicon-window:before {\n  content: "\\eb7f";\n}\n\n.codicon-word-wrap:before {\n  content: "\\eb80";\n}\n\n.codicon-zoom-in:before {\n  content: "\\eb81";\n}\n\n.codicon-zoom-out:before {\n  content: "\\eb82";\n}\n\n.codicon-list-filter:before {\n  content: "\\eb83";\n}\n\n.codicon-list-flat:before {\n  content: "\\eb84";\n}\n\n.codicon-list-selection:before {\n  content: "\\eb85";\n}\n\n.codicon-selection:before {\n  content: "\\eb85";\n}\n\n.codicon-list-tree:before {\n  content: "\\eb86";\n}\n\n.codicon-debug-breakpoint-function-unverified:before {\n  content: "\\eb87";\n}\n\n.codicon-debug-breakpoint-function:before {\n  content: "\\eb88";\n}\n\n.codicon-debug-breakpoint-function-disabled:before {\n  content: "\\eb88";\n}\n\n.codicon-debug-stackframe-active:before {\n  content: "\\eb89";\n}\n\n.codicon-circle-small-filled:before {\n  content: "\\eb8a";\n}\n\n.codicon-debug-stackframe-dot:before {\n  content: "\\eb8a";\n}\n\n.codicon-debug-stackframe:before {\n  content: "\\eb8b";\n}\n\n.codicon-debug-stackframe-focused:before {\n  content: "\\eb8b";\n}\n\n.codicon-debug-breakpoint-unsupported:before {\n  content: "\\eb8c";\n}\n\n.codicon-symbol-string:before {\n  content: "\\eb8d";\n}\n\n.codicon-debug-reverse-continue:before {\n  content: "\\eb8e";\n}\n\n.codicon-debug-step-back:before {\n  content: "\\eb8f";\n}\n\n.codicon-debug-restart-frame:before {\n  content: "\\eb90";\n}\n\n.codicon-debug-alt:before {\n  content: "\\eb91";\n}\n\n.codicon-call-incoming:before {\n  content: "\\eb92";\n}\n\n.codicon-call-outgoing:before {\n  content: "\\eb93";\n}\n\n.codicon-menu:before {\n  content: "\\eb94";\n}\n\n.codicon-expand-all:before {\n  content: "\\eb95";\n}\n\n.codicon-feedback:before {\n  content: "\\eb96";\n}\n\n.codicon-group-by-ref-type:before {\n  content: "\\eb97";\n}\n\n.codicon-ungroup-by-ref-type:before {\n  content: "\\eb98";\n}\n\n.codicon-account:before {\n  content: "\\eb99";\n}\n\n.codicon-bell-dot:before {\n  content: "\\eb9a";\n}\n\n.codicon-debug-console:before {\n  content: "\\eb9b";\n}\n\n.codicon-library:before {\n  content: "\\eb9c";\n}\n\n.codicon-output:before {\n  content: "\\eb9d";\n}\n\n.codicon-run-all:before {\n  content: "\\eb9e";\n}\n\n.codicon-sync-ignored:before {\n  content: "\\eb9f";\n}\n\n.codicon-pinned:before {\n  content: "\\eba0";\n}\n\n.codicon-github-inverted:before {\n  content: "\\eba1";\n}\n\n.codicon-server-process:before {\n  content: "\\eba2";\n}\n\n.codicon-server-environment:before {\n  content: "\\eba3";\n}\n\n.codicon-pass:before {\n  content: "\\eba4";\n}\n\n.codicon-issue-closed:before {\n  content: "\\eba4";\n}\n\n.codicon-stop-circle:before {\n  content: "\\eba5";\n}\n\n.codicon-play-circle:before {\n  content: "\\eba6";\n}\n\n.codicon-record:before {\n  content: "\\eba7";\n}\n\n.codicon-debug-alt-small:before {\n  content: "\\eba8";\n}\n\n.codicon-vm-connect:before {\n  content: "\\eba9";\n}\n\n.codicon-cloud:before {\n  content: "\\ebaa";\n}\n\n.codicon-merge:before {\n  content: "\\ebab";\n}\n\n.codicon-export:before {\n  content: "\\ebac";\n}\n\n.codicon-graph-left:before {\n  content: "\\ebad";\n}\n\n.codicon-magnet:before {\n  content: "\\ebae";\n}\n\n.codicon-notebook:before {\n  content: "\\ebaf";\n}\n\n.codicon-redo:before {\n  content: "\\ebb0";\n}\n\n.codicon-check-all:before {\n  content: "\\ebb1";\n}\n\n.codicon-pinned-dirty:before {\n  content: "\\ebb2";\n}\n\n.codicon-pass-filled:before {\n  content: "\\ebb3";\n}\n\n.codicon-circle-large-filled:before {\n  content: "\\ebb4";\n}\n\n.codicon-circle-large-outline:before {\n  content: "\\ebb5";\n}\n\n.codicon-combine:before {\n  content: "\\ebb6";\n}\n\n.codicon-gather:before {\n  content: "\\ebb6";\n}\n\n.codicon-table:before {\n  content: "\\ebb7";\n}\n\n.codicon-variable-group:before {\n  content: "\\ebb8";\n}\n\n.codicon-type-hierarchy:before {\n  content: "\\ebb9";\n}\n\n.codicon-type-hierarchy-sub:before {\n  content: "\\ebba";\n}\n\n.codicon-type-hierarchy-super:before {\n  content: "\\ebbb";\n}\n\n.codicon-git-pull-request-create:before {\n  content: "\\ebbc";\n}\n\n.codicon-run-above:before {\n  content: "\\ebbd";\n}\n\n.codicon-run-below:before {\n  content: "\\ebbe";\n}\n\n.codicon-notebook-template:before {\n  content: "\\ebbf";\n}\n\n.codicon-debug-rerun:before {\n  content: "\\ebc0";\n}\n\n.codicon-workspace-trusted:before {\n  content: "\\ebc1";\n}\n\n.codicon-workspace-untrusted:before {\n  content: "\\ebc2";\n}\n\n.codicon-workspace-unknown:before {\n  content: "\\ebc3";\n}\n\n.codicon-terminal-cmd:before {\n  content: "\\ebc4";\n}\n\n.codicon-terminal-debian:before {\n  content: "\\ebc5";\n}\n\n.codicon-terminal-linux:before {\n  content: "\\ebc6";\n}\n\n.codicon-terminal-powershell:before {\n  content: "\\ebc7";\n}\n\n.codicon-terminal-tmux:before {\n  content: "\\ebc8";\n}\n\n.codicon-terminal-ubuntu:before {\n  content: "\\ebc9";\n}\n\n.codicon-terminal-bash:before {\n  content: "\\ebca";\n}\n\n.codicon-arrow-swap:before {\n  content: "\\ebcb";\n}\n\n.codicon-copy:before {\n  content: "\\ebcc";\n}\n\n.codicon-person-add:before {\n  content: "\\ebcd";\n}\n\n.codicon-filter-filled:before {\n  content: "\\ebce";\n}\n\n.codicon-wand:before {\n  content: "\\ebcf";\n}\n\n.codicon-debug-line-by-line:before {\n  content: "\\ebd0";\n}\n\n.codicon-inspect:before {\n  content: "\\ebd1";\n}\n\n.codicon-layers:before {\n  content: "\\ebd2";\n}\n\n.codicon-layers-dot:before {\n  content: "\\ebd3";\n}\n\n.codicon-layers-active:before {\n  content: "\\ebd4";\n}\n\n.codicon-compass:before {\n  content: "\\ebd5";\n}\n\n.codicon-compass-dot:before {\n  content: "\\ebd6";\n}\n\n.codicon-compass-active:before {\n  content: "\\ebd7";\n}\n\n.codicon-azure:before {\n  content: "\\ebd8";\n}\n\n.codicon-issue-draft:before {\n  content: "\\ebd9";\n}\n\n.codicon-git-pull-request-closed:before {\n  content: "\\ebda";\n}\n\n.codicon-git-pull-request-draft:before {\n  content: "\\ebdb";\n}\n\n.codicon-debug-all:before {\n  content: "\\ebdc";\n}\n\n.codicon-debug-coverage:before {\n  content: "\\ebdd";\n}\n\n.codicon-run-errors:before {\n  content: "\\ebde";\n}\n\n.codicon-folder-library:before {\n  content: "\\ebdf";\n}\n\n.codicon-debug-continue-small:before {\n  content: "\\ebe0";\n}\n\n.codicon-beaker-stop:before {\n  content: "\\ebe1";\n}\n\n.codicon-graph-line:before {\n  content: "\\ebe2";\n}\n\n.codicon-graph-scatter:before {\n  content: "\\ebe3";\n}\n\n.codicon-pie-chart:before {\n  content: "\\ebe4";\n}\n\n.codicon-bracket:before {\n  content: "\\eb0f";\n}\n\n.codicon-bracket-dot:before {\n  content: "\\ebe5";\n}\n\n.codicon-bracket-error:before {\n  content: "\\ebe6";\n}\n\n.codicon-lock-small:before {\n  content: "\\ebe7";\n}\n\n.codicon-azure-devops:before {\n  content: "\\ebe8";\n}\n\n.codicon-verified-filled:before {\n  content: "\\ebe9";\n}\n\n.codicon-newline:before {\n  content: "\\ebea";\n}\n\n.codicon-layout:before {\n  content: "\\ebeb";\n}\n\n.codicon-layout-activitybar-left:before {\n  content: "\\ebec";\n}\n\n.codicon-layout-activitybar-right:before {\n  content: "\\ebed";\n}\n\n.codicon-layout-panel-left:before {\n  content: "\\ebee";\n}\n\n.codicon-layout-panel-center:before {\n  content: "\\ebef";\n}\n\n.codicon-layout-panel-justify:before {\n  content: "\\ebf0";\n}\n\n.codicon-layout-panel-right:before {\n  content: "\\ebf1";\n}\n\n.codicon-layout-panel:before {\n  content: "\\ebf2";\n}\n\n.codicon-layout-sidebar-left:before {\n  content: "\\ebf3";\n}\n\n.codicon-layout-sidebar-right:before {\n  content: "\\ebf4";\n}\n\n.codicon-layout-statusbar:before {\n  content: "\\ebf5";\n}\n\n.codicon-layout-menubar:before {\n  content: "\\ebf6";\n}\n\n.codicon-layout-centered:before {\n  content: "\\ebf7";\n}\n\n.codicon-target:before {\n  content: "\\ebf8";\n}\n\n.codicon-indent:before {\n  content: "\\ebf9";\n}\n\n.codicon-record-small:before {\n  content: "\\ebfa";\n}\n\n.codicon-error-small:before {\n  content: "\\ebfb";\n}\n\n.codicon-arrow-circle-down:before {\n  content: "\\ebfc";\n}\n\n.codicon-arrow-circle-left:before {\n  content: "\\ebfd";\n}\n\n.codicon-arrow-circle-right:before {\n  content: "\\ebfe";\n}\n\n.codicon-arrow-circle-up:before {\n  content: "\\ebff";\n}\n\n.codicon-layout-sidebar-right-off:before {\n  content: "\\ec00";\n}\n\n.codicon-layout-panel-off:before {\n  content: "\\ec01";\n}\n\n.codicon-layout-sidebar-left-off:before {\n  content: "\\ec02";\n}\n\n.codicon-blank:before {\n  content: "\\ec03";\n}\n\n.codicon-heart-filled:before {\n  content: "\\ec04";\n}\n\n.codicon-map:before {\n  content: "\\ec05";\n}\n\n.codicon-map-filled:before {\n  content: "\\ec06";\n}\n\n.codicon-circle-small:before {\n  content: "\\ec07";\n}\n\n.codicon-bell-slash:before {\n  content: "\\ec08";\n}\n\n.codicon-bell-slash-dot:before {\n  content: "\\ec09";\n}\n\n.codicon-comment-unresolved:before {\n  content: "\\ec0a";\n}\n\n.codicon-git-pull-request-go-to-changes:before {\n  content: "\\ec0b";\n}\n\n.codicon-git-pull-request-new-changes:before {\n  content: "\\ec0c";\n}\n\n@layer kol-component {\n  /* :host implicitly inherits font-size, see below */\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    color: inherit;\n    display: contents;\n    line-height: inherit;\n  }\n  /*\n    * The <code>:important</code> is important, because we should always override the font icon style.\n    */\n  :host > i,\n  :host > i:before {\n    font-size: inherit !important;\n  }\n}',r=b,i=class{constructor(e){n(this,e),this._icons=void 0,this._label=void 0,this.state={_icons:"codicon codicon-home",_label:""}}render(){const n=this.state._label.length>0;return e(o,{key:"90a231bcba4710af17702c0a71453256ac7a1e30",exportparts:"icon",class:"kol-icon"},e("i",{key:"28b63d1897c96972431282ffe7d5b8a7d37a7954","aria-hidden":n?void 0:"true","aria-label":n?this.state._label:void 0,class:this.state._icons,part:"icon",role:"img"}))}validateIcons(n){c(this,"_icons",n,{required:!0})}validateLabel(n){t(this,n,{required:!0})}componentWillLoad(){this.validateIcons(this._icons),this.validateLabel(this._label)}static get watchers(){return{_icons:["validateIcons"],_label:["validateLabel"]}}};i.style={default:r};export{i as kol_icon};
+import{r as n,h as e,H as o}from"./index-4c718166.js";import{i as c}from"./prop.validators-c5e6ad2d.js";import{v as t}from"./label-d70e7c34.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";const b='/*---------------------------------------------------------------------------------------------\n *  Copyright (c) Microsoft Corporation. All rights reserved.\n *  Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n@font-face {\n  font-family: "codicon";\n  font-display: block;\n  src: url("./codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa") format("truetype");\n}\n.codicon[class*=codicon-] {\n  font: normal normal normal 16px/1 codicon;\n  display: inline-block;\n  text-decoration: none;\n  text-rendering: auto;\n  text-align: center;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  user-select: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n\n/*---------------------\n *  Modifiers\n *-------------------*/\n@keyframes codicon-spin {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.codicon-sync.codicon-modifier-spin,\n.codicon-loading.codicon-modifier-spin,\n.codicon-gear.codicon-modifier-spin {\n  /* Use steps to throttle FPS to reduce CPU usage */\n  animation: codicon-spin 1.5s steps(30) infinite;\n}\n\n.codicon-modifier-disabled {\n  opacity: 0.5;\n}\n\n.codicon-modifier-hidden {\n  opacity: 0;\n}\n\n/* custom speed & easing for loading icon */\n.codicon-loading {\n  animation-duration: 1s !important;\n  animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;\n}\n\n/*---------------------\n *  Icons\n *-------------------*/\n.codicon-add:before {\n  content: "\\ea60";\n}\n\n.codicon-plus:before {\n  content: "\\ea60";\n}\n\n.codicon-gist-new:before {\n  content: "\\ea60";\n}\n\n.codicon-repo-create:before {\n  content: "\\ea60";\n}\n\n.codicon-lightbulb:before {\n  content: "\\ea61";\n}\n\n.codicon-light-bulb:before {\n  content: "\\ea61";\n}\n\n.codicon-repo:before {\n  content: "\\ea62";\n}\n\n.codicon-repo-delete:before {\n  content: "\\ea62";\n}\n\n.codicon-gist-fork:before {\n  content: "\\ea63";\n}\n\n.codicon-repo-forked:before {\n  content: "\\ea63";\n}\n\n.codicon-git-pull-request:before {\n  content: "\\ea64";\n}\n\n.codicon-git-pull-request-abandoned:before {\n  content: "\\ea64";\n}\n\n.codicon-record-keys:before {\n  content: "\\ea65";\n}\n\n.codicon-keyboard:before {\n  content: "\\ea65";\n}\n\n.codicon-tag:before {\n  content: "\\ea66";\n}\n\n.codicon-tag-add:before {\n  content: "\\ea66";\n}\n\n.codicon-tag-remove:before {\n  content: "\\ea66";\n}\n\n.codicon-person:before {\n  content: "\\ea67";\n}\n\n.codicon-person-follow:before {\n  content: "\\ea67";\n}\n\n.codicon-person-outline:before {\n  content: "\\ea67";\n}\n\n.codicon-person-filled:before {\n  content: "\\ea67";\n}\n\n.codicon-git-branch:before {\n  content: "\\ea68";\n}\n\n.codicon-git-branch-create:before {\n  content: "\\ea68";\n}\n\n.codicon-git-branch-delete:before {\n  content: "\\ea68";\n}\n\n.codicon-source-control:before {\n  content: "\\ea68";\n}\n\n.codicon-mirror:before {\n  content: "\\ea69";\n}\n\n.codicon-mirror-public:before {\n  content: "\\ea69";\n}\n\n.codicon-star:before {\n  content: "\\ea6a";\n}\n\n.codicon-star-add:before {\n  content: "\\ea6a";\n}\n\n.codicon-star-delete:before {\n  content: "\\ea6a";\n}\n\n.codicon-star-empty:before {\n  content: "\\ea6a";\n}\n\n.codicon-comment:before {\n  content: "\\ea6b";\n}\n\n.codicon-comment-add:before {\n  content: "\\ea6b";\n}\n\n.codicon-alert:before {\n  content: "\\ea6c";\n}\n\n.codicon-warning:before {\n  content: "\\ea6c";\n}\n\n.codicon-search:before {\n  content: "\\ea6d";\n}\n\n.codicon-search-save:before {\n  content: "\\ea6d";\n}\n\n.codicon-log-out:before {\n  content: "\\ea6e";\n}\n\n.codicon-sign-out:before {\n  content: "\\ea6e";\n}\n\n.codicon-log-in:before {\n  content: "\\ea6f";\n}\n\n.codicon-sign-in:before {\n  content: "\\ea6f";\n}\n\n.codicon-eye:before {\n  content: "\\ea70";\n}\n\n.codicon-eye-unwatch:before {\n  content: "\\ea70";\n}\n\n.codicon-eye-watch:before {\n  content: "\\ea70";\n}\n\n.codicon-circle-filled:before {\n  content: "\\ea71";\n}\n\n.codicon-primitive-dot:before {\n  content: "\\ea71";\n}\n\n.codicon-close-dirty:before {\n  content: "\\ea71";\n}\n\n.codicon-debug-breakpoint:before {\n  content: "\\ea71";\n}\n\n.codicon-debug-breakpoint-disabled:before {\n  content: "\\ea71";\n}\n\n.codicon-debug-hint:before {\n  content: "\\ea71";\n}\n\n.codicon-primitive-square:before {\n  content: "\\ea72";\n}\n\n.codicon-edit:before {\n  content: "\\ea73";\n}\n\n.codicon-pencil:before {\n  content: "\\ea73";\n}\n\n.codicon-info:before {\n  content: "\\ea74";\n}\n\n.codicon-issue-opened:before {\n  content: "\\ea74";\n}\n\n.codicon-gist-private:before {\n  content: "\\ea75";\n}\n\n.codicon-git-fork-private:before {\n  content: "\\ea75";\n}\n\n.codicon-lock:before {\n  content: "\\ea75";\n}\n\n.codicon-mirror-private:before {\n  content: "\\ea75";\n}\n\n.codicon-close:before {\n  content: "\\ea76";\n}\n\n.codicon-remove-close:before {\n  content: "\\ea76";\n}\n\n.codicon-x:before {\n  content: "\\ea76";\n}\n\n.codicon-repo-sync:before {\n  content: "\\ea77";\n}\n\n.codicon-sync:before {\n  content: "\\ea77";\n}\n\n.codicon-clone:before {\n  content: "\\ea78";\n}\n\n.codicon-desktop-download:before {\n  content: "\\ea78";\n}\n\n.codicon-beaker:before {\n  content: "\\ea79";\n}\n\n.codicon-microscope:before {\n  content: "\\ea79";\n}\n\n.codicon-vm:before {\n  content: "\\ea7a";\n}\n\n.codicon-device-desktop:before {\n  content: "\\ea7a";\n}\n\n.codicon-file:before {\n  content: "\\ea7b";\n}\n\n.codicon-file-text:before {\n  content: "\\ea7b";\n}\n\n.codicon-more:before {\n  content: "\\ea7c";\n}\n\n.codicon-ellipsis:before {\n  content: "\\ea7c";\n}\n\n.codicon-kebab-horizontal:before {\n  content: "\\ea7c";\n}\n\n.codicon-mail-reply:before {\n  content: "\\ea7d";\n}\n\n.codicon-reply:before {\n  content: "\\ea7d";\n}\n\n.codicon-organization:before {\n  content: "\\ea7e";\n}\n\n.codicon-organization-filled:before {\n  content: "\\ea7e";\n}\n\n.codicon-organization-outline:before {\n  content: "\\ea7e";\n}\n\n.codicon-new-file:before {\n  content: "\\ea7f";\n}\n\n.codicon-file-add:before {\n  content: "\\ea7f";\n}\n\n.codicon-new-folder:before {\n  content: "\\ea80";\n}\n\n.codicon-file-directory-create:before {\n  content: "\\ea80";\n}\n\n.codicon-trash:before {\n  content: "\\ea81";\n}\n\n.codicon-trashcan:before {\n  content: "\\ea81";\n}\n\n.codicon-history:before {\n  content: "\\ea82";\n}\n\n.codicon-clock:before {\n  content: "\\ea82";\n}\n\n.codicon-folder:before {\n  content: "\\ea83";\n}\n\n.codicon-file-directory:before {\n  content: "\\ea83";\n}\n\n.codicon-symbol-folder:before {\n  content: "\\ea83";\n}\n\n.codicon-logo-github:before {\n  content: "\\ea84";\n}\n\n.codicon-mark-github:before {\n  content: "\\ea84";\n}\n\n.codicon-github:before {\n  content: "\\ea84";\n}\n\n.codicon-terminal:before {\n  content: "\\ea85";\n}\n\n.codicon-console:before {\n  content: "\\ea85";\n}\n\n.codicon-repl:before {\n  content: "\\ea85";\n}\n\n.codicon-zap:before {\n  content: "\\ea86";\n}\n\n.codicon-symbol-event:before {\n  content: "\\ea86";\n}\n\n.codicon-error:before {\n  content: "\\ea87";\n}\n\n.codicon-stop:before {\n  content: "\\ea87";\n}\n\n.codicon-variable:before {\n  content: "\\ea88";\n}\n\n.codicon-symbol-variable:before {\n  content: "\\ea88";\n}\n\n.codicon-array:before {\n  content: "\\ea8a";\n}\n\n.codicon-symbol-array:before {\n  content: "\\ea8a";\n}\n\n.codicon-symbol-module:before {\n  content: "\\ea8b";\n}\n\n.codicon-symbol-package:before {\n  content: "\\ea8b";\n}\n\n.codicon-symbol-namespace:before {\n  content: "\\ea8b";\n}\n\n.codicon-symbol-object:before {\n  content: "\\ea8b";\n}\n\n.codicon-symbol-method:before {\n  content: "\\ea8c";\n}\n\n.codicon-symbol-function:before {\n  content: "\\ea8c";\n}\n\n.codicon-symbol-constructor:before {\n  content: "\\ea8c";\n}\n\n.codicon-symbol-boolean:before {\n  content: "\\ea8f";\n}\n\n.codicon-symbol-null:before {\n  content: "\\ea8f";\n}\n\n.codicon-symbol-numeric:before {\n  content: "\\ea90";\n}\n\n.codicon-symbol-number:before {\n  content: "\\ea90";\n}\n\n.codicon-symbol-structure:before {\n  content: "\\ea91";\n}\n\n.codicon-symbol-struct:before {\n  content: "\\ea91";\n}\n\n.codicon-symbol-parameter:before {\n  content: "\\ea92";\n}\n\n.codicon-symbol-type-parameter:before {\n  content: "\\ea92";\n}\n\n.codicon-symbol-key:before {\n  content: "\\ea93";\n}\n\n.codicon-symbol-text:before {\n  content: "\\ea93";\n}\n\n.codicon-symbol-reference:before {\n  content: "\\ea94";\n}\n\n.codicon-go-to-file:before {\n  content: "\\ea94";\n}\n\n.codicon-symbol-enum:before {\n  content: "\\ea95";\n}\n\n.codicon-symbol-value:before {\n  content: "\\ea95";\n}\n\n.codicon-symbol-ruler:before {\n  content: "\\ea96";\n}\n\n.codicon-symbol-unit:before {\n  content: "\\ea96";\n}\n\n.codicon-activate-breakpoints:before {\n  content: "\\ea97";\n}\n\n.codicon-archive:before {\n  content: "\\ea98";\n}\n\n.codicon-arrow-both:before {\n  content: "\\ea99";\n}\n\n.codicon-arrow-down:before {\n  content: "\\ea9a";\n}\n\n.codicon-arrow-left:before {\n  content: "\\ea9b";\n}\n\n.codicon-arrow-right:before {\n  content: "\\ea9c";\n}\n\n.codicon-arrow-small-down:before {\n  content: "\\ea9d";\n}\n\n.codicon-arrow-small-left:before {\n  content: "\\ea9e";\n}\n\n.codicon-arrow-small-right:before {\n  content: "\\ea9f";\n}\n\n.codicon-arrow-small-up:before {\n  content: "\\eaa0";\n}\n\n.codicon-arrow-up:before {\n  content: "\\eaa1";\n}\n\n.codicon-bell:before {\n  content: "\\eaa2";\n}\n\n.codicon-bold:before {\n  content: "\\eaa3";\n}\n\n.codicon-book:before {\n  content: "\\eaa4";\n}\n\n.codicon-bookmark:before {\n  content: "\\eaa5";\n}\n\n.codicon-debug-breakpoint-conditional-unverified:before {\n  content: "\\eaa6";\n}\n\n.codicon-debug-breakpoint-conditional:before {\n  content: "\\eaa7";\n}\n\n.codicon-debug-breakpoint-conditional-disabled:before {\n  content: "\\eaa7";\n}\n\n.codicon-debug-breakpoint-data-unverified:before {\n  content: "\\eaa8";\n}\n\n.codicon-debug-breakpoint-data:before {\n  content: "\\eaa9";\n}\n\n.codicon-debug-breakpoint-data-disabled:before {\n  content: "\\eaa9";\n}\n\n.codicon-debug-breakpoint-log-unverified:before {\n  content: "\\eaaa";\n}\n\n.codicon-debug-breakpoint-log:before {\n  content: "\\eaab";\n}\n\n.codicon-debug-breakpoint-log-disabled:before {\n  content: "\\eaab";\n}\n\n.codicon-briefcase:before {\n  content: "\\eaac";\n}\n\n.codicon-broadcast:before {\n  content: "\\eaad";\n}\n\n.codicon-browser:before {\n  content: "\\eaae";\n}\n\n.codicon-bug:before {\n  content: "\\eaaf";\n}\n\n.codicon-calendar:before {\n  content: "\\eab0";\n}\n\n.codicon-case-sensitive:before {\n  content: "\\eab1";\n}\n\n.codicon-check:before {\n  content: "\\eab2";\n}\n\n.codicon-checklist:before {\n  content: "\\eab3";\n}\n\n.codicon-chevron-down:before {\n  content: "\\eab4";\n}\n\n.codicon-chevron-left:before {\n  content: "\\eab5";\n}\n\n.codicon-chevron-right:before {\n  content: "\\eab6";\n}\n\n.codicon-chevron-up:before {\n  content: "\\eab7";\n}\n\n.codicon-chrome-close:before {\n  content: "\\eab8";\n}\n\n.codicon-chrome-maximize:before {\n  content: "\\eab9";\n}\n\n.codicon-chrome-minimize:before {\n  content: "\\eaba";\n}\n\n.codicon-chrome-restore:before {\n  content: "\\eabb";\n}\n\n.codicon-circle-outline:before {\n  content: "\\eabc";\n}\n\n.codicon-debug-breakpoint-unverified:before {\n  content: "\\eabc";\n}\n\n.codicon-circle-slash:before {\n  content: "\\eabd";\n}\n\n.codicon-circuit-board:before {\n  content: "\\eabe";\n}\n\n.codicon-clear-all:before {\n  content: "\\eabf";\n}\n\n.codicon-clippy:before {\n  content: "\\eac0";\n}\n\n.codicon-close-all:before {\n  content: "\\eac1";\n}\n\n.codicon-cloud-download:before {\n  content: "\\eac2";\n}\n\n.codicon-cloud-upload:before {\n  content: "\\eac3";\n}\n\n.codicon-code:before {\n  content: "\\eac4";\n}\n\n.codicon-collapse-all:before {\n  content: "\\eac5";\n}\n\n.codicon-color-mode:before {\n  content: "\\eac6";\n}\n\n.codicon-comment-discussion:before {\n  content: "\\eac7";\n}\n\n.codicon-credit-card:before {\n  content: "\\eac9";\n}\n\n.codicon-dash:before {\n  content: "\\eacc";\n}\n\n.codicon-dashboard:before {\n  content: "\\eacd";\n}\n\n.codicon-database:before {\n  content: "\\eace";\n}\n\n.codicon-debug-continue:before {\n  content: "\\eacf";\n}\n\n.codicon-debug-disconnect:before {\n  content: "\\ead0";\n}\n\n.codicon-debug-pause:before {\n  content: "\\ead1";\n}\n\n.codicon-debug-restart:before {\n  content: "\\ead2";\n}\n\n.codicon-debug-start:before {\n  content: "\\ead3";\n}\n\n.codicon-debug-step-into:before {\n  content: "\\ead4";\n}\n\n.codicon-debug-step-out:before {\n  content: "\\ead5";\n}\n\n.codicon-debug-step-over:before {\n  content: "\\ead6";\n}\n\n.codicon-debug-stop:before {\n  content: "\\ead7";\n}\n\n.codicon-debug:before {\n  content: "\\ead8";\n}\n\n.codicon-device-camera-video:before {\n  content: "\\ead9";\n}\n\n.codicon-device-camera:before {\n  content: "\\eada";\n}\n\n.codicon-device-mobile:before {\n  content: "\\eadb";\n}\n\n.codicon-diff-added:before {\n  content: "\\eadc";\n}\n\n.codicon-diff-ignored:before {\n  content: "\\eadd";\n}\n\n.codicon-diff-modified:before {\n  content: "\\eade";\n}\n\n.codicon-diff-removed:before {\n  content: "\\eadf";\n}\n\n.codicon-diff-renamed:before {\n  content: "\\eae0";\n}\n\n.codicon-diff:before {\n  content: "\\eae1";\n}\n\n.codicon-discard:before {\n  content: "\\eae2";\n}\n\n.codicon-editor-layout:before {\n  content: "\\eae3";\n}\n\n.codicon-empty-window:before {\n  content: "\\eae4";\n}\n\n.codicon-exclude:before {\n  content: "\\eae5";\n}\n\n.codicon-extensions:before {\n  content: "\\eae6";\n}\n\n.codicon-eye-closed:before {\n  content: "\\eae7";\n}\n\n.codicon-file-binary:before {\n  content: "\\eae8";\n}\n\n.codicon-file-code:before {\n  content: "\\eae9";\n}\n\n.codicon-file-media:before {\n  content: "\\eaea";\n}\n\n.codicon-file-pdf:before {\n  content: "\\eaeb";\n}\n\n.codicon-file-submodule:before {\n  content: "\\eaec";\n}\n\n.codicon-file-symlink-directory:before {\n  content: "\\eaed";\n}\n\n.codicon-file-symlink-file:before {\n  content: "\\eaee";\n}\n\n.codicon-file-zip:before {\n  content: "\\eaef";\n}\n\n.codicon-files:before {\n  content: "\\eaf0";\n}\n\n.codicon-filter:before {\n  content: "\\eaf1";\n}\n\n.codicon-flame:before {\n  content: "\\eaf2";\n}\n\n.codicon-fold-down:before {\n  content: "\\eaf3";\n}\n\n.codicon-fold-up:before {\n  content: "\\eaf4";\n}\n\n.codicon-fold:before {\n  content: "\\eaf5";\n}\n\n.codicon-folder-active:before {\n  content: "\\eaf6";\n}\n\n.codicon-folder-opened:before {\n  content: "\\eaf7";\n}\n\n.codicon-gear:before {\n  content: "\\eaf8";\n}\n\n.codicon-gift:before {\n  content: "\\eaf9";\n}\n\n.codicon-gist-secret:before {\n  content: "\\eafa";\n}\n\n.codicon-gist:before {\n  content: "\\eafb";\n}\n\n.codicon-git-commit:before {\n  content: "\\eafc";\n}\n\n.codicon-git-compare:before {\n  content: "\\eafd";\n}\n\n.codicon-compare-changes:before {\n  content: "\\eafd";\n}\n\n.codicon-git-merge:before {\n  content: "\\eafe";\n}\n\n.codicon-github-action:before {\n  content: "\\eaff";\n}\n\n.codicon-github-alt:before {\n  content: "\\eb00";\n}\n\n.codicon-globe:before {\n  content: "\\eb01";\n}\n\n.codicon-grabber:before {\n  content: "\\eb02";\n}\n\n.codicon-graph:before {\n  content: "\\eb03";\n}\n\n.codicon-gripper:before {\n  content: "\\eb04";\n}\n\n.codicon-heart:before {\n  content: "\\eb05";\n}\n\n.codicon-home:before {\n  content: "\\eb06";\n}\n\n.codicon-horizontal-rule:before {\n  content: "\\eb07";\n}\n\n.codicon-hubot:before {\n  content: "\\eb08";\n}\n\n.codicon-inbox:before {\n  content: "\\eb09";\n}\n\n.codicon-issue-reopened:before {\n  content: "\\eb0b";\n}\n\n.codicon-issues:before {\n  content: "\\eb0c";\n}\n\n.codicon-italic:before {\n  content: "\\eb0d";\n}\n\n.codicon-jersey:before {\n  content: "\\eb0e";\n}\n\n.codicon-json:before {\n  content: "\\eb0f";\n}\n\n.codicon-kebab-vertical:before {\n  content: "\\eb10";\n}\n\n.codicon-key:before {\n  content: "\\eb11";\n}\n\n.codicon-law:before {\n  content: "\\eb12";\n}\n\n.codicon-lightbulb-autofix:before {\n  content: "\\eb13";\n}\n\n.codicon-link-external:before {\n  content: "\\eb14";\n}\n\n.codicon-link:before {\n  content: "\\eb15";\n}\n\n.codicon-list-ordered:before {\n  content: "\\eb16";\n}\n\n.codicon-list-unordered:before {\n  content: "\\eb17";\n}\n\n.codicon-live-share:before {\n  content: "\\eb18";\n}\n\n.codicon-loading:before {\n  content: "\\eb19";\n}\n\n.codicon-location:before {\n  content: "\\eb1a";\n}\n\n.codicon-mail-read:before {\n  content: "\\eb1b";\n}\n\n.codicon-mail:before {\n  content: "\\eb1c";\n}\n\n.codicon-markdown:before {\n  content: "\\eb1d";\n}\n\n.codicon-megaphone:before {\n  content: "\\eb1e";\n}\n\n.codicon-mention:before {\n  content: "\\eb1f";\n}\n\n.codicon-milestone:before {\n  content: "\\eb20";\n}\n\n.codicon-mortar-board:before {\n  content: "\\eb21";\n}\n\n.codicon-move:before {\n  content: "\\eb22";\n}\n\n.codicon-multiple-windows:before {\n  content: "\\eb23";\n}\n\n.codicon-mute:before {\n  content: "\\eb24";\n}\n\n.codicon-no-newline:before {\n  content: "\\eb25";\n}\n\n.codicon-note:before {\n  content: "\\eb26";\n}\n\n.codicon-octoface:before {\n  content: "\\eb27";\n}\n\n.codicon-open-preview:before {\n  content: "\\eb28";\n}\n\n.codicon-package:before {\n  content: "\\eb29";\n}\n\n.codicon-paintcan:before {\n  content: "\\eb2a";\n}\n\n.codicon-pin:before {\n  content: "\\eb2b";\n}\n\n.codicon-play:before {\n  content: "\\eb2c";\n}\n\n.codicon-run:before {\n  content: "\\eb2c";\n}\n\n.codicon-plug:before {\n  content: "\\eb2d";\n}\n\n.codicon-preserve-case:before {\n  content: "\\eb2e";\n}\n\n.codicon-preview:before {\n  content: "\\eb2f";\n}\n\n.codicon-project:before {\n  content: "\\eb30";\n}\n\n.codicon-pulse:before {\n  content: "\\eb31";\n}\n\n.codicon-question:before {\n  content: "\\eb32";\n}\n\n.codicon-quote:before {\n  content: "\\eb33";\n}\n\n.codicon-radio-tower:before {\n  content: "\\eb34";\n}\n\n.codicon-reactions:before {\n  content: "\\eb35";\n}\n\n.codicon-references:before {\n  content: "\\eb36";\n}\n\n.codicon-refresh:before {\n  content: "\\eb37";\n}\n\n.codicon-regex:before {\n  content: "\\eb38";\n}\n\n.codicon-remote-explorer:before {\n  content: "\\eb39";\n}\n\n.codicon-remote:before {\n  content: "\\eb3a";\n}\n\n.codicon-remove:before {\n  content: "\\eb3b";\n}\n\n.codicon-replace-all:before {\n  content: "\\eb3c";\n}\n\n.codicon-replace:before {\n  content: "\\eb3d";\n}\n\n.codicon-repo-clone:before {\n  content: "\\eb3e";\n}\n\n.codicon-repo-force-push:before {\n  content: "\\eb3f";\n}\n\n.codicon-repo-pull:before {\n  content: "\\eb40";\n}\n\n.codicon-repo-push:before {\n  content: "\\eb41";\n}\n\n.codicon-report:before {\n  content: "\\eb42";\n}\n\n.codicon-request-changes:before {\n  content: "\\eb43";\n}\n\n.codicon-rocket:before {\n  content: "\\eb44";\n}\n\n.codicon-root-folder-opened:before {\n  content: "\\eb45";\n}\n\n.codicon-root-folder:before {\n  content: "\\eb46";\n}\n\n.codicon-rss:before {\n  content: "\\eb47";\n}\n\n.codicon-ruby:before {\n  content: "\\eb48";\n}\n\n.codicon-save-all:before {\n  content: "\\eb49";\n}\n\n.codicon-save-as:before {\n  content: "\\eb4a";\n}\n\n.codicon-save:before {\n  content: "\\eb4b";\n}\n\n.codicon-screen-full:before {\n  content: "\\eb4c";\n}\n\n.codicon-screen-normal:before {\n  content: "\\eb4d";\n}\n\n.codicon-search-stop:before {\n  content: "\\eb4e";\n}\n\n.codicon-server:before {\n  content: "\\eb50";\n}\n\n.codicon-settings-gear:before {\n  content: "\\eb51";\n}\n\n.codicon-settings:before {\n  content: "\\eb52";\n}\n\n.codicon-shield:before {\n  content: "\\eb53";\n}\n\n.codicon-smiley:before {\n  content: "\\eb54";\n}\n\n.codicon-sort-precedence:before {\n  content: "\\eb55";\n}\n\n.codicon-split-horizontal:before {\n  content: "\\eb56";\n}\n\n.codicon-split-vertical:before {\n  content: "\\eb57";\n}\n\n.codicon-squirrel:before {\n  content: "\\eb58";\n}\n\n.codicon-star-full:before {\n  content: "\\eb59";\n}\n\n.codicon-star-half:before {\n  content: "\\eb5a";\n}\n\n.codicon-symbol-class:before {\n  content: "\\eb5b";\n}\n\n.codicon-symbol-color:before {\n  content: "\\eb5c";\n}\n\n.codicon-symbol-constant:before {\n  content: "\\eb5d";\n}\n\n.codicon-symbol-enum-member:before {\n  content: "\\eb5e";\n}\n\n.codicon-symbol-field:before {\n  content: "\\eb5f";\n}\n\n.codicon-symbol-file:before {\n  content: "\\eb60";\n}\n\n.codicon-symbol-interface:before {\n  content: "\\eb61";\n}\n\n.codicon-symbol-keyword:before {\n  content: "\\eb62";\n}\n\n.codicon-symbol-misc:before {\n  content: "\\eb63";\n}\n\n.codicon-symbol-operator:before {\n  content: "\\eb64";\n}\n\n.codicon-symbol-property:before {\n  content: "\\eb65";\n}\n\n.codicon-wrench:before {\n  content: "\\eb65";\n}\n\n.codicon-wrench-subaction:before {\n  content: "\\eb65";\n}\n\n.codicon-symbol-snippet:before {\n  content: "\\eb66";\n}\n\n.codicon-tasklist:before {\n  content: "\\eb67";\n}\n\n.codicon-telescope:before {\n  content: "\\eb68";\n}\n\n.codicon-text-size:before {\n  content: "\\eb69";\n}\n\n.codicon-three-bars:before {\n  content: "\\eb6a";\n}\n\n.codicon-thumbsdown:before {\n  content: "\\eb6b";\n}\n\n.codicon-thumbsup:before {\n  content: "\\eb6c";\n}\n\n.codicon-tools:before {\n  content: "\\eb6d";\n}\n\n.codicon-triangle-down:before {\n  content: "\\eb6e";\n}\n\n.codicon-triangle-left:before {\n  content: "\\eb6f";\n}\n\n.codicon-triangle-right:before {\n  content: "\\eb70";\n}\n\n.codicon-triangle-up:before {\n  content: "\\eb71";\n}\n\n.codicon-twitter:before {\n  content: "\\eb72";\n}\n\n.codicon-unfold:before {\n  content: "\\eb73";\n}\n\n.codicon-unlock:before {\n  content: "\\eb74";\n}\n\n.codicon-unmute:before {\n  content: "\\eb75";\n}\n\n.codicon-unverified:before {\n  content: "\\eb76";\n}\n\n.codicon-verified:before {\n  content: "\\eb77";\n}\n\n.codicon-versions:before {\n  content: "\\eb78";\n}\n\n.codicon-vm-active:before {\n  content: "\\eb79";\n}\n\n.codicon-vm-outline:before {\n  content: "\\eb7a";\n}\n\n.codicon-vm-running:before {\n  content: "\\eb7b";\n}\n\n.codicon-watch:before {\n  content: "\\eb7c";\n}\n\n.codicon-whitespace:before {\n  content: "\\eb7d";\n}\n\n.codicon-whole-word:before {\n  content: "\\eb7e";\n}\n\n.codicon-window:before {\n  content: "\\eb7f";\n}\n\n.codicon-word-wrap:before {\n  content: "\\eb80";\n}\n\n.codicon-zoom-in:before {\n  content: "\\eb81";\n}\n\n.codicon-zoom-out:before {\n  content: "\\eb82";\n}\n\n.codicon-list-filter:before {\n  content: "\\eb83";\n}\n\n.codicon-list-flat:before {\n  content: "\\eb84";\n}\n\n.codicon-list-selection:before {\n  content: "\\eb85";\n}\n\n.codicon-selection:before {\n  content: "\\eb85";\n}\n\n.codicon-list-tree:before {\n  content: "\\eb86";\n}\n\n.codicon-debug-breakpoint-function-unverified:before {\n  content: "\\eb87";\n}\n\n.codicon-debug-breakpoint-function:before {\n  content: "\\eb88";\n}\n\n.codicon-debug-breakpoint-function-disabled:before {\n  content: "\\eb88";\n}\n\n.codicon-debug-stackframe-active:before {\n  content: "\\eb89";\n}\n\n.codicon-circle-small-filled:before {\n  content: "\\eb8a";\n}\n\n.codicon-debug-stackframe-dot:before {\n  content: "\\eb8a";\n}\n\n.codicon-debug-stackframe:before {\n  content: "\\eb8b";\n}\n\n.codicon-debug-stackframe-focused:before {\n  content: "\\eb8b";\n}\n\n.codicon-debug-breakpoint-unsupported:before {\n  content: "\\eb8c";\n}\n\n.codicon-symbol-string:before {\n  content: "\\eb8d";\n}\n\n.codicon-debug-reverse-continue:before {\n  content: "\\eb8e";\n}\n\n.codicon-debug-step-back:before {\n  content: "\\eb8f";\n}\n\n.codicon-debug-restart-frame:before {\n  content: "\\eb90";\n}\n\n.codicon-debug-alt:before {\n  content: "\\eb91";\n}\n\n.codicon-call-incoming:before {\n  content: "\\eb92";\n}\n\n.codicon-call-outgoing:before {\n  content: "\\eb93";\n}\n\n.codicon-menu:before {\n  content: "\\eb94";\n}\n\n.codicon-expand-all:before {\n  content: "\\eb95";\n}\n\n.codicon-feedback:before {\n  content: "\\eb96";\n}\n\n.codicon-group-by-ref-type:before {\n  content: "\\eb97";\n}\n\n.codicon-ungroup-by-ref-type:before {\n  content: "\\eb98";\n}\n\n.codicon-account:before {\n  content: "\\eb99";\n}\n\n.codicon-bell-dot:before {\n  content: "\\eb9a";\n}\n\n.codicon-debug-console:before {\n  content: "\\eb9b";\n}\n\n.codicon-library:before {\n  content: "\\eb9c";\n}\n\n.codicon-output:before {\n  content: "\\eb9d";\n}\n\n.codicon-run-all:before {\n  content: "\\eb9e";\n}\n\n.codicon-sync-ignored:before {\n  content: "\\eb9f";\n}\n\n.codicon-pinned:before {\n  content: "\\eba0";\n}\n\n.codicon-github-inverted:before {\n  content: "\\eba1";\n}\n\n.codicon-server-process:before {\n  content: "\\eba2";\n}\n\n.codicon-server-environment:before {\n  content: "\\eba3";\n}\n\n.codicon-pass:before {\n  content: "\\eba4";\n}\n\n.codicon-issue-closed:before {\n  content: "\\eba4";\n}\n\n.codicon-stop-circle:before {\n  content: "\\eba5";\n}\n\n.codicon-play-circle:before {\n  content: "\\eba6";\n}\n\n.codicon-record:before {\n  content: "\\eba7";\n}\n\n.codicon-debug-alt-small:before {\n  content: "\\eba8";\n}\n\n.codicon-vm-connect:before {\n  content: "\\eba9";\n}\n\n.codicon-cloud:before {\n  content: "\\ebaa";\n}\n\n.codicon-merge:before {\n  content: "\\ebab";\n}\n\n.codicon-export:before {\n  content: "\\ebac";\n}\n\n.codicon-graph-left:before {\n  content: "\\ebad";\n}\n\n.codicon-magnet:before {\n  content: "\\ebae";\n}\n\n.codicon-notebook:before {\n  content: "\\ebaf";\n}\n\n.codicon-redo:before {\n  content: "\\ebb0";\n}\n\n.codicon-check-all:before {\n  content: "\\ebb1";\n}\n\n.codicon-pinned-dirty:before {\n  content: "\\ebb2";\n}\n\n.codicon-pass-filled:before {\n  content: "\\ebb3";\n}\n\n.codicon-circle-large-filled:before {\n  content: "\\ebb4";\n}\n\n.codicon-circle-large-outline:before {\n  content: "\\ebb5";\n}\n\n.codicon-combine:before {\n  content: "\\ebb6";\n}\n\n.codicon-gather:before {\n  content: "\\ebb6";\n}\n\n.codicon-table:before {\n  content: "\\ebb7";\n}\n\n.codicon-variable-group:before {\n  content: "\\ebb8";\n}\n\n.codicon-type-hierarchy:before {\n  content: "\\ebb9";\n}\n\n.codicon-type-hierarchy-sub:before {\n  content: "\\ebba";\n}\n\n.codicon-type-hierarchy-super:before {\n  content: "\\ebbb";\n}\n\n.codicon-git-pull-request-create:before {\n  content: "\\ebbc";\n}\n\n.codicon-run-above:before {\n  content: "\\ebbd";\n}\n\n.codicon-run-below:before {\n  content: "\\ebbe";\n}\n\n.codicon-notebook-template:before {\n  content: "\\ebbf";\n}\n\n.codicon-debug-rerun:before {\n  content: "\\ebc0";\n}\n\n.codicon-workspace-trusted:before {\n  content: "\\ebc1";\n}\n\n.codicon-workspace-untrusted:before {\n  content: "\\ebc2";\n}\n\n.codicon-workspace-unknown:before {\n  content: "\\ebc3";\n}\n\n.codicon-terminal-cmd:before {\n  content: "\\ebc4";\n}\n\n.codicon-terminal-debian:before {\n  content: "\\ebc5";\n}\n\n.codicon-terminal-linux:before {\n  content: "\\ebc6";\n}\n\n.codicon-terminal-powershell:before {\n  content: "\\ebc7";\n}\n\n.codicon-terminal-tmux:before {\n  content: "\\ebc8";\n}\n\n.codicon-terminal-ubuntu:before {\n  content: "\\ebc9";\n}\n\n.codicon-terminal-bash:before {\n  content: "\\ebca";\n}\n\n.codicon-arrow-swap:before {\n  content: "\\ebcb";\n}\n\n.codicon-copy:before {\n  content: "\\ebcc";\n}\n\n.codicon-person-add:before {\n  content: "\\ebcd";\n}\n\n.codicon-filter-filled:before {\n  content: "\\ebce";\n}\n\n.codicon-wand:before {\n  content: "\\ebcf";\n}\n\n.codicon-debug-line-by-line:before {\n  content: "\\ebd0";\n}\n\n.codicon-inspect:before {\n  content: "\\ebd1";\n}\n\n.codicon-layers:before {\n  content: "\\ebd2";\n}\n\n.codicon-layers-dot:before {\n  content: "\\ebd3";\n}\n\n.codicon-layers-active:before {\n  content: "\\ebd4";\n}\n\n.codicon-compass:before {\n  content: "\\ebd5";\n}\n\n.codicon-compass-dot:before {\n  content: "\\ebd6";\n}\n\n.codicon-compass-active:before {\n  content: "\\ebd7";\n}\n\n.codicon-azure:before {\n  content: "\\ebd8";\n}\n\n.codicon-issue-draft:before {\n  content: "\\ebd9";\n}\n\n.codicon-git-pull-request-closed:before {\n  content: "\\ebda";\n}\n\n.codicon-git-pull-request-draft:before {\n  content: "\\ebdb";\n}\n\n.codicon-debug-all:before {\n  content: "\\ebdc";\n}\n\n.codicon-debug-coverage:before {\n  content: "\\ebdd";\n}\n\n.codicon-run-errors:before {\n  content: "\\ebde";\n}\n\n.codicon-folder-library:before {\n  content: "\\ebdf";\n}\n\n.codicon-debug-continue-small:before {\n  content: "\\ebe0";\n}\n\n.codicon-beaker-stop:before {\n  content: "\\ebe1";\n}\n\n.codicon-graph-line:before {\n  content: "\\ebe2";\n}\n\n.codicon-graph-scatter:before {\n  content: "\\ebe3";\n}\n\n.codicon-pie-chart:before {\n  content: "\\ebe4";\n}\n\n.codicon-bracket:before {\n  content: "\\eb0f";\n}\n\n.codicon-bracket-dot:before {\n  content: "\\ebe5";\n}\n\n.codicon-bracket-error:before {\n  content: "\\ebe6";\n}\n\n.codicon-lock-small:before {\n  content: "\\ebe7";\n}\n\n.codicon-azure-devops:before {\n  content: "\\ebe8";\n}\n\n.codicon-verified-filled:before {\n  content: "\\ebe9";\n}\n\n.codicon-newline:before {\n  content: "\\ebea";\n}\n\n.codicon-layout:before {\n  content: "\\ebeb";\n}\n\n.codicon-layout-activitybar-left:before {\n  content: "\\ebec";\n}\n\n.codicon-layout-activitybar-right:before {\n  content: "\\ebed";\n}\n\n.codicon-layout-panel-left:before {\n  content: "\\ebee";\n}\n\n.codicon-layout-panel-center:before {\n  content: "\\ebef";\n}\n\n.codicon-layout-panel-justify:before {\n  content: "\\ebf0";\n}\n\n.codicon-layout-panel-right:before {\n  content: "\\ebf1";\n}\n\n.codicon-layout-panel:before {\n  content: "\\ebf2";\n}\n\n.codicon-layout-sidebar-left:before {\n  content: "\\ebf3";\n}\n\n.codicon-layout-sidebar-right:before {\n  content: "\\ebf4";\n}\n\n.codicon-layout-statusbar:before {\n  content: "\\ebf5";\n}\n\n.codicon-layout-menubar:before {\n  content: "\\ebf6";\n}\n\n.codicon-layout-centered:before {\n  content: "\\ebf7";\n}\n\n.codicon-target:before {\n  content: "\\ebf8";\n}\n\n.codicon-indent:before {\n  content: "\\ebf9";\n}\n\n.codicon-record-small:before {\n  content: "\\ebfa";\n}\n\n.codicon-error-small:before {\n  content: "\\ebfb";\n}\n\n.codicon-arrow-circle-down:before {\n  content: "\\ebfc";\n}\n\n.codicon-arrow-circle-left:before {\n  content: "\\ebfd";\n}\n\n.codicon-arrow-circle-right:before {\n  content: "\\ebfe";\n}\n\n.codicon-arrow-circle-up:before {\n  content: "\\ebff";\n}\n\n.codicon-layout-sidebar-right-off:before {\n  content: "\\ec00";\n}\n\n.codicon-layout-panel-off:before {\n  content: "\\ec01";\n}\n\n.codicon-layout-sidebar-left-off:before {\n  content: "\\ec02";\n}\n\n.codicon-blank:before {\n  content: "\\ec03";\n}\n\n.codicon-heart-filled:before {\n  content: "\\ec04";\n}\n\n.codicon-map:before {\n  content: "\\ec05";\n}\n\n.codicon-map-filled:before {\n  content: "\\ec06";\n}\n\n.codicon-circle-small:before {\n  content: "\\ec07";\n}\n\n.codicon-bell-slash:before {\n  content: "\\ec08";\n}\n\n.codicon-bell-slash-dot:before {\n  content: "\\ec09";\n}\n\n.codicon-comment-unresolved:before {\n  content: "\\ec0a";\n}\n\n.codicon-git-pull-request-go-to-changes:before {\n  content: "\\ec0b";\n}\n\n.codicon-git-pull-request-new-changes:before {\n  content: "\\ec0c";\n}\n\n@layer kol-component {\n  /* :host implicitly inherits font-size, see below */\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    color: inherit;\n    display: contents;\n    line-height: inherit;\n  }\n  /*\n    * The <code>:important</code> is important, because we should always override the font icon style.\n    */\n  :host > i,\n  :host > i:before {\n    font-size: inherit !important;\n  }\n}',r=b,i=class{constructor(e){n(this,e),this._icons=void 0,this._label=void 0,this.state={_icons:"codicon codicon-home",_label:""}}render(){const n=this.state._label.length>0;return e(o,{key:"90a231bcba4710af17702c0a71453256ac7a1e30",exportparts:"icon",class:"kol-icon"},e("i",{key:"28b63d1897c96972431282ffe7d5b8a7d37a7954","aria-hidden":n?void 0:"true","aria-label":n?this.state._label:void 0,class:this.state._icons,part:"icon",role:"img"}))}validateIcons(n){c(this,"_icons",n,{required:!0})}validateLabel(n){t(this,n,{required:!0})}componentWillLoad(){this.validateIcons(this._icons),this.validateLabel(this._label)}static get watchers(){return{_icons:["validateIcons"],_label:["validateLabel"]}}};i.style={default:r};export{i as kol_icon};

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

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

package/dist/kolibri/kol-indented-text-wc.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as c,H as t}from"./index-a0b4dca2.js";const s=class{constructor(c){e(this,c),this.state={}}render(){return c(t,{key:"22f2e054e07ccb74cbc702ed9cb7641e874ecb50",class:"kol-indented-text-wc"},c("div",{key:"2eac3286c74fec80527073f1bd0cc373b8461f48"},c("slot",{key:"136e1fa02c44fe282291fe719d88469b4e52403c"})))}};export{s as kol_indented_text_wc};
+import{r as e,h as c,H as t}from"./index-4c718166.js";const s=class{constructor(c){e(this,c),this.state={}}render(){return c(t,{key:"22f2e054e07ccb74cbc702ed9cb7641e874ecb50",class:"kol-indented-text-wc"},c("div",{key:"2eac3286c74fec80527073f1bd0cc373b8461f48"},c("slot",{key:"136e1fa02c44fe282291fe719d88469b4e52403c"})))}};export{s as kol_indented_text_wc};

package/dist/kolibri/kol-indented-text.entry.js

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