@public-ui/components 1.5.0-rc.7 → 1.5.0-rc.9

package/dist/components/component.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement as HTMLElement$1,h,Host}from"@stencil/core/internal/client";import{b as watchValidator,e as rgbaConvert,f as s,h as watchNumber,i as a11yHint,j as setEventTargetAndStopPropagation,K as KoliBriDevHelper,k as getExperimalMode,d as devHint,l as getDocument,n as nonce,w as watchString,p as processEnv,m as propergateFocus,o as mapStringOrBoolean2String,q as mapBoolean2String,t as watchBoolean,u as a11yHintDisabled,v as setState,x as featureHint,y as objectObjectHandler,z as parseJson}from"./prop.validators.js";import{d as defineCustomElement$3,v as validateAriaLabelWithLabel,a as validateIcon,w as watchIconAlign,b as validateLabelWithAriaLabel,c as validateLabel}from"./component3.js";import{c as colorRgba}from"./index2.js";import{d as defineCustomElement$4}from"./component2.js";const watchTooltipAlignment=(t,e,o)=>{watchValidator(t,e,(t=>"top"===t||"right"===t||"bottom"===t||"left"===t),new Set(["Alignment {top, right, buttom, left}"]),o,{defaultValue:"top"})},getContrastYIQ=(t,e,o)=>(299*t+587*e+114*o)/1e3>=128?-1:1,calcColorContrast=(t,e,o,i=1)=>{const n=[Math.max(Math.min(Math.round(e[0]+i*Math.max(1,e[0]/100)),255),0),Math.max(Math.min(Math.round(e[1]+i*Math.max(1,e[1]/100)),255),0),Math.max(Math.min(Math.round(e[2]+i*Math.max(1,e[2]/100)),255),0)],a=s(rgbaConvert.hex(`rgba(${t.join(",")},1)`),rgbaConvert.hex(`rgba(${n.join(",")},1)`)),l=n[0]+n[1]+n[2];return 0===l||765===l||a>o?{background:t,foreground:n,contrast:a}:calcColorContrast(t,n,o,i)},cache=new Map,getColorContrast=(t,e,o,i=1)=>{if(cache.has(t))return cache.get(t);const n=calcColorContrast(t,e,o,i);return cache.set(t,n),n},createContrastColorPair=(t,e=7)=>{let o=[0,0,0,1],i=[255,255,255,1];"string"==typeof t?(o=colorRgba(t),i=o):"object"==typeof t&&null!==t&&"string"==typeof t.background&&"string"==typeof t.foreground&&(o=colorRgba(t.background),i="string"==typeof t.foreground?colorRgba(t.foreground):o);const n=(a=o[0],s=o[1],l=o[2],(299*a+587*s+114*l)/1e3>=128?-1:1);var a,s,l;const r=getColorContrast([o[0],o[1],o[2]],[i[0],i[1],i[2]],e,n);return i=[...r.foreground,1],{background:rgbaConvert.hex(`rgba(${o.join(",")})`),foreground:rgbaConvert.hex(`rgba(${i.join(",")})`),contrast:r.contrast}},options={hooks:{afterPatch:t=>{-1!==t&&0!==t&&a11yHint("Don’t Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},validateTabIndex=(t,e)=>{watchNumber(t,"_tabIndex",e,options)},searchFormElement=t=>{for(getExperimalMode()&&(devHint("↓ Search form element start."),console.log(t));t instanceof HTMLElement&&"FORM"!==t.tagName&&"KOL-FORM"!==t.tagName;)t=t.parentElement instanceof HTMLElement?t.parentElement:t.parentNode instanceof ShadowRoot?t.parentNode.host:null,getExperimalMode()&&console.log(t);return getExperimalMode()&&devHint("↑ Search form element finished."),t},propergateResetEventToForm=(t={})=>{const e=searchFormElement(t.form);if(e instanceof HTMLElement){const t=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===e.tagName)setEventTargetAndStopPropagation(t,e),e.dispatchEvent(t);else if("KOL-FORM"===e.tagName){setEventTargetAndStopPropagation(t,KoliBriDevHelper.querySelector("form",e));const o=e;"object"==typeof o._on&&null!==typeof o._on&&"function"==typeof o._on.onReset&&o._on.onReset(t)}}},propergateSubmitEventToForm=(t={})=>{const e=searchFormElement(t.form);if(e instanceof HTMLElement){const t=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:e});if("FORM"===e.tagName)setEventTargetAndStopPropagation(t,e),e.dispatchEvent(t);else if("KOL-FORM"===e.tagName){setEventTargetAndStopPropagation(t,KoliBriDevHelper.querySelector("form",e));const o=e;"object"==typeof o._on&&null!==typeof o._on&&"function"==typeof o._on.onSubmit&&o._on.onSubmit(t)}}},watchButtonType=(t,e,o)=>{watchValidator(t,e,(t=>"button"===t||"reset"===t||"submit"===t),new Set(["KoliBriButtonType {button, reset, submit}"]),o)},watchButtonVariant=(t,e,o)=>{watchValidator(t,e,(t=>"primary"===t||"secondary"===t||"normal"===t||"danger"===t||"ghost"===t||"custom"===t),new Set(["KoliBriButtonVariant {primary, secondary, normal, danger, ghost, custom}"]),o,{defaultValue:"normal"})};function getAlignment(t){return t.split("-")[1]}function getLengthFromAxis(t){return"y"===t?"height":"width"}function getSide(t){return t.split("-")[0]}function getMainAxisFromPlacement(t){return["top","bottom"].includes(getSide(t))?"x":"y"}function computeCoordsFromPlacement(t,e,o){let{reference:i,floating:n}=t;const a=i.x+i.width/2-n.width/2,s=i.y+i.height/2-n.height/2,l=getMainAxisFromPlacement(e),r=getLengthFromAxis(l),c=i[r]/2-n[r]/2,d="x"===l;let u;switch(getSide(e)){case"top":u={x:a,y:i.y-n.height};break;case"bottom":u={x:a,y:i.y+i.height};break;case"right":u={x:i.x+i.width,y:s};break;case"left":u={x:i.x-n.width,y:s};break;default:u={x:i.x,y:i.y}}switch(getAlignment(e)){case"start":u[l]-=c*(o&&d?-1:1);break;case"end":u[l]+=c*(o&&d?-1:1)}return u}const computePosition$1=async(t,e,o)=>{const{placement:i="bottom",strategy:n="absolute",middleware:a=[],platform:s}=o,l=a.filter(Boolean),r=await(null==s.isRTL?void 0:s.isRTL(e));let c=await s.getElementRects({reference:t,floating:e,strategy:n}),{x:d,y:u}=computeCoordsFromPlacement(c,i,r),m=i,h={},p=0;for(let o=0;o<l.length;o++){const{name:a,fn:g}=l[o],{x:f,y:b,data:v,reset:y}=await g({x:d,y:u,initialPlacement:i,placement:m,strategy:n,middlewareData:h,rects:c,platform:s,elements:{reference:t,floating:e}});d=null!=f?f:d,u=null!=b?b:u,h={...h,[a]:{...h[a],...v}},y&&p<=50&&(p++,"object"==typeof y&&(y.placement&&(m=y.placement),y.rects&&(c=!0===y.rects?await s.getElementRects({reference:t,floating:e,strategy:n}):y.rects),({x:d,y:u}=computeCoordsFromPlacement(c,m,r))),o=-1)}return{x:d,y:u,placement:m,strategy:n,middlewareData:h}};function expandPaddingObject(t){return{top:0,right:0,bottom:0,left:0,...t}}function getSideObjectFromPadding(t){return"number"!=typeof t?expandPaddingObject(t):{top:t,right:t,bottom:t,left:t}}function rectToClientRect(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}async function detectOverflow(t,e){var o;void 0===e&&(e={});const{x:i,y:n,platform:a,rects:s,elements:l,strategy:r}=t,{boundary:c="clippingAncestors",rootBoundary:d="viewport",elementContext:u="floating",altBoundary:m=!1,padding:h=0}=e,p=getSideObjectFromPadding(h),g=l[m?"floating"===u?"reference":"floating":u],f=rectToClientRect(await a.getClippingRect({element:null==(o=await(null==a.isElement?void 0:a.isElement(g)))||o?g:g.contextElement||await(null==a.getDocumentElement?void 0:a.getDocumentElement(l.floating)),boundary:c,rootBoundary:d,strategy:r})),b="floating"===u?{...s.floating,x:i,y:n}:s.reference,v=await(null==a.getOffsetParent?void 0:a.getOffsetParent(l.floating)),y=await(null==a.isElement?void 0:a.isElement(v))&&await(null==a.getScale?void 0:a.getScale(v))||{x:1,y:1},_=rectToClientRect(a.convertOffsetParentRelativeRectToViewportRelativeRect?await a.convertOffsetParentRelativeRectToViewportRelativeRect({rect:b,offsetParent:v,strategy:r}):b);return{top:(f.top-_.top+p.top)/y.y,bottom:(_.bottom-f.bottom+p.bottom)/y.y,left:(f.left-_.left+p.left)/y.x,right:(_.right-f.right+p.right)/y.x}}const min$1=Math.min,max$1=Math.max;function within(t,e,o){return max$1(t,min$1(e,o))}const arrow=t=>({name:"arrow",options:t,async fn(e){const{element:o,padding:i=0}=t||{},{x:n,y:a,placement:s,rects:l,platform:r,elements:c}=e;if(null==o)return{};const d=getSideObjectFromPadding(i),u={x:n,y:a},m=getMainAxisFromPlacement(s),h=getLengthFromAxis(m),p=await r.getDimensions(o),g="y"===m,f=g?"top":"left",b=g?"bottom":"right",v=g?"clientHeight":"clientWidth",y=l.reference[h]+l.reference[m]-u[m]-l.floating[h],_=u[m]-l.reference[m],w=await(null==r.getOffsetParent?void 0:r.getOffsetParent(o));let x=w?w[v]:0;x&&await(null==r.isElement?void 0:r.isElement(w))||(x=c.floating[v]||l.floating[h]);const E=y/2-_/2,C=d[f],S=x-p[h]-d[b],A=x/2-p[h]/2+E,k=within(C,A,S),T=null!=getAlignment(s)&&A!=k&&l.reference[h]/2-(A<C?d[f]:d[b])-p[h]/2<0;return{[m]:u[m]-(T?A<C?C-A:S-A:0),data:{[m]:k,centerOffset:A-k}}}}),oppositeSideMap={left:"right",right:"left",bottom:"top",top:"bottom"};function getOppositePlacement(t){return t.replace(/left|right|bottom|top/g,(t=>oppositeSideMap[t]))}function getAlignmentSides(t,e,o){void 0===o&&(o=!1);const i=getAlignment(t),n=getMainAxisFromPlacement(t),a=getLengthFromAxis(n);let s="x"===n?i===(o?"end":"start")?"right":"left":"start"===i?"bottom":"top";return e.reference[a]>e.floating[a]&&(s=getOppositePlacement(s)),{main:s,cross:getOppositePlacement(s)}}const oppositeAlignmentMap={start:"end",end:"start"};function getOppositeAlignmentPlacement(t){return t.replace(/start|end/g,(t=>oppositeAlignmentMap[t]))}function getExpandedPlacements(t){const e=getOppositePlacement(t);return[getOppositeAlignmentPlacement(t),e,getOppositeAlignmentPlacement(e)]}function getSideList(t,e,o){const i=["left","right"],n=["right","left"],a=["top","bottom"],s=["bottom","top"];switch(t){case"top":case"bottom":return o?e?n:i:e?i:n;case"left":case"right":return e?a:s;default:return[]}}function getOppositeAxisPlacements(t,e,o,i){const n=getAlignment(t);let a=getSideList(getSide(t),"start"===o,i);return n&&(a=a.map((t=>t+"-"+n)),e&&(a=a.concat(a.map(getOppositeAlignmentPlacement)))),a}const flip=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var o;const{placement:i,middlewareData:n,rects:a,initialPlacement:s,platform:l,elements:r}=e,{mainAxis:c=!0,crossAxis:d=!0,fallbackPlacements:u,fallbackStrategy:m="bestFit",fallbackAxisSideDirection:h="none",flipAlignment:p=!0,...g}=t,f=getSide(i),b=getSide(s)===s,v=await(null==l.isRTL?void 0:l.isRTL(r.floating)),y=u||(b||!p?[getOppositePlacement(s)]:getExpandedPlacements(s));u||"none"===h||y.push(...getOppositeAxisPlacements(s,p,h,v));const _=[s,...y],w=await detectOverflow(e,g),x=[];let E=(null==(o=n.flip)?void 0:o.overflows)||[];if(c&&x.push(w[f]),d){const{main:t,cross:e}=getAlignmentSides(i,a,v);x.push(w[t],w[e])}if(E=[...E,{placement:i,overflows:x}],!x.every((t=>t<=0))){var C,S;const t=((null==(C=n.flip)?void 0:C.index)||0)+1,e=_[t];if(e)return{data:{index:t,overflows:E},reset:{placement:e}};let o=null==(S=E.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:S.placement;if(!o)switch(m){case"bestFit":{var A;const t=null==(A=E.map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:A[0];t&&(o=t);break}case"initialPlacement":o=s}if(i!==o)return{reset:{placement:o}}}return{}}}};async function convertValueToCoords(t,e){const{placement:o,platform:i,elements:n}=t,a=await(null==i.isRTL?void 0:i.isRTL(n.floating)),s=getSide(o),l=getAlignment(o),r="x"===getMainAxisFromPlacement(o),c=["left","top"].includes(s)?-1:1,d=a&&r?-1:1,u="function"==typeof e?e(t):e;let{mainAxis:m,crossAxis:h,alignmentAxis:p}="number"==typeof u?{mainAxis:u,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...u};return l&&"number"==typeof p&&(h="end"===l?-1*p:p),r?{x:h*d,y:m*c}:{x:m*c,y:h*d}}const offset=function(t){return void 0===t&&(t=0),{name:"offset",options:t,async fn(e){const{x:o,y:i}=e,n=await convertValueToCoords(e,t);return{x:o+n.x,y:i+n.y,data:n}}}};function getCrossAxis(t){return"x"===t?"y":"x"}const shift=function(t){return void 0===t&&(t={}),{name:"shift",options:t,async fn(e){const{x:o,y:i,placement:n}=e,{mainAxis:a=!0,crossAxis:s=!1,limiter:l={fn:t=>{let{x:e,y:o}=t;return{x:e,y:o}}},...r}=t,c={x:o,y:i},d=await detectOverflow(e,r),u=getMainAxisFromPlacement(getSide(n)),m=getCrossAxis(u);let h=c[u],p=c[m];if(a){const t="y"===u?"bottom":"right";h=within(h+d["y"===u?"top":"left"],h,h-d[t])}if(s){const t="y"===m?"bottom":"right";p=within(p+d["y"===m?"top":"left"],p,p-d[t])}const g=l.fn({...e,[u]:h,[m]:p});return{...g,data:{x:g.x-o,y:g.y-i}}}}};function getWindow(t){var e;return(null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function getComputedStyle$1(t){return getWindow(t).getComputedStyle(t)}function isNode(t){return t instanceof getWindow(t).Node}function getNodeName(t){return isNode(t)?(t.nodeName||"").toLowerCase():""}let uaString;function getUAString(){if(uaString)return uaString;const t=navigator.userAgentData;return t&&Array.isArray(t.brands)?(uaString=t.brands.map((t=>t.brand+"/"+t.version)).join(" "),uaString):navigator.userAgent}function isHTMLElement(t){return t instanceof getWindow(t).HTMLElement}function isElement(t){return t instanceof getWindow(t).Element}function isShadowRoot(t){if("undefined"==typeof ShadowRoot)return!1;return t instanceof getWindow(t).ShadowRoot||t instanceof ShadowRoot}function isOverflowElement(t){const{overflow:e,overflowX:o,overflowY:i,display:n}=getComputedStyle$1(t);return/auto|scroll|overlay|hidden|clip/.test(e+i+o)&&!["inline","contents"].includes(n)}function isTableElement(t){return["table","td","th"].includes(getNodeName(t))}function isContainingBlock(t){const e=/firefox/i.test(getUAString()),o=getComputedStyle$1(t),i=o.backdropFilter||o.WebkitBackdropFilter;return"none"!==o.transform||"none"!==o.perspective||!!i&&"none"!==i||e&&"filter"===o.willChange||e&&!!o.filter&&"none"!==o.filter||["transform","perspective"].some((t=>o.willChange.includes(t)))||["paint","layout","strict","content"].some((t=>{const e=o.contain;return null!=e&&e.includes(t)}))}function isClientRectVisualViewportBased(){return/^((?!chrome|android).)*safari/i.test(getUAString())}function isLastTraversableNode(t){return["html","body","#document"].includes(getNodeName(t))}const min=Math.min,max=Math.max,round=Math.round;function getCssDimensions(t){const e=getComputedStyle$1(t);let o=parseFloat(e.width),i=parseFloat(e.height);const n=isHTMLElement(t),a=n?t.offsetWidth:o,s=n?t.offsetHeight:i,l=round(o)!==a||round(i)!==s;return l&&(o=a,i=s),{width:o,height:i,fallback:l}}function unwrapElement(t){return isElement(t)?t:t.contextElement}const FALLBACK_SCALE={x:1,y:1};function getScale(t){const e=unwrapElement(t);if(!isHTMLElement(e))return FALLBACK_SCALE;const o=e.getBoundingClientRect(),{width:i,height:n,fallback:a}=getCssDimensions(e);let s=(a?round(o.width):o.width)/i,l=(a?round(o.height):o.height)/n;return s&&Number.isFinite(s)||(s=1),l&&Number.isFinite(l)||(l=1),{x:s,y:l}}function getBoundingClientRect(t,e,o,i){var n,a;void 0===e&&(e=!1),void 0===o&&(o=!1);const s=t.getBoundingClientRect(),l=unwrapElement(t);let r=FALLBACK_SCALE;e&&(i?isElement(i)&&(r=getScale(i)):r=getScale(t));const c=l?getWindow(l):window,d=isClientRectVisualViewportBased()&&o;let u=(s.left+(d&&(null==(n=c.visualViewport)?void 0:n.offsetLeft)||0))/r.x,m=(s.top+(d&&(null==(a=c.visualViewport)?void 0:a.offsetTop)||0))/r.y,h=s.width/r.x,p=s.height/r.y;if(l){const t=getWindow(l),e=i&&isElement(i)?getWindow(i):i;let o=t.frameElement;for(;o&&i&&e!==t;){const t=getScale(o),e=o.getBoundingClientRect(),i=getComputedStyle(o);e.x+=(o.clientLeft+parseFloat(i.paddingLeft))*t.x,e.y+=(o.clientTop+parseFloat(i.paddingTop))*t.y,u*=t.x,m*=t.y,h*=t.x,p*=t.y,u+=e.x,m+=e.y,o=getWindow(o).frameElement}}return rectToClientRect({width:h,height:p,x:u,y:m})}function getDocumentElement(t){return((isNode(t)?t.ownerDocument:t.document)||window.document).documentElement}function getNodeScroll(t){return isElement(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function convertOffsetParentRelativeRectToViewportRelativeRect(t){let{rect:e,offsetParent:o,strategy:i}=t;const n=isHTMLElement(o),a=getDocumentElement(o);if(o===a)return e;let s={scrollLeft:0,scrollTop:0},l={x:1,y:1};const r={x:0,y:0};if((n||!n&&"fixed"!==i)&&(("body"!==getNodeName(o)||isOverflowElement(a))&&(s=getNodeScroll(o)),isHTMLElement(o))){const t=getBoundingClientRect(o);l=getScale(o),r.x=t.x+o.clientLeft,r.y=t.y+o.clientTop}return{width:e.width*l.x,height:e.height*l.y,x:e.x*l.x-s.scrollLeft*l.x+r.x,y:e.y*l.y-s.scrollTop*l.y+r.y}}function getWindowScrollBarX(t){return getBoundingClientRect(getDocumentElement(t)).left+getNodeScroll(t).scrollLeft}function getDocumentRect(t){const e=getDocumentElement(t),o=getNodeScroll(t),i=t.ownerDocument.body,n=max(e.scrollWidth,e.clientWidth,i.scrollWidth,i.clientWidth),a=max(e.scrollHeight,e.clientHeight,i.scrollHeight,i.clientHeight);let s=-o.scrollLeft+getWindowScrollBarX(t);const l=-o.scrollTop;return"rtl"===getComputedStyle$1(i).direction&&(s+=max(e.clientWidth,i.clientWidth)-n),{width:n,height:a,x:s,y:l}}function getParentNode(t){if("html"===getNodeName(t))return t;const e=t.assignedSlot||t.parentNode||isShadowRoot(t)&&t.host||getDocumentElement(t);return isShadowRoot(e)?e.host:e}function getNearestOverflowAncestor(t){const e=getParentNode(t);return isLastTraversableNode(e)?e.ownerDocument.body:isHTMLElement(e)&&isOverflowElement(e)?e:getNearestOverflowAncestor(e)}function getOverflowAncestors(t,e){var o;void 0===e&&(e=[]);const i=getNearestOverflowAncestor(t),n=i===(null==(o=t.ownerDocument)?void 0:o.body),a=getWindow(i);return n?e.concat(a,a.visualViewport||[],isOverflowElement(i)?i:[]):e.concat(i,getOverflowAncestors(i))}function getViewportRect(t,e){const o=getWindow(t),i=getDocumentElement(t),n=o.visualViewport;let a=i.clientWidth,s=i.clientHeight,l=0,r=0;if(n){a=n.width,s=n.height;const t=isClientRectVisualViewportBased();(!t||t&&"fixed"===e)&&(l=n.offsetLeft,r=n.offsetTop)}return{width:a,height:s,x:l,y:r}}function getInnerBoundingClientRect(t,e){const o=getBoundingClientRect(t,!0,"fixed"===e),i=o.top+t.clientTop,n=o.left+t.clientLeft,a=isHTMLElement(t)?getScale(t):{x:1,y:1};return{width:t.clientWidth*a.x,height:t.clientHeight*a.y,x:n*a.x,y:i*a.y}}function getClientRectFromClippingAncestor(t,e,o){let i;if("viewport"===e)i=getViewportRect(t,o);else if("document"===e)i=getDocumentRect(getDocumentElement(t));else if(isElement(e))i=getInnerBoundingClientRect(e,o);else{const o={...e};if(isClientRectVisualViewportBased()){var n,a;const e=getWindow(t);o.x-=(null==(n=e.visualViewport)?void 0:n.offsetLeft)||0,o.y-=(null==(a=e.visualViewport)?void 0:a.offsetTop)||0}i=o}return rectToClientRect(i)}function getClippingElementAncestors(t,e){const o=e.get(t);if(o)return o;let i=getOverflowAncestors(t).filter((t=>isElement(t)&&"body"!==getNodeName(t))),n=null;const a="fixed"===getComputedStyle$1(t).position;let s=a?getParentNode(t):t;for(;isElement(s)&&!isLastTraversableNode(s);){const t=getComputedStyle$1(s),e=isContainingBlock(s);if("fixed"===t.position)n=null;else{(a?!e&&!n:!e&&"static"===t.position&&!!n&&["absolute","fixed"].includes(n.position))?i=i.filter((t=>t!==s)):n=t}s=getParentNode(s)}return e.set(t,i),i}function getClippingRect(t){let{element:e,boundary:o,rootBoundary:i,strategy:n}=t;const a=[..."clippingAncestors"===o?getClippingElementAncestors(e,this._c):[].concat(o),i],s=a[0],l=a.reduce(((t,o)=>{const i=getClientRectFromClippingAncestor(e,o,n);return t.top=max(i.top,t.top),t.right=min(i.right,t.right),t.bottom=min(i.bottom,t.bottom),t.left=max(i.left,t.left),t}),getClientRectFromClippingAncestor(e,s,n));return{width:l.right-l.left,height:l.bottom-l.top,x:l.left,y:l.top}}function getDimensions(t){return getCssDimensions(t)}function getTrueOffsetParent(t,e){return isHTMLElement(t)&&"fixed"!==getComputedStyle$1(t).position?e?e(t):t.offsetParent:null}function getContainingBlock(t){let e=getParentNode(t);for(;isHTMLElement(e)&&!isLastTraversableNode(e);){if(isContainingBlock(e))return e;e=getParentNode(e)}return null}function getOffsetParent(t,e){const o=getWindow(t);if(!isHTMLElement(t))return o;let i=getTrueOffsetParent(t,e);for(;i&&isTableElement(i)&&"static"===getComputedStyle$1(i).position;)i=getTrueOffsetParent(i,e);return i&&("html"===getNodeName(i)||"body"===getNodeName(i)&&"static"===getComputedStyle$1(i).position&&!isContainingBlock(i))?o:i||getContainingBlock(t)||o}function getRectRelativeToOffsetParent(t,e,o){const i=isHTMLElement(e),n=getDocumentElement(e),a=getBoundingClientRect(t,!0,"fixed"===o,e);let s={scrollLeft:0,scrollTop:0};const l={x:0,y:0};if(i||!i&&"fixed"!==o)if(("body"!==getNodeName(e)||isOverflowElement(n))&&(s=getNodeScroll(e)),isHTMLElement(e)){const t=getBoundingClientRect(e,!0);l.x=t.x+e.clientLeft,l.y=t.y+e.clientTop}else n&&(l.x=getWindowScrollBarX(n));return{x:a.left+s.scrollLeft-l.x,y:a.top+s.scrollTop-l.y,width:a.width,height:a.height}}const platform={getClippingRect:getClippingRect,convertOffsetParentRelativeRectToViewportRelativeRect:convertOffsetParentRelativeRectToViewportRelativeRect,isElement:isElement,getDimensions:getDimensions,getOffsetParent:getOffsetParent,getDocumentElement:getDocumentElement,getScale:getScale,async getElementRects(t){let{reference:e,floating:o,strategy:i}=t;const n=this.getOffsetParent||getOffsetParent,a=this.getDimensions;return{reference:getRectRelativeToOffsetParent(e,await n(o),i),floating:{x:0,y:0,...await a(o)}}},getClientRects:t=>Array.from(t.getClientRects()),isRTL:t=>"rtl"===getComputedStyle$1(t).direction},computePosition=(t,e,o)=>{const i=new Map,n={platform:platform,...o},a={...n.platform,_c:i};return computePosition$1(t,e,{...n,platform:a})},defaultStyleCss$1=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}kol-tooltip #floating{animation-name:fadeInOpacity;animation-iteration-count:1;animation-timing-function:ease-in;animation-duration:0.5s;box-sizing:border-box;display:none;position:absolute;visibility:hidden}kol-tooltip #arrow{background:#333;height:10px;position:absolute;transform:rotate(45deg);width:10px;z-index:999}kol-tooltip kol-badge{position:relative;z-index:1000}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",KolTooltip=proxyCustomElement(class extends HTMLElement$1{constructor(){super(),this.__registerHost(),this.alignTooltip=t=>{var e,o;if("test"!==processEnv&&this.previousSibling){const i=this.previousSibling;if(this.tooltipElement){const n=this.tooltipElement,a=this.arrowElement,s=[(o=null!==(e=null==a?void 0:a.offsetHeight)&&void 0!==e?e:10,void 0===o&&(o=0),{name:"offset",options:o,async fn(t){const{x:e,y:i}=t,n=await convertValueToCoords(t,o);return{x:e+n.x,y:i+n.y,data:n}}}),flip(),shift()];a&&s.push(arrow({element:a})),computePosition(i,n,{placement:this.state._align,middleware:s}).then((({x:e,y:o,middlewareData:i,placement:s})=>{var l,r;const c=n.style.left,d=n.style.top;Object.assign(n.style,{left:`${e}px`,top:`${o}px`}),a&&((null===(l=i.arrow)||void 0===l?void 0:l.x)?Object.assign(a.style,{left:`${i.arrow.x}px`,top:"bottom"===s?-a.offsetHeight/2+"px":"",bottom:"top"===s?-a.offsetHeight/2+"px":""}):(null===(r=i.arrow)||void 0===r?void 0:r.y)&&Object.assign(a.style,{left:"right"===s?-a.offsetWidth/2+"px":"",right:"left"===s?-a.offsetWidth/2+"px":"",top:`${i.arrow.y}px`})),c!==n.style.left||d!==n.style.top?this.alignTooltip(t):"function"==typeof t&&t()}))}}},this.showTooltip=()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("display","block"),getDocument().body.addEventListener("keyup",this.hideTooltipByEscape),this.alignTooltip((()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("visibility","visible"),document.addEventListener("scroll",this.showTooltip))})))},this.hideTooltip=()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),document.removeEventListener("scroll",this.showTooltip))},this.hideTooltipByEscape=t=>{"Escape"===t.key&&(getDocument().body.removeEventListener("keyup",this.hideTooltipByEscape),this.hideTooltip())},this.addListeners=t=>{t.addEventListener("mouseover",this.incrementOverFocusCount),t.addEventListener("focus",this.incrementOverFocusCount),t.addEventListener("mouseout",this.decrementOverFocusCount),t.addEventListener("blur",this.decrementOverFocusCount)},this.removeListeners=t=>{t.removeEventListener("mouseover",this.incrementOverFocusCount),t.removeEventListener("focus",this.incrementOverFocusCount),t.removeEventListener("mouseout",this.decrementOverFocusCount),t.removeEventListener("blur",this.decrementOverFocusCount)},this.resyncListeners=t=>{this.removeListeners(t),this.addListeners(t)},this.catchHostElement=t=>{t&&(this.previousSibling=t.previousElementSibling,this.previousSibling&&this.resyncListeners(this.previousSibling))},this.catchTooltipElement=t=>{this.tooltipElement=t,this.tooltipElement&&this.resyncListeners(this.tooltipElement)},this.catchArrowElement=t=>{this.arrowElement=t},this.overFocusCount=0,this.incrementOverFocusCount=()=>{this.overFocusCount++,this.showOrHideTooltip()},this.decrementOverFocusCount=()=>{this.overFocusCount--,this.showOrHideTooltip()},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{clearTimeout(this.overFocusTimeout),this.overFocusCount>0?this.showTooltip():this.hideTooltip()}),250)},this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_id:nonce(),_label:"…"}}render(){return h(Host,{ref:this.catchHostElement},""!==this.state._label&&h("div",{id:"floating",ref:this.catchTooltipElement},h("div",{id:"arrow",ref:this.catchArrowElement}),h("kol-badge",{id:this.state._id,_color:{backgroundColor:"#333",color:"#ddd"},_label:this.state._label})))}validateAlign(t){watchTooltipAlignment(this,"_align",t)}validateId(t){watchString(this,"_id",t)}validateLabel(t){watchString(this,"_label",t)}componentWillLoad(){this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}disconnectedCallback(){this.previousSibling&&this.removeListeners(this.previousSibling),this.tooltipElement&&this.removeListeners(this.tooltipElement)}static get watchers(){return{_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}static get style(){return{default:defaultStyleCss$1}}},[32,"kol-tooltip",{_align:[1],_id:[1],_label:[1],state:[32]}]);function defineCustomElement$2(){if("undefined"==typeof customElements)return;["kol-tooltip","kol-badge","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-tooltip":customElements.get(t)||customElements.define(t,KolTooltip);break;case"kol-badge":customElements.get(t)||defineCustomElement();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$1();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}const KolButtonWc=proxyCustomElement(class extends HTMLElement$1{constructor(){super(),this.__registerHost(),this.nonce=nonce(),this.catchRef=t=>{this.ref=t,propergateFocus(this.host,this.ref)},this.onClick=t=>{var e,o;"submit"===this.state._type?propergateSubmitEventToForm({form:this.host,ref:this.ref}):"reset"===this.state._type?propergateResetEventToForm({form:this.host,ref:this.ref}):"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)?(setEventTargetAndStopPropagation(t,this.ref),null===(o=this.state._on)||void 0===o||o.onClick(t,this.state._value)):devHint("It was no button click callback configured!")},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._icon=void 0,this._iconAlign=void 0,this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icon:{},_label:"…",_on:{},_type:"button",_variant:"normal"}}render(){return h(Host,null,h("button",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-current":mapStringOrBoolean2String(this.state._ariaCurrent),"aria-expanded":mapBoolean2String(this.state._ariaExpanded),"aria-label":!1===this.state._iconOnly?this.state._ariaLabel:void 0,"aria-labelledby":!0===this.state._iconOnly?this.nonce:void 0,"aria-selected":mapStringOrBoolean2String(this.state._ariaSelected),class:{[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"icon-only":!0===this.state._iconOnly},disabled:this.state._disabled,id:this.state._id},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),h("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this.state._label},h("slot",{name:"expert",slot:"expert"}))),!0===this.state._iconOnly&&h("kol-tooltip",{"aria-hidden":"true",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._ariaLabel||this.state._label}))}validateAccessKey(t){watchString(this,"_accessKey",t)}validateAriaControls(t){watchString(this,"_ariaControls",t)}validateAriaCurrent(t){watchValidator(this,"_ariaControls",(t=>!0===t||"date"===t||"location"===t||"page"===t||"step"===t||"time"===t),new Set(["boolean","String {data, location, page, step, time}"]),t)}validateAriaExpanded(t){watchBoolean(this,"_ariaExpanded",t)}validateAriaLabel(t){validateAriaLabelWithLabel(this,t)}validateAriaSelected(t){watchBoolean(this,"_ariaSelected",t)}validateCustomClass(t){watchString(this,"_customClass",t,{defaultValue:void 0})}validateDisabled(t){watchBoolean(this,"_disabled",t),!0===t&&a11yHintDisabled()}validateIcon(t){validateIcon(this,t)}validateIconAlign(t){watchIconAlign(this,t)}validateIconOnly(t){watchBoolean(this,"_iconOnly",t,{defaultValue:!1})}validateId(t){watchString(this,"_id",t)}validateLabel(t){validateLabelWithAriaLabel(this,t)}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){watchString(this,"_role",t)}validateTabIndex(t){validateTabIndex(this,t)}validateTooltipAlign(t){watchTooltipAlignment(this,"_tooltipAlign",t)}validateType(t){watchButtonType(this,"_type",t)}validateValue(t){setState(this,"_value",t)}validateVariant(t){watchButtonVariant(this,"_variant",t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaLabel(this._ariaLabel),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateIcon(this._icon),this.validateIconAlign(this._iconAlign),this.validateIconOnly(this._iconOnly),this.validateId(this._id),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_icon:["validateIcon"],_iconAlign:["validateIconAlign"],_iconOnly:["validateIconOnly"],_id:["validateId"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}},[4,"kol-button-wc",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaCurrent:[8,"_aria-current"],_ariaExpanded:[516,"_aria-expanded"],_ariaLabel:[1025,"_aria-label"],_ariaSelected:[516,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[516],_icon:[1],_iconAlign:[1,"_icon-align"],_iconOnly:[516,"_icon-only"],_id:[1],_label:[1025],_on:[16],_role:[1],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[16],_variant:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-wc","kol-badge","kol-icon","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-button-wc":customElements.get(t)||customElements.define(t,KolButtonWc);break;case"kol-badge":customElements.get(t)||defineCustomElement();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input,option,select,textarea{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>span{display:inline-flex;place-items:center}:host>span.smart-button>kol-span-wc{border-right:1px solid rgba(0, 0, 0, 0.25)}:host>span>kol-button-wc button{color:inherit}";featureHint("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const HACK_REG_EX=/^([a-f0-9]{3}|[a-f0-9]{6})$/,KolBadge=proxyCustomElement(class extends HTMLElement$1{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.bgColorStr="#000",this.colorStr="#fff",this.handleColorChange=t=>{let e,o=t;"string"==typeof o?(HACK_REG_EX.test(o)&&(devHint("[KolBadge] Bitte verwenden Sie zukünftig nur noch das Standard-Farbformat für CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."),o=`#${o}`),e=createContrastColorPair(o)):e=createContrastColorPair({background:o.backgroundColor,foreground:o.color}),e.contrast<7&&a11yHint(`[KolBadge] The contrast of ${e.contrast} (≥7, AAA) is too low, between the color pair ${e.background} and ${e.foreground}.`),this.bgColorStr=e.background,this.colorStr=e.foreground},this._color="#000",this._icon=void 0,this._iconOnly=!1,this._label=void 0,this._smartButton=void 0,this.state={_color:"#000",_label:"…"}}render(){return h(Host,null,h("span",{class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},h("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this.state._label}),"object"==typeof this.state._smartButton&&null!==this.state._smartButton&&h("kol-button-wc",{_ariaLabel:this.state._smartButton._ariaLabel,_customClass:this.state._smartButton._customClass,_disabled:this.state._smartButton._disabled,_icon:this.state._smartButton._icon,_iconOnly:!0,_id:this.state._smartButton._id,_label:this.state._smartButton._label,_on:this.state._smartButton._on,_tooltipAlign:this.state._smartButton._tooltipAlign,_variant:this.state._smartButton._variant})))}validateColor(t){watchValidator(this,"_color",(t=>"string"==typeof t||"object"==typeof t&&null!==t&&"string"==typeof t.backgroundColor&&"string"==typeof t.color),new Set(["string","KoliBriColor"]),t,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateLabel(t){validateLabel(this,t,{hooks:{afterPatch:t=>{"string"==typeof t&&t.length>32&&a11yHint(`[KolBadge] The label is too long for a badge (${t.length} > 32).`)}}})}validateSmartButton(t){objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(t){}setState(this,"_smartButton",t)}))}componentWillLoad(){this.validateColor(this._color),this.validateLabel(this._label),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_label:["validateLabel"],_smartButton:["validateSmartButton"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-badge",{_color:[1],_icon:[1],_iconOnly:[516,"_icon-only"],_label:[1],_smartButton:[1,"_smart-button"],state:[32]}]);function defineCustomElement(){if("undefined"==typeof customElements)return;["kol-badge","kol-badge","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-badge":customElements.get(t)||customElements.define(t,KolBadge);break;case"kol-badge":customElements.get(t)||defineCustomElement();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$1();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}export{KolBadge as K,defineCustomElement$1 as a,defineCustomElement as b,KolButtonWc as c,defineCustomElement$2 as d,watchButtonVariant as e,KolTooltip as f,propergateSubmitEventToForm as p,validateTabIndex as v,watchTooltipAlignment as w};
+import{proxyCustomElement,HTMLElement as HTMLElement$1,h,Host}from"@stencil/core/internal/client";import{b as watchValidator,e as rgbaConvert,f as s,h as watchBoolean,i as watchNumber,j as a11yHint,k as setEventTarget,K as KoliBriDevHelper,l as getExperimalMode,d as devHint,m as getDocument,n as nonce,w as watchString,p as processEnv,o as propagateFocus,q as devWarning,t as mapStringOrBoolean2String,u as mapBoolean2String,v as a11yHintDisabled,x as setState,y as featureHint,z as objectObjectHandler,A as parseJson}from"./prop.validators.js";import{d as defineCustomElement$3,v as validateAriaLabelWithLabel,a as validateIcon,w as watchIconAlign,b as validateLabelWithAriaLabel,c as validateLabel}from"./component3.js";import{c as colorRgba}from"./index2.js";import{d as defineCustomElement$4}from"./component2.js";const watchTooltipAlignment=(t,e,i)=>{watchValidator(t,e,(t=>"top"===t||"right"===t||"bottom"===t||"left"===t),new Set(["Alignment {top, right, buttom, left}"]),i,{defaultValue:"top"})},getContrastYIQ=(t,e,i)=>(299*t+587*e+114*i)/1e3>=128?-1:1,calcColorContrast=(t,e,i,o=1)=>{const n=[Math.max(Math.min(Math.round(e[0]+o*Math.max(1,e[0]/100)),255),0),Math.max(Math.min(Math.round(e[1]+o*Math.max(1,e[1]/100)),255),0),Math.max(Math.min(Math.round(e[2]+o*Math.max(1,e[2]/100)),255),0)],a=s(rgbaConvert.hex(`rgba(${t.join(",")},1)`),rgbaConvert.hex(`rgba(${n.join(",")},1)`)),l=n[0]+n[1]+n[2];return 0===l||765===l||a>i?{background:t,foreground:n,contrast:a}:calcColorContrast(t,n,i,o)},cache=new Map,getColorContrast=(t,e,i,o=1)=>{if(cache.has(t))return cache.get(t);const n=calcColorContrast(t,e,i,o);return cache.set(t,n),n},createContrastColorPair=(t,e=7)=>{let i=[0,0,0,1],o=[255,255,255,1];"string"==typeof t?(i=colorRgba(t),o=i):"object"==typeof t&&null!==t&&"string"==typeof t.background&&"string"==typeof t.foreground&&(i=colorRgba(t.background),o="string"==typeof t.foreground?colorRgba(t.foreground):i);const n=(a=i[0],s=i[1],l=i[2],(299*a+587*s+114*l)/1e3>=128?-1:1);var a,s,l;const r=getColorContrast([i[0],i[1],i[2]],[o[0],o[1],o[2]],e,n);return o=[...r.foreground,1],{background:rgbaConvert.hex(`rgba(${i.join(",")})`),foreground:rgbaConvert.hex(`rgba(${o.join(",")})`),contrast:r.contrast}},validateAriaExpanded=(t,e)=>{watchBoolean(t,"_ariaExpanded",e)},validateDisabled=(t,e)=>{watchBoolean(t,"_disabled",e)},options={hooks:{afterPatch:t=>{-1!==t&&0!==t&&a11yHint("Don’t Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},validateTabIndex=(t,e)=>{watchNumber(t,"_tabIndex",e,options)},searchFormElement=t=>{for(getExperimalMode()&&(devHint("↓ Search form element start."),console.log(t));t instanceof HTMLElement&&"FORM"!==t.tagName&&"KOL-FORM"!==t.tagName;)t=t.parentElement instanceof HTMLElement?t.parentElement:t.parentNode instanceof ShadowRoot?t.parentNode.host:null,getExperimalMode()&&console.log(t);return getExperimalMode()&&devHint("↑ Search form element finished."),t},propagateResetEventToForm=(t={})=>{const e=searchFormElement(t.form);if(e instanceof HTMLElement){const t=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===e.tagName)setEventTarget(t,e),e.dispatchEvent(t);else if("KOL-FORM"===e.tagName){setEventTarget(t,KoliBriDevHelper.querySelector("form",e));const i=e;"object"==typeof i._on&&null!==typeof i._on&&"function"==typeof i._on.onReset&&i._on.onReset(t)}}},propagateSubmitEventToForm=(t={})=>{const e=searchFormElement(t.form);if(e instanceof HTMLElement){const t=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:e});if("FORM"===e.tagName)setEventTarget(t,e),e.dispatchEvent(t);else if("KOL-FORM"===e.tagName){setEventTarget(t,KoliBriDevHelper.querySelector("form",e));const i=e;"object"==typeof i._on&&null!==typeof i._on&&"function"==typeof i._on.onSubmit&&i._on.onSubmit(t)}}},watchButtonType=(t,e,i)=>{watchValidator(t,e,(t=>"button"===t||"reset"===t||"submit"===t),new Set(["KoliBriButtonType {button, reset, submit}"]),i)},watchButtonVariant=(t,e,i)=>{watchValidator(t,e,(t=>"primary"===t||"secondary"===t||"normal"===t||"danger"===t||"ghost"===t||"custom"===t),new Set(["KoliBriButtonVariant {primary, secondary, normal, danger, ghost, custom}"]),i,{defaultValue:"normal"})};function getAlignment(t){return t.split("-")[1]}function getLengthFromAxis(t){return"y"===t?"height":"width"}function getSide(t){return t.split("-")[0]}function getMainAxisFromPlacement(t){return["top","bottom"].includes(getSide(t))?"x":"y"}function computeCoordsFromPlacement(t,e,i){let{reference:o,floating:n}=t;const a=o.x+o.width/2-n.width/2,s=o.y+o.height/2-n.height/2,l=getMainAxisFromPlacement(e),r=getLengthFromAxis(l),c=o[r]/2-n[r]/2,d="x"===l;let u;switch(getSide(e)){case"top":u={x:a,y:o.y-n.height};break;case"bottom":u={x:a,y:o.y+o.height};break;case"right":u={x:o.x+o.width,y:s};break;case"left":u={x:o.x-n.width,y:s};break;default:u={x:o.x,y:o.y}}switch(getAlignment(e)){case"start":u[l]-=c*(i&&d?-1:1);break;case"end":u[l]+=c*(i&&d?-1:1)}return u}const computePosition$1=async(t,e,i)=>{const{placement:o="bottom",strategy:n="absolute",middleware:a=[],platform:s}=i,l=a.filter(Boolean),r=await(null==s.isRTL?void 0:s.isRTL(e));let c=await s.getElementRects({reference:t,floating:e,strategy:n}),{x:d,y:u}=computeCoordsFromPlacement(c,o,r),m=o,h={},p=0;for(let i=0;i<l.length;i++){const{name:a,fn:g}=l[i],{x:f,y:v,data:b,reset:y}=await g({x:d,y:u,initialPlacement:o,placement:m,strategy:n,middlewareData:h,rects:c,platform:s,elements:{reference:t,floating:e}});d=null!=f?f:d,u=null!=v?v:u,h={...h,[a]:{...h[a],...b}},y&&p<=50&&(p++,"object"==typeof y&&(y.placement&&(m=y.placement),y.rects&&(c=!0===y.rects?await s.getElementRects({reference:t,floating:e,strategy:n}):y.rects),({x:d,y:u}=computeCoordsFromPlacement(c,m,r))),i=-1)}return{x:d,y:u,placement:m,strategy:n,middlewareData:h}};function expandPaddingObject(t){return{top:0,right:0,bottom:0,left:0,...t}}function getSideObjectFromPadding(t){return"number"!=typeof t?expandPaddingObject(t):{top:t,right:t,bottom:t,left:t}}function rectToClientRect(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}async function detectOverflow(t,e){var i;void 0===e&&(e={});const{x:o,y:n,platform:a,rects:s,elements:l,strategy:r}=t,{boundary:c="clippingAncestors",rootBoundary:d="viewport",elementContext:u="floating",altBoundary:m=!1,padding:h=0}=e,p=getSideObjectFromPadding(h),g=l[m?"floating"===u?"reference":"floating":u],f=rectToClientRect(await a.getClippingRect({element:null==(i=await(null==a.isElement?void 0:a.isElement(g)))||i?g:g.contextElement||await(null==a.getDocumentElement?void 0:a.getDocumentElement(l.floating)),boundary:c,rootBoundary:d,strategy:r})),v="floating"===u?{...s.floating,x:o,y:n}:s.reference,b=await(null==a.getOffsetParent?void 0:a.getOffsetParent(l.floating)),y=await(null==a.isElement?void 0:a.isElement(b))&&await(null==a.getScale?void 0:a.getScale(b))||{x:1,y:1},_=rectToClientRect(a.convertOffsetParentRelativeRectToViewportRelativeRect?await a.convertOffsetParentRelativeRectToViewportRelativeRect({rect:v,offsetParent:b,strategy:r}):v);return{top:(f.top-_.top+p.top)/y.y,bottom:(_.bottom-f.bottom+p.bottom)/y.y,left:(f.left-_.left+p.left)/y.x,right:(_.right-f.right+p.right)/y.x}}const min$1=Math.min,max$1=Math.max;function within(t,e,i){return max$1(t,min$1(e,i))}const arrow=t=>({name:"arrow",options:t,async fn(e){const{element:i,padding:o=0}=t||{},{x:n,y:a,placement:s,rects:l,platform:r,elements:c}=e;if(null==i)return{};const d=getSideObjectFromPadding(o),u={x:n,y:a},m=getMainAxisFromPlacement(s),h=getLengthFromAxis(m),p=await r.getDimensions(i),g="y"===m,f=g?"top":"left",v=g?"bottom":"right",b=g?"clientHeight":"clientWidth",y=l.reference[h]+l.reference[m]-u[m]-l.floating[h],_=u[m]-l.reference[m],w=await(null==r.getOffsetParent?void 0:r.getOffsetParent(i));let x=w?w[b]:0;x&&await(null==r.isElement?void 0:r.isElement(w))||(x=c.floating[b]||l.floating[h]);const E=y/2-_/2,C=d[f],S=x-p[h]-d[v],A=x/2-p[h]/2+E,k=within(C,A,S),T=null!=getAlignment(s)&&A!=k&&l.reference[h]/2-(A<C?d[f]:d[v])-p[h]/2<0;return{[m]:u[m]-(T?A<C?C-A:S-A:0),data:{[m]:k,centerOffset:A-k}}}}),oppositeSideMap={left:"right",right:"left",bottom:"top",top:"bottom"};function getOppositePlacement(t){return t.replace(/left|right|bottom|top/g,(t=>oppositeSideMap[t]))}function getAlignmentSides(t,e,i){void 0===i&&(i=!1);const o=getAlignment(t),n=getMainAxisFromPlacement(t),a=getLengthFromAxis(n);let s="x"===n?o===(i?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[a]>e.floating[a]&&(s=getOppositePlacement(s)),{main:s,cross:getOppositePlacement(s)}}const oppositeAlignmentMap={start:"end",end:"start"};function getOppositeAlignmentPlacement(t){return t.replace(/start|end/g,(t=>oppositeAlignmentMap[t]))}function getExpandedPlacements(t){const e=getOppositePlacement(t);return[getOppositeAlignmentPlacement(t),e,getOppositeAlignmentPlacement(e)]}function getSideList(t,e,i){const o=["left","right"],n=["right","left"],a=["top","bottom"],s=["bottom","top"];switch(t){case"top":case"bottom":return i?e?n:o:e?o:n;case"left":case"right":return e?a:s;default:return[]}}function getOppositeAxisPlacements(t,e,i,o){const n=getAlignment(t);let a=getSideList(getSide(t),"start"===i,o);return n&&(a=a.map((t=>t+"-"+n)),e&&(a=a.concat(a.map(getOppositeAlignmentPlacement)))),a}const flip=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var i;const{placement:o,middlewareData:n,rects:a,initialPlacement:s,platform:l,elements:r}=e,{mainAxis:c=!0,crossAxis:d=!0,fallbackPlacements:u,fallbackStrategy:m="bestFit",fallbackAxisSideDirection:h="none",flipAlignment:p=!0,...g}=t,f=getSide(o),v=getSide(s)===s,b=await(null==l.isRTL?void 0:l.isRTL(r.floating)),y=u||(v||!p?[getOppositePlacement(s)]:getExpandedPlacements(s));u||"none"===h||y.push(...getOppositeAxisPlacements(s,p,h,b));const _=[s,...y],w=await detectOverflow(e,g),x=[];let E=(null==(i=n.flip)?void 0:i.overflows)||[];if(c&&x.push(w[f]),d){const{main:t,cross:e}=getAlignmentSides(o,a,b);x.push(w[t],w[e])}if(E=[...E,{placement:o,overflows:x}],!x.every((t=>t<=0))){var C,S;const t=((null==(C=n.flip)?void 0:C.index)||0)+1,e=_[t];if(e)return{data:{index:t,overflows:E},reset:{placement:e}};let i=null==(S=E.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:S.placement;if(!i)switch(m){case"bestFit":{var A;const t=null==(A=E.map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:A[0];t&&(i=t);break}case"initialPlacement":i=s}if(o!==i)return{reset:{placement:i}}}return{}}}};async function convertValueToCoords(t,e){const{placement:i,platform:o,elements:n}=t,a=await(null==o.isRTL?void 0:o.isRTL(n.floating)),s=getSide(i),l=getAlignment(i),r="x"===getMainAxisFromPlacement(i),c=["left","top"].includes(s)?-1:1,d=a&&r?-1:1,u="function"==typeof e?e(t):e;let{mainAxis:m,crossAxis:h,alignmentAxis:p}="number"==typeof u?{mainAxis:u,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...u};return l&&"number"==typeof p&&(h="end"===l?-1*p:p),r?{x:h*d,y:m*c}:{x:m*c,y:h*d}}const offset=function(t){return void 0===t&&(t=0),{name:"offset",options:t,async fn(e){const{x:i,y:o}=e,n=await convertValueToCoords(e,t);return{x:i+n.x,y:o+n.y,data:n}}}};function getCrossAxis(t){return"x"===t?"y":"x"}const shift=function(t){return void 0===t&&(t={}),{name:"shift",options:t,async fn(e){const{x:i,y:o,placement:n}=e,{mainAxis:a=!0,crossAxis:s=!1,limiter:l={fn:t=>{let{x:e,y:i}=t;return{x:e,y:i}}},...r}=t,c={x:i,y:o},d=await detectOverflow(e,r),u=getMainAxisFromPlacement(getSide(n)),m=getCrossAxis(u);let h=c[u],p=c[m];if(a){const t="y"===u?"bottom":"right";h=within(h+d["y"===u?"top":"left"],h,h-d[t])}if(s){const t="y"===m?"bottom":"right";p=within(p+d["y"===m?"top":"left"],p,p-d[t])}const g=l.fn({...e,[u]:h,[m]:p});return{...g,data:{x:g.x-i,y:g.y-o}}}}};function getWindow(t){var e;return(null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function getComputedStyle$1(t){return getWindow(t).getComputedStyle(t)}function isNode(t){return t instanceof getWindow(t).Node}function getNodeName(t){return isNode(t)?(t.nodeName||"").toLowerCase():""}let uaString;function getUAString(){if(uaString)return uaString;const t=navigator.userAgentData;return t&&Array.isArray(t.brands)?(uaString=t.brands.map((t=>t.brand+"/"+t.version)).join(" "),uaString):navigator.userAgent}function isHTMLElement(t){return t instanceof getWindow(t).HTMLElement}function isElement(t){return t instanceof getWindow(t).Element}function isShadowRoot(t){if("undefined"==typeof ShadowRoot)return!1;return t instanceof getWindow(t).ShadowRoot||t instanceof ShadowRoot}function isOverflowElement(t){const{overflow:e,overflowX:i,overflowY:o,display:n}=getComputedStyle$1(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+i)&&!["inline","contents"].includes(n)}function isTableElement(t){return["table","td","th"].includes(getNodeName(t))}function isContainingBlock(t){const e=/firefox/i.test(getUAString()),i=getComputedStyle$1(t),o=i.backdropFilter||i.WebkitBackdropFilter;return"none"!==i.transform||"none"!==i.perspective||!!o&&"none"!==o||e&&"filter"===i.willChange||e&&!!i.filter&&"none"!==i.filter||["transform","perspective"].some((t=>i.willChange.includes(t)))||["paint","layout","strict","content"].some((t=>{const e=i.contain;return null!=e&&e.includes(t)}))}function isClientRectVisualViewportBased(){return/^((?!chrome|android).)*safari/i.test(getUAString())}function isLastTraversableNode(t){return["html","body","#document"].includes(getNodeName(t))}const min=Math.min,max=Math.max,round=Math.round;function getCssDimensions(t){const e=getComputedStyle$1(t);let i=parseFloat(e.width),o=parseFloat(e.height);const n=isHTMLElement(t),a=n?t.offsetWidth:i,s=n?t.offsetHeight:o,l=round(i)!==a||round(o)!==s;return l&&(i=a,o=s),{width:i,height:o,fallback:l}}function unwrapElement(t){return isElement(t)?t:t.contextElement}const FALLBACK_SCALE={x:1,y:1};function getScale(t){const e=unwrapElement(t);if(!isHTMLElement(e))return FALLBACK_SCALE;const i=e.getBoundingClientRect(),{width:o,height:n,fallback:a}=getCssDimensions(e);let s=(a?round(i.width):i.width)/o,l=(a?round(i.height):i.height)/n;return s&&Number.isFinite(s)||(s=1),l&&Number.isFinite(l)||(l=1),{x:s,y:l}}function getBoundingClientRect(t,e,i,o){var n,a;void 0===e&&(e=!1),void 0===i&&(i=!1);const s=t.getBoundingClientRect(),l=unwrapElement(t);let r=FALLBACK_SCALE;e&&(o?isElement(o)&&(r=getScale(o)):r=getScale(t));const c=l?getWindow(l):window,d=isClientRectVisualViewportBased()&&i;let u=(s.left+(d&&(null==(n=c.visualViewport)?void 0:n.offsetLeft)||0))/r.x,m=(s.top+(d&&(null==(a=c.visualViewport)?void 0:a.offsetTop)||0))/r.y,h=s.width/r.x,p=s.height/r.y;if(l){const t=getWindow(l),e=o&&isElement(o)?getWindow(o):o;let i=t.frameElement;for(;i&&o&&e!==t;){const t=getScale(i),e=i.getBoundingClientRect(),o=getComputedStyle(i);e.x+=(i.clientLeft+parseFloat(o.paddingLeft))*t.x,e.y+=(i.clientTop+parseFloat(o.paddingTop))*t.y,u*=t.x,m*=t.y,h*=t.x,p*=t.y,u+=e.x,m+=e.y,i=getWindow(i).frameElement}}return rectToClientRect({width:h,height:p,x:u,y:m})}function getDocumentElement(t){return((isNode(t)?t.ownerDocument:t.document)||window.document).documentElement}function getNodeScroll(t){return isElement(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function convertOffsetParentRelativeRectToViewportRelativeRect(t){let{rect:e,offsetParent:i,strategy:o}=t;const n=isHTMLElement(i),a=getDocumentElement(i);if(i===a)return e;let s={scrollLeft:0,scrollTop:0},l={x:1,y:1};const r={x:0,y:0};if((n||!n&&"fixed"!==o)&&(("body"!==getNodeName(i)||isOverflowElement(a))&&(s=getNodeScroll(i)),isHTMLElement(i))){const t=getBoundingClientRect(i);l=getScale(i),r.x=t.x+i.clientLeft,r.y=t.y+i.clientTop}return{width:e.width*l.x,height:e.height*l.y,x:e.x*l.x-s.scrollLeft*l.x+r.x,y:e.y*l.y-s.scrollTop*l.y+r.y}}function getWindowScrollBarX(t){return getBoundingClientRect(getDocumentElement(t)).left+getNodeScroll(t).scrollLeft}function getDocumentRect(t){const e=getDocumentElement(t),i=getNodeScroll(t),o=t.ownerDocument.body,n=max(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),a=max(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let s=-i.scrollLeft+getWindowScrollBarX(t);const l=-i.scrollTop;return"rtl"===getComputedStyle$1(o).direction&&(s+=max(e.clientWidth,o.clientWidth)-n),{width:n,height:a,x:s,y:l}}function getParentNode(t){if("html"===getNodeName(t))return t;const e=t.assignedSlot||t.parentNode||isShadowRoot(t)&&t.host||getDocumentElement(t);return isShadowRoot(e)?e.host:e}function getNearestOverflowAncestor(t){const e=getParentNode(t);return isLastTraversableNode(e)?e.ownerDocument.body:isHTMLElement(e)&&isOverflowElement(e)?e:getNearestOverflowAncestor(e)}function getOverflowAncestors(t,e){var i;void 0===e&&(e=[]);const o=getNearestOverflowAncestor(t),n=o===(null==(i=t.ownerDocument)?void 0:i.body),a=getWindow(o);return n?e.concat(a,a.visualViewport||[],isOverflowElement(o)?o:[]):e.concat(o,getOverflowAncestors(o))}function getViewportRect(t,e){const i=getWindow(t),o=getDocumentElement(t),n=i.visualViewport;let a=o.clientWidth,s=o.clientHeight,l=0,r=0;if(n){a=n.width,s=n.height;const t=isClientRectVisualViewportBased();(!t||t&&"fixed"===e)&&(l=n.offsetLeft,r=n.offsetTop)}return{width:a,height:s,x:l,y:r}}function getInnerBoundingClientRect(t,e){const i=getBoundingClientRect(t,!0,"fixed"===e),o=i.top+t.clientTop,n=i.left+t.clientLeft,a=isHTMLElement(t)?getScale(t):{x:1,y:1};return{width:t.clientWidth*a.x,height:t.clientHeight*a.y,x:n*a.x,y:o*a.y}}function getClientRectFromClippingAncestor(t,e,i){let o;if("viewport"===e)o=getViewportRect(t,i);else if("document"===e)o=getDocumentRect(getDocumentElement(t));else if(isElement(e))o=getInnerBoundingClientRect(e,i);else{const i={...e};if(isClientRectVisualViewportBased()){var n,a;const e=getWindow(t);i.x-=(null==(n=e.visualViewport)?void 0:n.offsetLeft)||0,i.y-=(null==(a=e.visualViewport)?void 0:a.offsetTop)||0}o=i}return rectToClientRect(o)}function getClippingElementAncestors(t,e){const i=e.get(t);if(i)return i;let o=getOverflowAncestors(t).filter((t=>isElement(t)&&"body"!==getNodeName(t))),n=null;const a="fixed"===getComputedStyle$1(t).position;let s=a?getParentNode(t):t;for(;isElement(s)&&!isLastTraversableNode(s);){const t=getComputedStyle$1(s),e=isContainingBlock(s);if("fixed"===t.position)n=null;else{(a?!e&&!n:!e&&"static"===t.position&&!!n&&["absolute","fixed"].includes(n.position))?o=o.filter((t=>t!==s)):n=t}s=getParentNode(s)}return e.set(t,o),o}function getClippingRect(t){let{element:e,boundary:i,rootBoundary:o,strategy:n}=t;const a=[..."clippingAncestors"===i?getClippingElementAncestors(e,this._c):[].concat(i),o],s=a[0],l=a.reduce(((t,i)=>{const o=getClientRectFromClippingAncestor(e,i,n);return t.top=max(o.top,t.top),t.right=min(o.right,t.right),t.bottom=min(o.bottom,t.bottom),t.left=max(o.left,t.left),t}),getClientRectFromClippingAncestor(e,s,n));return{width:l.right-l.left,height:l.bottom-l.top,x:l.left,y:l.top}}function getDimensions(t){return getCssDimensions(t)}function getTrueOffsetParent(t,e){return isHTMLElement(t)&&"fixed"!==getComputedStyle$1(t).position?e?e(t):t.offsetParent:null}function getContainingBlock(t){let e=getParentNode(t);for(;isHTMLElement(e)&&!isLastTraversableNode(e);){if(isContainingBlock(e))return e;e=getParentNode(e)}return null}function getOffsetParent(t,e){const i=getWindow(t);if(!isHTMLElement(t))return i;let o=getTrueOffsetParent(t,e);for(;o&&isTableElement(o)&&"static"===getComputedStyle$1(o).position;)o=getTrueOffsetParent(o,e);return o&&("html"===getNodeName(o)||"body"===getNodeName(o)&&"static"===getComputedStyle$1(o).position&&!isContainingBlock(o))?i:o||getContainingBlock(t)||i}function getRectRelativeToOffsetParent(t,e,i){const o=isHTMLElement(e),n=getDocumentElement(e),a=getBoundingClientRect(t,!0,"fixed"===i,e);let s={scrollLeft:0,scrollTop:0};const l={x:0,y:0};if(o||!o&&"fixed"!==i)if(("body"!==getNodeName(e)||isOverflowElement(n))&&(s=getNodeScroll(e)),isHTMLElement(e)){const t=getBoundingClientRect(e,!0);l.x=t.x+e.clientLeft,l.y=t.y+e.clientTop}else n&&(l.x=getWindowScrollBarX(n));return{x:a.left+s.scrollLeft-l.x,y:a.top+s.scrollTop-l.y,width:a.width,height:a.height}}const platform={getClippingRect:getClippingRect,convertOffsetParentRelativeRectToViewportRelativeRect:convertOffsetParentRelativeRectToViewportRelativeRect,isElement:isElement,getDimensions:getDimensions,getOffsetParent:getOffsetParent,getDocumentElement:getDocumentElement,getScale:getScale,async getElementRects(t){let{reference:e,floating:i,strategy:o}=t;const n=this.getOffsetParent||getOffsetParent,a=this.getDimensions;return{reference:getRectRelativeToOffsetParent(e,await n(i),o),floating:{x:0,y:0,...await a(i)}}},getClientRects:t=>Array.from(t.getClientRects()),isRTL:t=>"rtl"===getComputedStyle$1(t).direction},computePosition=(t,e,i)=>{const o=new Map,n={platform:platform,...i},a={...n.platform,_c:o};return computePosition$1(t,e,{...n,platform:a})},defaultStyleCss$1=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],option,select{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}kol-tooltip #floating{animation-name:fadeInOpacity;animation-iteration-count:1;animation-timing-function:ease-in;animation-duration:0.5s;box-sizing:border-box;display:none;position:absolute;visibility:hidden}kol-tooltip #arrow{background:#333;height:10px;position:absolute;transform:rotate(45deg);width:10px;z-index:999}kol-tooltip kol-badge{position:relative;z-index:1000}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",KolTooltip=proxyCustomElement(class extends HTMLElement$1{constructor(){super(),this.__registerHost(),this.alignTooltip=t=>{var e,i;if("test"!==processEnv&&this.previousSibling){const o=this.previousSibling;if(this.tooltipElement){const n=this.tooltipElement,a=this.arrowElement,s=[(i=null!==(e=null==a?void 0:a.offsetHeight)&&void 0!==e?e:10,void 0===i&&(i=0),{name:"offset",options:i,async fn(t){const{x:e,y:o}=t,n=await convertValueToCoords(t,i);return{x:e+n.x,y:o+n.y,data:n}}}),flip(),shift()];a&&s.push(arrow({element:a})),computePosition(o,n,{placement:this.state._align,middleware:s}).then((({x:e,y:i,middlewareData:o,placement:s})=>{var l,r;const c=n.style.left,d=n.style.top;Object.assign(n.style,{left:`${e}px`,top:`${i}px`}),a&&((null===(l=o.arrow)||void 0===l?void 0:l.x)?Object.assign(a.style,{left:`${o.arrow.x}px`,top:"bottom"===s?-a.offsetHeight/2+"px":"",bottom:"top"===s?-a.offsetHeight/2+"px":""}):(null===(r=o.arrow)||void 0===r?void 0:r.y)&&Object.assign(a.style,{left:"right"===s?-a.offsetWidth/2+"px":"",right:"left"===s?-a.offsetWidth/2+"px":"",top:`${o.arrow.y}px`})),c!==n.style.left||d!==n.style.top?this.alignTooltip(t):"function"==typeof t&&t()}))}}},this.showTooltip=()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("display","block"),getDocument().body.addEventListener("keyup",this.hideTooltipByEscape),this.alignTooltip((()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("visibility","visible"),document.addEventListener("scroll",this.showTooltip))})))},this.hideTooltip=()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),document.removeEventListener("scroll",this.showTooltip))},this.hideTooltipByEscape=t=>{"Escape"===t.key&&(getDocument().body.removeEventListener("keyup",this.hideTooltipByEscape),this.hideTooltip())},this.addListeners=t=>{t.addEventListener("mouseover",this.incrementOverFocusCount),t.addEventListener("focus",this.incrementOverFocusCount),t.addEventListener("mouseout",this.decrementOverFocusCount),t.addEventListener("blur",this.decrementOverFocusCount)},this.removeListeners=t=>{t.removeEventListener("mouseover",this.incrementOverFocusCount),t.removeEventListener("focus",this.incrementOverFocusCount),t.removeEventListener("mouseout",this.decrementOverFocusCount),t.removeEventListener("blur",this.decrementOverFocusCount)},this.resyncListeners=t=>{this.removeListeners(t),this.addListeners(t)},this.catchHostElement=t=>{t&&(this.previousSibling=t.previousElementSibling,this.previousSibling&&this.resyncListeners(this.previousSibling))},this.catchTooltipElement=t=>{this.tooltipElement=t,this.tooltipElement&&this.resyncListeners(this.tooltipElement)},this.catchArrowElement=t=>{this.arrowElement=t},this.overFocusCount=0,this.incrementOverFocusCount=()=>{this.overFocusCount++,this.showOrHideTooltip()},this.decrementOverFocusCount=()=>{this.overFocusCount--,this.showOrHideTooltip()},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{clearTimeout(this.overFocusTimeout),this.overFocusCount>0?this.showTooltip():this.hideTooltip()}),250)},this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_id:nonce(),_label:"…"}}render(){return h(Host,{ref:this.catchHostElement},""!==this.state._label&&h("div",{id:"floating",ref:this.catchTooltipElement},h("div",{id:"arrow",ref:this.catchArrowElement}),h("kol-badge",{id:this.state._id,_color:{backgroundColor:"#333",color:"#ddd"},_label:this.state._label})))}validateAlign(t){watchTooltipAlignment(this,"_align",t)}validateId(t){watchString(this,"_id",t)}validateLabel(t){watchString(this,"_label",t)}componentWillLoad(){this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}disconnectedCallback(){this.previousSibling&&this.removeListeners(this.previousSibling),this.tooltipElement&&this.removeListeners(this.tooltipElement)}static get watchers(){return{_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}static get style(){return{default:defaultStyleCss$1}}},[32,"kol-tooltip",{_align:[1],_id:[1],_label:[1],state:[32]}]);function defineCustomElement$2(){if("undefined"==typeof customElements)return;["kol-tooltip","kol-badge","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-tooltip":customElements.get(t)||customElements.define(t,KolTooltip);break;case"kol-badge":customElements.get(t)||defineCustomElement();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$1();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}const KolButtonWc=proxyCustomElement(class extends HTMLElement$1{constructor(){super(),this.__registerHost(),this.nonce=nonce(),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this.onClick=t=>{var e,i;"submit"===this.state._type?propagateSubmitEventToForm({form:this.host,ref:this.ref}):"reset"===this.state._type?propagateResetEventToForm({form:this.host,ref:this.ref}):"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)?(t.stopPropagation(),setEventTarget(t,this.ref),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._value)):devWarning("It was no button click callback configured!")},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._icon=void 0,this._iconAlign=void 0,this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icon:{},_label:"…",_on:{},_type:"button",_variant:"normal"}}render(){return h(Host,null,h("button",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-current":mapStringOrBoolean2String(this.state._ariaCurrent),"aria-expanded":mapBoolean2String(this.state._ariaExpanded),"aria-label":!1===this.state._iconOnly?this.state._ariaLabel:void 0,"aria-labelledby":!0===this.state._iconOnly?this.nonce:void 0,"aria-selected":mapStringOrBoolean2String(this.state._ariaSelected),class:{[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"icon-only":!0===this.state._iconOnly},disabled:this.state._disabled,id:this.state._id},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),h("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this.state._label},h("slot",{name:"expert",slot:"expert"}))),!0===this.state._iconOnly&&h("kol-tooltip",{"aria-hidden":"true",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._ariaLabel||this.state._label}))}validateAccessKey(t){watchString(this,"_accessKey",t)}validateAriaControls(t){watchString(this,"_ariaControls",t)}validateAriaCurrent(t){watchValidator(this,"_ariaControls",(t=>!0===t||"date"===t||"location"===t||"page"===t||"step"===t||"time"===t),new Set(["boolean","String {data, location, page, step, time}"]),t)}validateAriaExpanded(t){validateAriaExpanded(this,t)}validateAriaLabel(t){validateAriaLabelWithLabel(this,t)}validateAriaSelected(t){watchBoolean(this,"_ariaSelected",t)}validateCustomClass(t){watchString(this,"_customClass",t,{defaultValue:void 0})}validateDisabled(t){validateDisabled(this,t),!0===t&&a11yHintDisabled()}validateIcon(t){validateIcon(this,t)}validateIconAlign(t){watchIconAlign(this,t)}validateIconOnly(t){watchBoolean(this,"_iconOnly",t,{defaultValue:!1})}validateId(t){watchString(this,"_id",t)}validateLabel(t){validateLabelWithAriaLabel(this,t)}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){watchString(this,"_role",t)}validateTabIndex(t){validateTabIndex(this,t)}validateTooltipAlign(t){watchTooltipAlignment(this,"_tooltipAlign",t)}validateType(t){watchButtonType(this,"_type",t)}validateValue(t){setState(this,"_value",t)}validateVariant(t){watchButtonVariant(this,"_variant",t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaLabel(this._ariaLabel),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateIcon(this._icon),this.validateIconAlign(this._iconAlign),this.validateIconOnly(this._iconOnly),this.validateId(this._id),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_icon:["validateIcon"],_iconAlign:["validateIconAlign"],_iconOnly:["validateIconOnly"],_id:["validateId"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}},[4,"kol-button-wc",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaCurrent:[8,"_aria-current"],_ariaExpanded:[516,"_aria-expanded"],_ariaLabel:[1025,"_aria-label"],_ariaSelected:[516,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[516],_icon:[1],_iconAlign:[1,"_icon-align"],_iconOnly:[516,"_icon-only"],_id:[1],_label:[1025],_on:[16],_role:[1],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[16],_variant:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-wc","kol-badge","kol-icon","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-button-wc":customElements.get(t)||customElements.define(t,KolButtonWc);break;case"kol-badge":customElements.get(t)||defineCustomElement();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}const defaultStyleCss=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],option,select{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>span{display:inline-flex;place-items:center}:host>span>kol-button-wc button{color:inherit}";featureHint("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const HACK_REG_EX=/^([a-f0-9]{3}|[a-f0-9]{6})$/,KolBadge=proxyCustomElement(class extends HTMLElement$1{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.bgColorStr="#000",this.colorStr="#fff",this.handleColorChange=t=>{let e,i=t;"string"==typeof i?(HACK_REG_EX.test(i)&&(devHint("[KolBadge] Bitte verwenden Sie zukünftig nur noch das Standard-Farbformat für CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."),i=`#${i}`),e=createContrastColorPair(i)):e=createContrastColorPair({background:i.backgroundColor,foreground:i.color}),e.contrast<7&&a11yHint(`[KolBadge] The contrast of ${e.contrast} (≥7, AAA) is too low, between the color pair ${e.background} and ${e.foreground}.`),this.bgColorStr=e.background,this.colorStr=e.foreground},this._color="#000",this._icon=void 0,this._iconOnly=!1,this._label=void 0,this._smartButton=void 0,this.state={_color:"#000",_label:"…"}}render(){return h(Host,null,h("span",{class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},h("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this.state._label}),"object"==typeof this.state._smartButton&&null!==this.state._smartButton&&h("kol-button-wc",{_ariaLabel:this.state._smartButton._ariaLabel,_customClass:this.state._smartButton._customClass,_disabled:this.state._smartButton._disabled,_icon:this.state._smartButton._icon,_iconOnly:!0,_id:this.state._smartButton._id,_label:this.state._smartButton._label,_on:this.state._smartButton._on,_tooltipAlign:this.state._smartButton._tooltipAlign,_variant:this.state._smartButton._variant})))}validateColor(t){watchValidator(this,"_color",(t=>"string"==typeof t||"object"==typeof t&&null!==t&&"string"==typeof t.backgroundColor&&"string"==typeof t.color),new Set(["string","KoliBriColor"]),t,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateLabel(t){validateLabel(this,t,{hooks:{afterPatch:t=>{"string"==typeof t&&t.length>32&&a11yHint(`[KolBadge] The label is too long for a badge (${t.length} > 32).`)}}})}validateSmartButton(t){objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(t){}setState(this,"_smartButton",t)}))}componentWillLoad(){this.validateColor(this._color),this.validateLabel(this._label),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_label:["validateLabel"],_smartButton:["validateSmartButton"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-badge",{_color:[1],_icon:[1],_iconOnly:[516,"_icon-only"],_label:[1],_smartButton:[1,"_smart-button"],state:[32]}]);function defineCustomElement(){if("undefined"==typeof customElements)return;["kol-badge","kol-badge","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-badge":customElements.get(t)||customElements.define(t,KolBadge);break;case"kol-badge":customElements.get(t)||defineCustomElement();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$1();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}export{KolBadge as K,defineCustomElement$1 as a,defineCustomElement as b,KolButtonWc as c,defineCustomElement$2 as d,watchButtonVariant as e,KolTooltip as f,propagateSubmitEventToForm as p,validateTabIndex as v,watchTooltipAlignment as w};