@six-group/ui-library 3.0.0-beta.1.11

package/dist/ui-library/p-d837e5a8.entry.js

@@ -0,0 +1 @@
+import{r as o,c as t,h as e,g as r}from"./p-30ebc1e7.js";import{F as i}from"./p-75297ad7.js";import{h as s}from"./p-b4dfb7cf.js";import{E as l}from"./p-9a860acc.js";let c=0,n=class{constructor(e){o(this,e),this.sixBlur=t(this,"six-checkbox-blur",7),this.sixChange=t(this,"six-checkbox-change",7),this.sixFocus=t(this,"six-checkbox-focus",7),this.inputId="checkbox-"+ ++c,this.labelId=`checkbox-label-${c}`,this.textId=`checkbox-text-${c}`,this.errorTextId=`input-error-text-${c}`,this.customErrorText="",this.customValidation=!1,this.eventListeners=new l,this.hasFocus=!1,this.hasLabelSlot=!1,this.hasErrorTextSlot=!1,this.disabled=!1,this.required=!1,this.label="",this.errorText="",this.checked=!1,this.indeterminate=!1,this.invalid=!1,this.errorOnBlur=!1,this.defaultState=!1}handleCheckedChange(){this.input&&(this.input.checked=this.checked,this.input.indeterminate=this.indeterminate,this.invalid=!this.input.checkValidity(),this.sixChange.emit())}handleLabelChange(){this.handleSlotChange()}connectedCallback(){this.handleChange=this.handleChange.bind(this),this.handleBlur=this.handleBlur.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleInvalid=this.handleInvalid.bind(this),this.host.shadowRoot.addEventListener("slotchange",this.handleSlotChange)}disconnectedCallback(){this.host.shadowRoot.removeEventListener("slotchange",this.handleSlotChange),this.eventListeners.removeAll()}componentWillLoad(){this.defaultState=this.checked,this.handleSlotChange()}componentDidLoad(){this.input.indeterminate=this.indeterminate,this.eventListeners.add(this.input,"invalid",(o=>{!this.customValidation&&(this.hasErrorTextSlot||this.errorText||this.customErrorText)||(this.customErrorText=this.input.validationMessage),o.preventDefault()}))}async setFocus(o){this.input.focus(o)}async removeFocus(){this.input.blur()}async reportValidity(){return this.input.reportValidity()}async checkValidity(){return this.input.validity.valid}async setCustomValidity(o){this.customErrorText="",this.customValidation=""!==o,this.input.setCustomValidity(o),this.invalid=!this.input.checkValidity()}async reset(){this.checked=this.defaultState,this.customErrorText="",this.customValidation=!1,this.input.setCustomValidity(""),this.invalid=!1}handleChange(){this.checked=this.input.checked,this.indeterminate=!1}handleBlur(){this.hasFocus=!1,this.sixBlur.emit()}handleFocus(){this.hasFocus=!0,this.sixFocus.emit()}handleMouseDown(o){o.preventDefault(),this.input.focus()}handleInvalid(){this.invalid=!0}handleSlotChange(){this.hasErrorTextSlot=s(this.host,"error-text"),this.hasLabelSlot=s(this.host,"label")}displayError(){return this.invalid&&(!this.errorOnBlur||!this.hasFocus)}render(){return e(i,{inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,errorTextId:this.errorTextId,errorText:this.customErrorText?this.customErrorText:this.errorText,hasErrorTextSlot:this.hasErrorTextSlot,size:"medium",disabled:this.disabled,required:this.required,displayError:this.displayError()},e("label",{part:"base",class:{checkbox:!0,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--invalid":this.invalid,"checkbox--indeterminate":this.indeterminate},htmlFor:this.inputId,onMouseDown:this.handleMouseDown},e("span",{part:"control",class:"checkbox__control"},this.checked&&e("span",{part:"checked-icon",class:"checkbox__icon"},e("svg",{viewBox:"0 0 16 16"},e("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd","stroke-linecap":"round"},e("g",{stroke:"currentColor","stroke-width":"2"},e("g",{transform:"translate(3.428571, 3.428571)"},e("path",{d:"M0,5.71428571 L3.42857143,9.14285714"}),e("path",{d:"M9.14285714,0 L3.42857143,9.14285714"})))))),!this.checked&&this.indeterminate&&e("span",{part:"indeterminate-icon",class:"checkbox__icon"},e("svg",{viewBox:"0 0 16 16"},e("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd","stroke-linecap":"round"},e("g",{stroke:"currentColor","stroke-width":"2"},e("g",{transform:"translate(2.285714, 6.857143)"},e("path",{d:"M10.2857143,1.14285714 L1.14285714,1.14285714"})))))),e("input",{ref:o=>this.input=o,id:this.inputId,type:"checkbox",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,required:this.required,role:"checkbox","aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onChange:this.handleChange,onBlur:this.handleBlur,onFocus:this.handleFocus,onInvalid:this.handleInvalid})),e("span",{part:"text",id:this.textId,class:"checkbox__text"},e("slot",null))))}get host(){return r(this)}static get watchers(){return{checked:["handleCheckedChange"],indeterminate:["handleCheckedChange"],errorText:["handleLabelChange"],label:["handleLabelChange"]}}};n.style=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:inline-block}.checkbox{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.checkbox__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size);border:solid var(--six-border-width) var(--six-input-border-color);border-radius:0;background-color:var(--six-input-background-color);color:var(--six-checkbox-color);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.checkbox__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.checkbox__control .checkbox__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.checkbox__control .checkbox__icon svg{width:100%;height:100%}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-hover)}.checkbox--checked .checkbox__control,.checkbox--indeterminate .checkbox__control{border-color:var(--six-selection-control-color);background-color:var(--six-selection-control-color)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-focus);background-color:var(--six-input-border-color-focus)}.checkbox--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.checkbox--disabled .checkbox__control{border-color:var(--six-input-border-color-disabled)}.checkbox--disabled.checkbox--checked .checkbox__control,.checkbox--disabled.checkbox--indeterminate .checkbox__control{background-color:var(--six-selection-control-color-disabled)}.checkbox--invalid:not(.checkbox--disabled) .checkbox__control{border-color:var(--six-input-border-color-danger)}.checkbox__text{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}';export{n as six_checkbox}

package/dist/ui-library/p-dd3cae68.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as e,g as r}from"./p-30ebc1e7.js";import{u as s,l as a}from"./p-eb8f05a9.js";import{h as o}from"./p-b4dfb7cf.js";import{i as h,M as n}from"./p-4f8394d7.js";const l=h();let d=0,p=class{constructor(e){t(this,e),this.sixShow=i(this,"six-drawer-show",7),this.sixAfterShow=i(this,"six-drawer-after-show",7),this.sixHide=i(this,"six-drawer-hide",7),this.sixAfterHide=i(this,"six-drawer-after-hide",7),this.sixInitialFocus=i(this,"six-drawer-initial-focus",7),this.sixOverlayDismiss=i(this,"six-drawer-overlay-dismiss",7),this.componentId="drawer-"+ ++d,this.willShow=!1,this.willHide=!1,this.hasFooter=!1,this.isVisible=!1,this.open=!1,this.label="",this.placement="right",this.contained=!1,this.noHeader=!1}handleOpenChange(){this.open?this.show():this.hide()}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this),this.handleTransitionEnd=this.handleTransitionEnd.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleOverlayClick=this.handleOverlayClick.bind(this),this.handleSlotChange=this.handleSlotChange.bind(this),this.modal=new n(this.host,{onFocusOut:()=>this.contained?null:this.panel.focus()})}componentWillLoad(){this.handleSlotChange(),this.open&&(this.show(),this.resetTransitionVariables())}disconnectedCallback(){s(this.host)}async show(){this.willShow||(this.sixShow.emit().defaultPrevented?this.open=!1:(this.willShow=!0,this.isVisible=!0,this.open=!0,this.contained||(this.modal.activate(),a(this.host)),this.open&&(l?requestAnimationFrame((()=>{this.sixInitialFocus.emit().defaultPrevented||this.panel.focus({preventScroll:!0})})):this.drawer.addEventListener("transitionend",(()=>{this.sixInitialFocus.emit().defaultPrevented||this.panel.focus()}),{once:!0}))))}async hide(){this.willHide||(this.sixHide.emit().defaultPrevented?this.open=!0:(this.willHide=!0,this.open=!1,this.modal.deactivate(),s(this.host)))}handleCloseClick(){this.hide()}handleKeyDown(t){"Escape"===t.key&&this.hide()}handleOverlayClick(){this.sixOverlayDismiss.emit().defaultPrevented||this.hide()}handleSlotChange(){this.hasFooter=o(this.host,"footer")}handleTransitionEnd(t){"transform"===t.propertyName&&t.target.classList.contains("drawer__panel")&&this.resetTransitionVariables()}resetTransitionVariables(){this.isVisible=this.open,this.willShow=!1,this.willHide=!1,this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}render(){return e("div",{ref:t=>this.drawer=t,part:"base",class:{drawer:!0,"drawer--open":this.open,"drawer--visible":this.isVisible,"drawer--top":"top"===this.placement,"drawer--right":"right"===this.placement,"drawer--bottom":"bottom"===this.placement,"drawer--left":"left"===this.placement,"drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--has-footer":this.hasFooter},onKeyDown:this.handleKeyDown,onTransitionEnd:this.handleTransitionEnd},e("div",{part:"overlay",class:"drawer__overlay",onClick:this.handleOverlayClick,tabIndex:-1}),e("div",{ref:t=>this.panel=t,part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":this.noHeader?null:`${this.componentId}-title`,tabIndex:0},!this.noHeader&&e("header",{part:"header",class:"drawer__header"},e("span",{part:"title",class:"drawer__title",id:`${this.componentId}-title`},e("slot",{name:"label"},this.label||String.fromCharCode(65279))),e("six-icon-button",{exportparts:"base:close-button",class:"drawer__close",name:"x",onClick:this.handleCloseClick})),e("div",{part:"body",class:"drawer__body"},e("slot",null)),e("footer",{part:"footer",class:"drawer__footer"},e("slot",{name:"footer",onSlotchange:this.handleSlotChange}))))}get host(){return r(this)}static get watchers(){return{open:["handleOpenChange"]}}};p.style=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--size:25rem;display:contents}.drawer{top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer:not(.drawer--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--six-z-index-drawer)}.drawer__panel{position:absolute;display:flex;flex-direction:column;z-index:2;max-width:100%;max-height:100%;background-color:var(--six-drawer-background-color);color:var(--six-drawer-color);box-shadow:var(--six-shadow-x-large);transition:var(--six-transition-medium) transform;overflow:auto;pointer-events:all}.drawer__panel:focus{outline:none}.drawer--top .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:100%;height:var(--size);transform:translate(0, -100%)}.drawer--right .drawer__panel{top:0;right:0;bottom:auto;left:auto;width:var(--size);height:100%;transform:translate(100%, 0)}.drawer--bottom .drawer__panel{top:auto;right:auto;bottom:0;left:0;width:100%;height:var(--size);transform:translate(0, 100%)}.drawer--left .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:var(--size);height:100%;transform:translate(-100%, 0)}.drawer--open .drawer__panel{transform:none}.drawer__header{display:flex}.drawer__title{flex:1 1 auto;font-size:var(--six-font-size-large);line-height:var(--six-line-height-dense);padding:var(--six-spacing-large)}.drawer__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-x-large);padding:0 var(--six-spacing-large)}.drawer__body{flex:1 1 auto;padding:var(--six-spacing-large);overflow:auto;-webkit-overflow-scrolling:touch}.drawer__footer{text-align:right;padding:var(--six-spacing-large)}.drawer__footer ::slotted(six-button:not(:last-of-type)){margin-right:var(--six-spacing-x-small)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--six-overlay-background-color);opacity:0;transition:var(--six-transition-medium) opacity;pointer-events:all}.drawer--contained .drawer__overlay{position:absolute}.drawer--open .drawer__overlay{opacity:0.4}";export{p as six_drawer}

package/dist/ui-library/p-ea781e94.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as s}from"./p-30ebc1e7.js";let o=0,h=class{constructor(s){t(this,s),this.sixBlur=i(this,"six-switch-blur",7),this.sixChange=i(this,"six-switch-change",7),this.sixFocus=i(this,"six-switch-focus",7),this.switchId="switch-"+ ++o,this.labelId=`switch-label-${o}`,this.hasFocus=!1,this.disabled=!1,this.required=!1,this.checked=!1,this.invalid=!1,this.defaultValue=""}handleCheckedChange(){this.input.checked=this.checked,this.sixChange.emit(this.checked)}connectedCallback(){this.handleClick=this.handleClick.bind(this),this.handleBlur=this.handleBlur.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this)}componentWillLoad(){this.defaultValue=this.value}async setFocus(t){this.input.focus(t)}async removeFocus(){this.input.blur()}async reportValidity(){return this.input.reportValidity()}async checkValidity(){return this.input.validity.valid}async setCustomValidity(t){this.input.setCustomValidity(t),this.invalid=!this.input.checkValidity()}async reset(){this.value=this.defaultValue,this.input.setCustomValidity(""),this.invalid=!1}handleClick(){this.checked=this.input.checked}handleBlur(){this.hasFocus=!1,this.sixBlur.emit(this.checked)}handleFocus(){this.hasFocus=!0,this.sixFocus.emit()}handleKeyDown(t){"ArrowLeft"===t.key&&(t.preventDefault(),this.checked=!1),"ArrowRight"===t.key&&(t.preventDefault(),this.checked=!0)}handleMouseDown(t){t.preventDefault(),this.input.focus()}render(){return s("label",{part:"base",htmlFor:this.switchId,class:{switch:!0,"switch--checked":this.checked,"switch--disabled":this.disabled,"switch--focused":this.hasFocus},onMouseDown:this.handleMouseDown},s("span",{part:"control",class:"switch__control"},s("span",{part:"thumb",class:"switch__thumb"}),s("input",{ref:t=>this.input=t,id:this.switchId,type:"checkbox",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,required:this.required,role:"switch","aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onClick:this.handleClick,onBlur:this.handleBlur,onFocus:this.handleFocus,onKeyDown:this.handleKeyDown})),s("span",{part:"label",id:this.labelId,class:"switch__label"},s("slot",null)))}static get watchers(){return{checked:["handleCheckedChange"]}}};h.style=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--height:var(--six-selection-control-toggle-size);--thumb-size:calc(var(--six-selection-control-toggle-size) - 4px);--width:calc(var(--height) * 2);display:inline-block}.switch{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.switch__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--width);height:var(--height);background-color:var(--six-selection-control-color-disabled);border-radius:var(--height);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color}.switch__control .switch__thumb{width:var(--thumb-size);height:var(--thumb-size);background-color:var(--six-input-background-color);border-radius:50%;transform:translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));transition:var(--six-transition-fast) transform ease, var(--six-transition-fast) background-color, var(--six-transition-fast) border-color, var(--six-transition-fast) box-shadow}.switch__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-hover)}.switch--checked .switch__control{background-color:var(--six-selection-control-color)}.switch--checked .switch__control .switch__thumb{background-color:var(--six-color-white);transform:translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2))}.switch.switch--checked:not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-focus)}.switch--disabled{cursor:not-allowed;color:var(--six-selection-control-color-disabled)}.switch--disabled .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch--disabled.switch--checked .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch__label{line-height:var(--height);margin-left:0.5em;user-select:none}";export{h as six_switch}

package/dist/ui-library/p-eae232c3.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as s,g as e}from"./p-30ebc1e7.js";const r=Object.assign(document.createElement("div"),{className:"six-toast-stack"});let a=class{constructor(s){t(this,s),this.sixShow=i(this,"six-alert-show",7),this.sixAfterShow=i(this,"six-alert-after-show",7),this.sixHide=i(this,"six-alert-hide",7),this.sixAfterHide=i(this,"six-alert-after-hide",7),this.isVisible=!1,this.open=!1,this.closable=!1,this.type="primary",this.duration=1/0}handleOpenChange(){this.open?this.show():this.hide()}handleDurationChange(){this.restartAutoHide()}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleTransitionEnd=this.handleTransitionEnd.bind(this)}componentWillLoad(){this.open&&this.show()}async show(){this.isVisible||(this.sixShow.emit().defaultPrevented?this.open=!1:(this.isVisible=!0,this.open=!0,this.duration<1/0&&(this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration))))}async hide(){this.isVisible&&(this.sixHide.emit().defaultPrevented?this.open=!0:(clearTimeout(this.autoHideTimeout),this.isVisible=!1,this.open=!1))}async toast(){return new Promise((t=>{r.parentElement||document.body.append(r),r.append(this.host),requestAnimationFrame((()=>this.show())),this.host.addEventListener("six-alert-after-hide",(()=>{this.host.remove(),t(),null===r.querySelector("six-alert")&&r.remove()}),{once:!0})}))}handleCloseClick(){this.hide()}handleMouseMove(){this.restartAutoHide()}handleTransitionEnd(t){"opacity"===t.propertyName&&t.target.classList.contains("alert")&&(this.isVisible=this.open,this.open?this.sixAfterShow.emit():this.sixAfterHide.emit())}restartAutoHide(){clearTimeout(this.autoHideTimeout),this.open&&this.duration<1/0&&(this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration))}render(){return s("div",{ref:t=>this.alert=t,part:"base",class:{alert:!0,"alert--open":this.open,"alert--visible":this.isVisible,"alert--closable":this.closable,"alert--primary":"primary"===this.type,"alert--success":"success"===this.type,"alert--info":"info"===this.type,"alert--warning":"warning"===this.type,"alert--danger":"danger"===this.type},role:"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":this.open?"false":"true",onMouseMove:this.handleMouseMove,onTransitionEnd:this.handleTransitionEnd},s("span",{part:"icon",class:"alert__icon"},s("slot",{name:"icon"})),s("span",{part:"message",class:"alert__message"},s("slot",null)),this.closable&&s("span",{class:"alert__close"},s("six-icon-button",{name:"clear",exportparts:"base:close-button",onClick:this.handleCloseClick})))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"]}}};a.style=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:contents;margin:0}.alert{position:relative;display:flex;align-items:stretch;background-color:var(--six-color-white);border:solid 1px var(--six-color-web-rock-200);border-top-width:3px;border-radius:var(--six-border-radius-medium);box-shadow:var(--box-shadow);font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:1.6;color:var(--six-color-web-rock-700);opacity:0;transform:scale(0.9);transition:var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;margin:inherit}.alert:not(.alert--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;transform:none}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large)}.alert__icon ::slotted(*){margin-left:var(--six-spacing-large)}.alert--primary{border-top-color:var(--six-color-web-rock-900)}.alert--primary .alert__icon{color:var(--six-color-web-rock-900)}.alert--success{border-top-color:var(--six-color-success-600)}.alert--success .alert__icon{color:var(--six-color-success-600)}.alert--info{border-top-color:var(--six-color-action-500)}.alert--info .alert__icon{color:var(--six-color-action-500)}.alert--warning{border-top-color:var(--six-color-warning-800)}.alert--warning .alert__icon{color:var(--six-color-warning-800)}.alert--danger{border-top-color:var(--six-color-danger-900)}.alert--danger .alert__icon{color:var(--six-color-danger-900)}.alert__message{flex:1 1 auto;padding:var(--six-spacing-large);overflow:hidden}.alert__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large);padding-right:var(--six-spacing-medium)}";export{a as six_alert}

package/dist/ui-library/p-eb0956d2.entry.js

@@ -0,0 +1 @@
+import{r as e,h as i}from"./p-30ebc1e7.js";var t;!function(e){e[e.FORBIDDEN=403]="FORBIDDEN",e[e.NOT_FOUND=404]="NOT_FOUND",e[e.INTERNAL_SERVER_ERROR=500]="INTERNAL_SERVER_ERROR"}(t||(t={}));const r={[t.FORBIDDEN]:{en:"Access Denied",de:"Kein Zugriff"},[t.NOT_FOUND]:{en:"Not Found",de:"Seite nicht gefunden"},[t.INTERNAL_SERVER_ERROR]:{en:"Ooops!",de:"Ups!"}},o={[t.FORBIDDEN]:{en:["You don’t have permission to access this page. ","Please contact an administrator or click the SIX logo on top left."],de:["Sie haben keine Zugriffsberechtigung auf diese Seite.","Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links."]},[t.NOT_FOUND]:{en:["We have not found the page you requested.","Please click the SIX logo on top left."],de:["Wir haben die angeforderte Seite nicht gefunden.","Bitte klicken Sie auf das SIX-Logo oben links."]},[t.INTERNAL_SERVER_ERROR]:{en:["Sorry, we messed up! We try to fix this.","Please click the SIX logo on top left."],de:["Sorry, das war unser Fehler! Wir versuchen das zu beheben.","Bitte klicken Sie auf das SIX-Logo oben links."]}};let s=class{constructor(i){e(this,i),this.language="en"}getIconName(){return void 0!==this.customIcon?this.customIcon:void 0!==this.errorCode?this.errorCode===t.FORBIDDEN?"lock":this.errorCode===t.NOT_FOUND?"find-in-page":this.errorCode===t.INTERNAL_SERVER_ERROR?"sentiment-dissatisfied":void 0:void 0}getErrorTitle(){return void 0!==this.customTitle?this.customTitle:void 0!==this.errorCode?r[this.errorCode][this.language]:void 0}getErrorDescription(){if(void 0!==this.errorCode||void 0!==this.customDescription)return this.getDescriptions().map((e=>i("div",null,e)))}getDescriptions(){return void 0!==this.customDescription?this.customDescription:o[this.errorCode][this.language]}render(){return i("div",{part:"container"},i("div",{class:"six-error-page__icon-container",part:"icon-container"},i("six-picto",{size:"4xl",class:"six-error-page__icon",part:"icon"},this.getIconName())),i("div",{class:"six-error-page__title",part:"title"},this.getErrorTitle()),i("div",{class:"six-error-page__description",part:"description"},this.getErrorDescription()))}};s.style=".six-error-page__title{display:flex;justify-content:center;font-size:var(--six-font-size-xx-large);font-weight:bold;margin-bottom:var(--six-spacing-large)}.six-error-page__description>*{text-align:center}.six-error-page__icon-container{display:flex;justify-content:center}.six-error-page__icon::part(icon){background-color:var(--six-color-web-rock-300)}";export{s as six_error_page}

package/dist/ui-library/p-eb8f05a9.js

@@ -0,0 +1 @@
+function o(o,t){return{top:Math.round(o.getBoundingClientRect().top-t.getBoundingClientRect().top),left:Math.round(o.getBoundingClientRect().left-t.getBoundingClientRect().left)}}const t=new Set;function e(o){t.add(o),document.body.classList.add("six-scroll-lock")}function n(o){t.delete(o),0===t.size&&document.body.classList.remove("six-scroll-lock")}function c(t,e,n="vertical",c="smooth"){const a=o(t,e),i=a.top+e.scrollTop,l=a.left+e.scrollLeft,r=e.scrollLeft+e.offsetWidth,s=e.scrollTop,h=e.scrollTop+e.offsetHeight;"horizontal"!==n&&"both"!==n||(l<e.scrollLeft?e.scrollTo({left:l,behavior:c}):l+t.clientWidth>r&&e.scrollTo({left:l-e.offsetWidth+t.clientWidth,behavior:c})),"vertical"!==n&&"both"!==n||(i<s?e.scrollTo({top:i,behavior:c}):i+t.clientHeight>h&&e.scrollTo({top:i-e.offsetHeight+t.clientHeight,behavior:c}))}export{o as g,e as l,c as s,n as u}

package/dist/ui-library/p-f00c1783.entry.js

@@ -0,0 +1 @@
+import{r as o,h as r}from"./p-30ebc1e7.js";let s=class{constructor(r){o(this,r)}render(){return r("footer",{class:"six-footer"},r("slot",null))}};s.style=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.six-footer{color:var(--six-color-web-rock-900);padding:var(--six-spacing-x-small) 0;text-align:center;width:100%;background-color:var(--six-footer-background-color);box-shadow:var(--six-shadow-x-large-top)}";export{s as six_footer}

package/dist/ui-library/ui-library.css

@@ -0,0 +1,10 @@
+@font-face{font-family:"Material Icons";font-style:normal;font-weight:400;font-display:block;src:url("./material-icons.woff2") format("woff2"), url("./material-icons.woff") format("woff")}.material-icons{font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}@font-face{font-family:"Material Icons Outlined";font-style:normal;font-weight:400;font-display:block;src:url("./material-icons-outlined.woff2") format("woff2"), url("./material-icons-outlined.woff") format("woff")}.material-icons-outlined{font-family:"Material Icons Outlined";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}@font-face{font-family:"Material Icons Round";font-style:normal;font-weight:400;font-display:block;src:url("./material-icons-round.woff2") format("woff2"), url("./material-icons-round.woff") format("woff")}.material-icons-round{font-family:"Material Icons Round";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}@font-face{font-family:"Material Icons Sharp";font-style:normal;font-weight:400;font-display:block;src:url("./material-icons-sharp.woff2") format("woff2"), url("./material-icons-sharp.woff") format("woff")}.material-icons-sharp{font-family:"Material Icons Sharp";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}@font-face{font-family:"Material Icons Two Tone";font-style:normal;font-weight:400;font-display:block;src:url("./material-icons-two-tone.woff2") format("woff2"), url("./material-icons-two-tone.woff") format("woff")}.material-icons-two-tone{font-family:"Material Icons Two Tone";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:100;src:url('./files/noto-sans-latin-100-normal.woff2') format('woff2'), url('./files/noto-sans-latin-100-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:200;src:url('./files/noto-sans-latin-200-normal.woff2') format('woff2'), url('./files/noto-sans-latin-200-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:300;src:url('./files/noto-sans-latin-300-normal.woff2') format('woff2'), url('./files/noto-sans-latin-300-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:400;src:url('./files/noto-sans-latin-400-normal.woff2') format('woff2'), url('./files/noto-sans-latin-400-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:500;src:url('./files/noto-sans-latin-500-normal.woff2') format('woff2'), url('./files/noto-sans-latin-500-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:600;src:url('./files/noto-sans-latin-600-normal.woff2') format('woff2'), url('./files/noto-sans-latin-600-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:700;src:url('./files/noto-sans-latin-700-normal.woff2') format('woff2'), url('./files/noto-sans-latin-700-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:800;src:url('./files/noto-sans-latin-800-normal.woff2') format('woff2'), url('./files/noto-sans-latin-800-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:900;src:url('./files/noto-sans-latin-900-normal.woff2') format('woff2'), url('./files/noto-sans-latin-900-normal.woff') format('woff')}:root{--six-color-red:#de3919;--six-color-black:#000;--six-color-white:#fff;--six-color-web-rock-900:#262626;--six-color-web-rock-800:#484848;--six-color-web-rock-700:#676767;--six-color-web-rock-600:#7b7b7b;--six-color-web-rock-500:#a5a5a5;--six-color-web-rock-400:#c3c3c3;--six-color-web-rock-300:#e5e5e5;--six-color-web-rock-200:#f1f1f1;--six-color-web-rock-100:#f6f6f6;--six-color-web-rock-50:#fbfbfb;--six-color-clay-200:#ada398;--six-color-clay-50:#ebe8e7;--six-color-danger-900:#c52c0f;--six-color-danger-800:#de3919;--six-color-danger-light-to-be-defined:#f58c78;--six-color-warning-800:#ef9f25;--six-color-warning-700:#f2b72c;--six-color-warning-light-to-be-defined:#f9deb4;--six-color-success-600:#58d200;--six-color-success-500:#6ae300;--six-color-success-light-to-be-defined:#aaff6c;--six-color-action-600:#1f87e5;--six-color-action-500:#2196f3;--six-color-action-light-to-be-defined:#a8d0f5;--six-color-inactive:#c3c3c3;--six-focus-ring-color:var(--six-color-web-rock-400);--six-color-table-selected:#ddecfb;--six-color-table-selected-hover:#a8d0f5}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}html,body{margin:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:'Noto Sans', sans-serif}code{background:rgba(0, 0, 0, 0.04);padding:0.2rem;border-radius:3px;font-weight:bold}.warn{border-left:solid 3px var(--six-color-warning-700);background:rgba(0, 0, 0, 0.02);padding:1rem}body>div.container{margin:1rem}:root{--six-border-radius-small:0rem;--six-border-radius-medium:0rem;--six-border-radius-large:0.5rem;--six-border-radius-x-large:1rem;--six-border-radius-circle:50%;--six-border-radius-pill:9999px;--six-shadow-x-small:0 1px 0 #00000029;--six-shadow-small:0 6px 12px 0px #00000029;--six-shadow-medium:0 12px 24px 0 #00000029;--six-shadow-large:0 2px 8px #0d131e1a;--six-shadow-x-large:0 4px 16px #0d131e1a;--six-shadow-x-large-top:0 -4px 16px #0d131e1a;--six-spacing-xxx-small:0.125rem;--six-spacing-xx-small:0.25rem;--six-spacing-x-small:0.5rem;--six-spacing-small:0.75rem;--six-spacing-medium:1rem;--six-spacing-large:1.25rem;--six-spacing-x-large:1.75rem;--six-spacing-xx-large:2.25rem;--six-spacing-xxx-large:3rem;--six-spacing-xxxx-large:4.5rem;--six-transition-x-slow:1000ms;--six-transition-slow:500ms;--six-transition-medium:250ms;--six-transition-fast:150ms;--six-transition-x-fast:50ms;--six-font-mono:SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;--six-font-sans:'Noto Sans', sans-serif;--six-font-family:var(--six-font-sans);--six-font-serif:Georgia, 'Times New Roman', serif;--six-font-size-xxx-small:0.5rem;--six-font-size-xx-small:0.625rem;--six-font-size-x-small:0.75rem;--six-font-size-small:0.875rem;--six-font-size-medium:1rem;--six-font-size-large:1.25rem;--six-font-size-x-large:1.5rem;--six-font-size-xx-large:2.25rem;--six-font-size-xxx-large:3rem;--six-font-size-xxxx-large:4.5rem;--six-font-weight-light:300;--six-font-weight-normal:400;--six-font-weight-semibold:500;--six-font-weight-bold:700;--six-letter-spacing-dense:-0.015em;--six-letter-spacing-normal:normal;--six-letter-spacing-loose:0.075em;--six-line-height-dense:1.4;--six-line-height-normal:1.8;--six-line-height-loose:2.2;--six-z-index-header:500;--six-z-index-search-field:500;--six-z-index-drawer:600;--six-z-index-dropdown:700;--six-z-index-toast:800;--six-z-index-tooltip:900;--six-z-index-dialog:1000;--six-elevation-1dp:0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.12);--six-elevation-2dp:0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14),
+    0 2px 2px 0 rgba(0, 0, 0, 0.12);--six-elevation-3dp:0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
+    0 3px 3px -2px rgba(0, 0, 0, 0.12);--six-elevation-4dp:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+    0 1px 10px -2px rgba(0, 0, 0, 0.12);--six-elevation-6dp:0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14),
+    0 1px 18px -2px rgba(0, 0, 0, 0.12);--six-elevation-8dp:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);--six-elevation-9dp:0 5px 6px -3px rgba(0, 0, 0, 0.2), 0 9px 12px 1px rgba(0, 0, 0, 0.14),
+    0 3px 16px 2px rgba(0, 0, 0, 0.12);--six-elevation-12dp:0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14),
+    0 5px 22px 4px rgba(0, 0, 0, 0.12);--six-elevation-16dp:0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14),
+    0 6px 30px 5px rgba(0, 0, 0, 0.12);--six-elevation-24dp:0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
+    0 9px 46px 8px rgba(0, 0, 0, 0.12);--six-height-small:1.875rem;--six-height-medium:2.5rem;--six-height-large:3.125rem;--six-border-width:1px;--six-focus-ring-width:1px;--six-focus-shadow:0 0 0 var(--six-focus-ring-width);--six-button-font-size-small:var(--six-font-size-small);--six-button-font-size-medium:var(--six-font-size-medium);--six-button-font-size-large:var(--six-font-size-large);--six-button-focus-shadow:var(--six-focus-shadow) var(--six-color-web-rock-400);--six-input-focus-shadow:var(--six-focus-shadow) var(--six-input-border-color-focus);--six-input-background-color:var(--six-color-white);--six-input-background-color-hover:var(--six-color-white);--six-input-background-color-focus:var(--six-color-white);--six-input-background-color-disabled:var(--six-color-web-rock-100);--six-input-border-color:var(--six-color-web-rock-400);--six-input-border-color-hover:var(--six-color-web-rock-600);--six-input-border-color-focus:var(--six-color-action-600);--six-input-border-color-danger:var(--six-color-danger-800);--six-input-border-color-disabled:var(--six-color-web-rock-400);--six-input-border-radius-small:var(--six-border-radius-medium);--six-input-border-radius-medium:var(--six-border-radius-medium);--six-input-border-radius-large:var(--six-border-radius-medium);--six-input-font-weight:var(--six-font-weight-normal);--six-input-font-size-small:var(--six-font-size-x-small);--six-input-font-size-medium:var(--six-font-size-small);--six-input-font-size-large:var(--six-font-size-medium);--six-input-letter-spacing:var(--six-letter-spacing-normal);--six-input-color:var(--six-color-web-rock-900);--six-input-color-hover:var(--six-color-web-rock-900);--six-input-color-focus:var(--six-color-web-rock-900);--six-input-color-disabled:var(--six-color-web-rock-600);--six-input-icon-color:var(--six-color-web-rock-900);--six-input-icon-color-hover:var(--six-color-web-rock-600);--six-input-icon-color-focus:var(--six-color-web-rock-900);--six-input-placeholder-color:var(--six-color-web-rock-500);--six-input-placeholder-color-disabled:var(--six-color-web-rock-500);--six-input-spacing-small:var(--six-spacing-small);--six-input-spacing-medium:var(--six-spacing-medium);--six-input-spacing-large:var(--six-spacing-large);--six-input-prefix-spacing-small:var(--six-spacing-xx-small);--six-input-prefix-spacing-medium:var(--six-spacing-x-small);--six-input-prefix-spacing-large:var(--six-spacing-small);--six-input-label-font-size-small:var(--six-font-size-xx-small);--six-input-label-font-size-medium:var(--six-font-size-x-small);--six-input-label-font-size-large:var(--six-font-size-small);--six-input-label-color:var(--six-color-web-rock-900);--six-input-label-color-disabled:var(--six-color-web-rock-600);--six-input-help-text-font-size-small:var(--six-font-size-xx-small);--six-input-help-text-font-size-medium:var(--six-font-size-x-small);--six-input-help-text-font-size-large:var(--six-font-size-small);--six-input-help-text-color:var(--six-color-web-rock-600);--six-input-help-text-color-disabled:var(--six-color-web-rock-600);--six-overlay-background-color:var(--six-color-web-rock-900);--six-panel-background-color:var(--six-color-white);--six-panel-border-color:var(--six-color-clay-50);--six-progress-track-color:var(--six-color-web-rock-300);--six-progress-indicator-color:var(--six-color-danger-800);--six-progress-label-color:var(--six-color-white);--six-tooltip-background-color:var(--six-color-web-rock-900);--six-tooltip-color:var(--six-color-white);--six-tooltip-arrow-size:5px;--six-tooltip-arrow-start-end-offset:8px;--six-tooltip-font-size:var(--six-font-size-small);--six-tooltip-font-weight:var(--six-font-weight-normal);--six-tooltip-line-height:var(--six-line-height-dense);--six-avatar-color:var(--six-color-white);--six-avatar-background-color:var(--six-color-web-rock-300);--six-checkbox-color:var(--six-color-white);--six-selection-control-color:var(--six-color-action-500);--six-selection-control-color-disabled:var(--six-color-web-rock-400);--six-selection-control-toggle-size:1rem;--six-details-color:var(--six-color-web-rock-600);--six-drawer-color:var(--six-color-web-rock-900);--six-drawer-background-color:var(--six-color-clay-50);--six-footer-background-color:var(--six-color-white);--six-header-background-color:var(--six-color-white);--six-header-border-color:var(--six-color-web-rock-300);--six-header-border-color-open:var(--six-color-web-rock-900);--six-header-border-with:1px;--six-header-selected-app-color-hover:var(--six-color-web-rock-600);--six-menu-divider-color:var(--six-color-clay-50);--six-menu-item-background-color:var(--six-color-clay-50);--six-search-color:var(--six-color-action-600);--six-sidebar-color:var(--six-color-web-rock-900);--six-sidebar-background-color:var(--six-color-white);--six-sidebar-hover-background-color:var(--six-color-clay-50);--six-sidebar-header-background-color:var(--six-color-clay-50);--six-sidebar-item-background-color:var(--six-color-web-rock-50);--six-tab-color:var(--six-color-web-rock-900);--six-tab-color-active:var(--six-color-web-rock-900);--six-tab-color-hover:var(--six-color-web-rock-700);--six-tab-color-disabled:var(--six-color-web-rock-400);--six-tab-border-color:var(--six-color-white);--six-tab-border-width:2px;--six-tab-border-color-active:var(--six-color-web-rock-900);--six-tab-border-width-active:3px;--six-table-background-color:var(--six-color-web-rock-100);--six-table-header-color:var(--six-color-web-rock-900);--six-table-header-border-color:var(--six-color-web-rock-900);--six-table-row-background-color:var(--six-color-web-rock-100);--six-table-row-background-color-hover:var(--six-color-clay-50);--six-table-row-border-color:var(--six-color-web-rock-400)}[hidden]{display:none !important}.six-scroll-lock{overflow:hidden !important}

package/dist/ui-library/ui-library.esm.js

@@ -0,0 +1 @@
+import{p as e,b as t}from"./p-30ebc1e7.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),e(a)})().then((e=>t(JSON.parse('[["p-54c48654",[[1,"six-table",{"striped":[4],"loading":[4],"data":[32],"setData":[64]},[[0,"data","handleData"]]]]],["p-0c596054",[[1,"six-select",{"multiple":[4],"maxTagsVisible":[2,"max-tags-visible"],"disabled":[4],"name":[1],"placeholder":[1],"filterPlaceholder":[1,"filter-placeholder"],"filterDebounce":[2,"filter-debounce"],"size":[1],"hoist":[4],"value":[1025],"pill":[4],"label":[1],"helpText":[1,"help-text"],"errorText":[1,"error-text"],"required":[4],"clearable":[4],"invalid":[1028],"line":[4],"errorOnBlur":[4,"error-on-blur"],"filter":[4],"asyncFilter":[4,"async-filter"],"autocomplete":[4],"inputDebounce":[2,"input-debounce"],"options":[16],"virtualScroll":[4,"virtual-scroll"],"defaultValue":[1,"default-value"],"hasFocus":[32],"hasHelpTextSlot":[32],"hasErrorTextSlot":[32],"hasLabelSlot":[32],"isOpen":[32],"displayLabel":[32],"displayTags":[32],"reportValidity":[64],"checkValidity":[64],"setCustomValidity":[64],"reset":[64]}]]],["p-531ab886",[[1,"six-header",{"shiftContent":[4,"shift-content"],"openHamburgerMenu":[4,"open-hamburger-menu"],"openSearch":[4,"open-search"],"clickableLogo":[4,"clickable-logo"],"selectedApp":[32],"selectedSection":[32],"setSearchOpenState":[64],"getIsSearchOpen":[64]}]]],["p-2d7ed407",[[1,"six-datepicker",{"type":[1],"locale":[1],"open":[1540],"inline":[516],"readonly":[4],"disabled":[4],"allowedDates":[16],"min":[16],"max":[16],"closeOnSelect":[4,"close-on-select"],"placement":[1],"size":[1],"required":[516],"defaultDate":[1,"default-date"],"placeholder":[1],"value":[1040],"containingElement":[16],"dateFormat":[1,"date-format"],"debounce":[2],"errorOnBlur":[4,"error-on-blur"],"errorText":[1,"error-text"],"label":[1],"name":[513],"clearable":[4],"iconPosition":[1,"icon-position"],"hoist":[4],"pointerDate":[32],"selectionMode":[32],"isDropDownContentUp":[32],"reportValidity":[64],"checkValidity":[64],"setCustomValidity":[64],"reset":[64],"select":[64]},[[9,"resize","resizeHandler"],[9,"scroll","scrollHandler"]]]]],["p-2053c61a",[[1,"six-root",{"breakpoint":[2],"padded":[4],"stage":[1],"version":[1],"collapse":[32]}]]],["p-4162dcdd",[[1,"six-tile",{"label":[1],"iconName":[8,"icon-name"],"closeable":[4],"elevated":[4],"disableTooltip":[4,"disable-tooltip"],"disabled":[516],"size":[513],"visible":[32],"hasIconSlot":[32],"hasLabelSlot":[32],"hide":[64],"show":[64]}]]],["p-eae232c3",[[1,"six-alert",{"open":[1540],"closable":[516],"type":[513],"duration":[2],"isVisible":[32],"show":[64],"hide":[64],"toast":[64]}]]],["p-044b784e",[[1,"six-dialog",{"open":[1540],"label":[1],"noHeader":[4,"no-header"],"hasFooter":[32],"isVisible":[32],"show":[64],"hide":[64]}]]],["p-dd3cae68",[[1,"six-drawer",{"open":[1540],"label":[1],"placement":[1],"contained":[4],"noHeader":[4,"no-header"],"hasFooter":[32],"isVisible":[32],"show":[64],"hide":[64]}]]],["p-281e8c2d",[[1,"six-search-field",{"placeholder":[1],"debounce":[514],"disabled":[516],"value":[513],"clearable":[4]}]]],["p-6d622ed0",[[1,"six-sidebar-item-group",{"name":[1],"icon":[1],"value":[513],"open":[516],"summaryIcon":[1,"summary-icon"],"hasItems":[32],"summaryIconHasContent":[32]}]]],["p-19ff1079",[[1,"six-tab",{"panel":[513],"active":[516],"closable":[4],"disabled":[516],"setFocus":[64],"removeFocus":[64]}]]],["p-4ed023b8",[[1,"six-tab-group",{"placement":[1],"noScrollControls":[4,"no-scroll-controls"],"hasScrollControls":[32],"show":[64]}]]],["p-c4b22513",[[1,"six-avatar",{"image":[1],"alt":[1],"initials":[1],"shape":[1],"hasError":[32]}]]],["p-4d3a4e93",[[1,"six-button",{"type":[513],"size":[513],"caret":[4],"disabled":[516],"loading":[516],"pill":[516],"circle":[516],"submit":[516],"reset":[516],"name":[1],"value":[1],"href":[1],"target":[1],"download":[1],"hasFocus":[32],"hasLabel":[32],"hasPrefix":[32],"hasSuffix":[32],"setFocus":[64],"removeFocus":[64]}]]],["p-eb0956d2",[[1,"six-error-page",{"errorCode":[2,"error-code"],"language":[1],"customTitle":[1,"custom-title"],"customDescription":[16],"customIcon":[1,"custom-icon"]}]]],["p-c536792e",[[1,"six-file-list-item",{"identifier":[513],"name":[513],"date":[513],"size":[514],"nodownload":[516],"nodelete":[516]}]]],["p-3a7daff8",[[2,"six-file-upload",{"compact":[4],"label":[1],"disabled":[4],"accept":[1],"maxFileSize":[2,"max-file-size"],"isOver":[32]},[[1,"dragenter","dragenterHandler"],[1,"dragover","dragoverHandler"],[1,"dragleave","dragleaveHandler"],[1,"drop","dropHandler"]]]]],["p-a98198bd",[[1,"six-badge",{"type":[1],"pill":[4],"pulse":[4]}]]],["p-8e8e922b",[[1,"six-card"]]],["p-d837e5a8",[[1,"six-checkbox",{"name":[1],"value":[1],"disabled":[4],"required":[4],"label":[1],"errorText":[1,"error-text"],"checked":[1540],"indeterminate":[1540],"invalid":[1540],"errorOnBlur":[4,"error-on-blur"],"hasFocus":[32],"hasLabelSlot":[32],"hasErrorTextSlot":[32],"setFocus":[64],"removeFocus":[64],"reportValidity":[64],"checkValidity":[64],"setCustomValidity":[64],"reset":[64]}]]],["p-7fe09462",[[1,"six-file-list"]]],["p-f00c1783",[[1,"six-footer"]]],["p-007bc8e8",[[1,"six-form",{"novalidate":[4],"getFormData":[64],"getFormControls":[64],"submit":[64],"checkValidity":[64],"reset":[64]}]]],["p-675a8243",[[1,"six-group-label",{"size":[513],"label":[1],"helpText":[1,"help-text"],"disabled":[516],"required":[516],"hasHelpTextSlot":[32],"hasLabelSlot":[32]}]]],["p-0493c926",[[1,"six-language-switcher",{"selected":[1537],"languages":[16]}]]],["p-bf110ea9",[[1,"six-layout-grid",{"columns":[8]}]]],["p-88e1e390",[[1,"six-main-container",{"padded":[4]}]]],["p-376b8f30",[[1,"six-menu-divider"]]],["p-3f577392",[[1,"six-menu-label"]]],["p-76bfa55f",[[1,"six-progress-bar",{"percentage":[2],"indeterminate":[4]}]]],["p-b391f704",[[1,"six-progress-ring",{"size":[2],"strokeWidth":[2,"stroke-width"],"percentage":[2]}]]],["p-354704e5",[[1,"six-radio",{"name":[1],"value":[1],"disabled":[4],"checked":[1540],"invalid":[1540],"hasFocus":[32],"setFocus":[64],"removeFocus":[64],"reportValidity":[64],"checkValidity":[64],"setCustomValidity":[64],"reset":[64]}]]],["p-09cb13fa",[[1,"six-range",{"name":[1],"value":[1026],"required":[516],"label":[1],"helpText":[1,"help-text"],"errorText":[1,"error-text"],"disabled":[4],"invalid":[1540],"min":[2],"max":[2],"step":[2],"tooltip":[1],"tooltipFormatter":[16],"errorOnBlur":[4,"error-on-blur"],"hasFocus":[32],"hasHelpTextSlot":[32],"hasLabelSlot":[32],"hasErrorTextSlot":[32],"hasTooltip":[32],"setFocus":[64],"removeFocus":[64],"setCustomValidity":[64],"reset":[64]}]]],["p-aa37e45a",[[1,"six-sidebar",{"position":[1],"open":[1540],"width":[1],"toggled":[4],"isVisible":[32],"toggle":[64],"show":[64],"hide":[64],"selectItemByIndex":[64],"selectItemByName":[64]}]]],["p-1005d1a8",[[1,"six-sidebar-item",{"value":[513],"selected":[516],"disabled":[516]}]]],["p-ea781e94",[[1,"six-switch",{"name":[1],"value":[1],"disabled":[4],"required":[4],"checked":[1540],"invalid":[1540],"hasFocus":[32],"setFocus":[64],"removeFocus":[64],"reportValidity":[64],"checkValidity":[64],"setCustomValidity":[64],"reset":[64]}]]],["p-b9377445",[[1,"six-tab-panel",{"name":[1],"active":[516]}]]],["p-cd79de73",[[1,"six-textarea",{"size":[513],"name":[513],"value":[1537],"label":[1],"helpText":[1,"help-text"],"errorText":[1,"error-text"],"placeholder":[1],"rows":[2],"resize":[1],"disabled":[516],"readonly":[516],"minlength":[514],"maxlength":[514],"required":[516],"invalid":[1540],"autocapitalize":[1],"autocorrect":[1],"autocomplete":[1],"autofocus":[4],"spellcheck":[4],"inputmode":[1],"errorOnBlur":[4,"error-on-blur"],"hasFocus":[32],"hasHelpTextSlot":[32],"hasErrorTextSlot":[32],"hasLabelSlot":[32],"setFocus":[64],"removeFocus":[64],"select":[64],"setSelectionRange":[64],"setRangeText":[64],"reportValidity":[64],"checkValidity":[64],"setCustomValidity":[64],"reset":[64]}]]],["p-d28ac80a",[[1,"six-timepicker",{"format":[1],"separator":[1],"value":[1025],"open":[1540],"inline":[516],"readonly":[4],"disabled":[4],"placement":[1],"size":[1],"required":[516],"placeholder":[1],"errorOnBlur":[4,"error-on-blur"],"errorText":[1,"error-text"],"label":[1],"name":[513],"clearable":[4],"iconPosition":[1,"icon-position"],"hoist":[4],"timeout":[2],"interval":[2],"defaultTime":[1,"default-time"],"debounce":[2],"isPopupContentUp":[32],"isDropDownContentUp":[32],"internalValue":[32],"reportValidity":[64],"checkValidity":[64],"setCustomValidity":[64],"reset":[64]},[[9,"resize","resizeHandler"],[9,"scroll","scrollHandler"]]]]],["p-66601906",[[1,"six-tag",{"type":[513],"size":[513],"pill":[516],"clearable":[516]}]]],["p-55c64cbc",[[1,"six-details",{"open":[1540],"summary":[1],"summaryIcon":[1,"summary-icon"],"summaryIconSize":[513,"summary-icon-size"],"disabled":[4],"inline":[4],"selectableEmpty":[4,"selectable-empty"],"hasContent":[4,"has-content"],"animateSummaryIcon":[32],"show":[64],"hide":[64]}]]],["p-d724bbc9",[[1,"six-picto",{"size":[1]}]]],["p-90b26447",[[1,"six-tooltip",{"content":[1],"placement":[1],"disabled":[4],"distance":[2],"open":[1540],"skidding":[2],"trigger":[1],"show":[64],"hide":[64]}]]],["p-6a4f0542",[[1,"six-icon",{"size":[513],"filled":[4]}]]],["p-6494e92d",[[1,"six-stage-indicator",{"stage":[1]}],[4,"set-attributes",{"value":[16]}]]],["p-2924f82f",[[1,"six-item-picker",{"value":[1544],"type":[1],"min":[1544],"max":[1544],"roundtrip":[516],"step":[514],"items":[16],"padded":[4],"paddingLength":[2,"padding-length"],"paddingChar":[1,"padding-char"],"paddingDirection":[1,"padding-direction"],"timeout":[2],"interval":[2],"debounce":[2],"_items":[32],"_itemIndexes":[32]}]]],["p-ce02c34f",[[1,"six-spinner",{"six":[4]}]]],["p-530ea6ec",[[1,"six-input",{"type":[513],"size":[513],"name":[513],"value":[1537],"pill":[516],"label":[1],"helpText":[1,"help-text"],"errorText":[1,"error-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"minlength":[514],"maxlength":[514],"min":[514],"max":[514],"step":[514],"pattern":[513],"required":[516],"autocapitalize":[1],"autocorrect":[1],"autocomplete":[1],"autofocus":[4],"spellcheck":[4],"invalid":[1540],"clearable":[4],"togglePassword":[4,"toggle-password"],"inputmode":[1],"line":[4],"errorOnBlur":[4,"error-on-blur"],"hasFocus":[32],"hasHelpTextSlot":[32],"hasErrorTextSlot":[32],"hasLabelSlot":[32],"isPasswordVisible":[32],"setFocus":[64],"removeFocus":[64],"select":[64],"setSelectionRange":[64],"setRangeText":[64],"reportValidity":[64],"checkValidity":[64],"setCustomValidity":[64],"getValidity":[64],"isValid":[64],"getValidationMessage":[64],"reset":[64]}]]],["p-1b8dc7b7",[[1,"six-icon-button",{"name":[513],"size":[513],"label":[513],"disabled":[516],"html":[513]}]]],["p-c24292b3",[[1,"six-dropdown",{"open":[1540],"placement":[1],"closeOnSelect":[4,"close-on-select"],"distance":[2],"skidding":[2],"hoist":[4],"containingElement":[16],"filter":[4],"asyncFilter":[4,"async-filter"],"filterPlaceholder":[1,"filter-placeholder"],"autofocusFilter":[4,"autofocus-filter"],"filterDebounce":[2,"filter-debounce"],"disableHideOnEnterAndSpace":[4,"disable-hide-on-enter-and-space"],"options":[16],"virtualScroll":[4,"virtual-scroll"],"_options":[32],"show":[64],"hide":[64],"reposition":[64]}],[1,"six-menu",{"removeBoxShadow":[4,"remove-box-shadow"],"items":[16],"itemsShown":[2,"items-shown"],"virtualScroll":[4,"virtual-scroll"],"itemSize":[2,"item-size"],"scrollingDebounce":[2,"scrolling-debounce"],"scrollingIndex":[32],"sixMenuItemHeight":[32],"typeToSelect":[64]}],[1,"six-menu-item",{"checked":[516],"value":[513],"disabled":[516],"hasFocus":[32],"setFocus":[64],"removeFocus":[64]}]]],["p-93945629",[[1,"six-table-header-cell",{"name":[1],"sort":[1],"filter":[1],"value":[1]}],[1,"six-table-cell"],[1,"six-table-header"],[1,"six-table-row"]]]]'),e)));

package/loader/cdn.js

@@ -0,0 +1,3 @@
+
+module.exports = require('../dist/cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.cjs.js

@@ -0,0 +1,3 @@
+
+module.exports = require('../dist/cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.d.ts

@@ -0,0 +1,12 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
+export declare function applyPolyfills(): Promise<void>;

package/loader/index.es2017.js

@@ -0,0 +1,3 @@
+
+export * from '../dist/esm/polyfills/index.js';
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,4 @@
+
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/polyfills/index.js';
+export * from '../dist/esm/loader.js';

package/loader/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "ui-library-loader",
+  "typings": "./index.d.ts",
+  "module": "./index.js",
+  "main": "./index.cjs.js",
+  "jsnext:main": "./index.es2017.js",
+  "es2015": "./index.es2017.js",
+  "es2017": "./index.es2017.js",
+  "unpkg": "./cdn.js"
+}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@six-group/ui-library",
+  "version": "3.0.0-beta.1.11",
+  "description": "Stencil Component Library following the SIX style guide",
+  "license": "Apache-2.0",
+  "main": "dist/index.cjs.js",
+  "module": "dist/custom-elements/index.js",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "types": "dist/custom-elements/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/ui-library/ui-library.esm.js",
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "scripts": {
+    "build": "npm run clean && stencil build --docs",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec",
+    "test:e2e": "stencil test --e2e",
+    "test:all": "stencil test --spec --e2e",
+    "test:inclScrnsht": "stencil test --spec --e2e --screenshot",
+    "test:inclCoverage": "stencil test --spec --coverage",
+    "test:e2eInclCoverage": "stencil test --e2e --coverage",
+    "test:allInclCoverage": "stencil test --spec --e2e --coverage",
+    "test:debug": "stencil test --spec --e2e --devtools",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate",
+    "clean": "rimraf dist loader www docs",
+    "lint": "eslint src/components/**/*{.ts,.tsx}",
+    "lint:fix": "eslint --fix src/**/*{.ts,.tsx}",
+    "prettier": "prettier --check src/**/*{.ts,.tsx,.html,.css,.scss}",
+    "prettier:fix": "prettier --write src/**/*{.ts,.tsx,.html,.css,.scss}",
+    "codeclean": "npm run lint:fix && npm run prettier:fix"
+  },
+  "dependencies": {
+    "@stencil/core": "2.14.0",
+    "@types/resize-observer-browser": "^0.1.5"
+  },
+  "devDependencies": {
+    "@fontsource/noto-sans": "^4.5.1",
+    "@popperjs/core": "^2.5.3",
+    "@stencil/angular-output-target": "0.4.0",
+    "@stencil/eslint-plugin": "^0.4.0",
+    "@stencil/react-output-target": "0.3.1",
+    "@stencil/sass": "^1.5.2",
+    "@stencil/vue-output-target": "0.6.0",
+    "@types/jest": "^26.0.15",
+    "@types/puppeteer": "^5.4.4",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "jest": "^26.6.3",
+    "jest-cli": "^26.6.3",
+    "material-icons": "^1.12.0",
+    "prettier": "2.3.1",
+    "puppeteer": "^13.3.2",
+    "puppeteer-core": "^13.3.2",
+    "replace-in-file": "^6.2.0",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.3.2"
+  },
+  "jest": {
+    "preset": "@stencil/core/testing",
+    "roots": [
+      "<rootDir>/src"
+    ]
+  }
+}

package/readme.md

@@ -0,0 +1,154 @@
+![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
+
+# Six UI Components
+
+This is the actual UI components library.
+
+The Webcomponents in this library are built with Stencil.
+
+## Stencil
+
+Stencil is a compiler for building fast web apps using Web Components.
+
+Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool.  Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
+
+Stencil components are just Web Components, so they work in any major framework or with no framework at all.
+
+## Getting Started
+
+To start building a new webcomponent using Stencil:
+
+```bash
+npm run generate six-name-of-new-component
+```
+
+This will create a new folder containing everything necessary for you to develop a new component
+
+
+To run the unit tests for the components, run:
+
+```bash
+npm test
+```
+
+Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
+
+## Testing
+
+To run all unit and e2e tests simply execute
+
+```bash
+npm run teste2e
+```
+
+If you want to run a specific file, simply add the filename ad the end to the command above:
+
+```bash
+npm run test:2e components/six-button/test/six-button.e2e.ts
+```
+
+For debugging stencil provides the `--devtools` flag. This will slow down chrome and open the devtools automatically.
+
+Simply add a `debugger;` statement in the code where you want the test to stop and run:
+
+```bash
+npm run test:debug components/six-button/test/six-button.e2e.ts
+```
+
+If you need evaluation at a certain breakpoint the easiest is to open the `ui-library` folder in vscode. The provided
+`launch.json` automatically adds the correct runconfigurations to debug tests in vscode
+
+If you want to do some more advanced debugging you can also use `page.evaluate`. Add the following in your code:
+
+```javascript
+await page.evaluate(() => {
+    console.log('this is some evaluation');
+    debugger;
+});
+```
+
+and run the same command as above:
+
+```bash
+npm run test:debug components/six-button/test/six-button.e2e.ts
+```
+
+FYI: There seems to be some weird bug when using `page.evaluate` where the browser first stops in a ghost breakpoint and 
+you have to reload the browser (Ctrl + R) to get to your evaluation endpoint.
+
+### Visual Diff Testing
+
+The flag `--screenshot` allows to run visual diff e2e tests. When we run these tests we will make a screenshot of the 
+component and compare it with previous screenshots. You can find the screenshots in [this image folder](./screenshot/images).
+
+When a screenshot test fails you can open the [compare.html](./screenshot/compare.html) which will present you what changed.
+
+When you actually redesigned the component and expect the changes simply delete the old images.
+
+The screenshot tests are not run in the build because the tests seem to always fail in the build and it's very hard to 
+figure out what exactly differs there. So if you want to validate the components are still working properly run it locally:
+
+`npm run test:inclScrnsht`
+
+## Adding documentation
+
+To see the documentation for your component you need to do the following:
+
+* add an `index.html` to your component folder
+* the `index.html` should have the following structure, where a div with the `container` class surrounds all your examples.
+And the code examples are wrapped in `<div class="container"></div>`:
+    ```html
+    <!DOCTYPE html>
+    <html dir="ltr" lang="en">
+    <head>
+      <meta charset="utf-8"/>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"/>
+      <script type="module" src="/build/ui-library.esm.js"></script>
+      <script nomodule src="/build/ui-library.js"></script>
+      <link rel="stylesheet" href="/build/ui-library.css">
+      <title>MyComponent</title>
+    </head>
+    <body>
+    <div class="container">
+      <h1>MyComponent</h1>
+      <p>MyComponent is used for blablabla</p>
+      <section class="demo">
+        <my-component></my-component>
+      </section>
+    </div>
+    </body>
+    </html>
+    ``` 
+* additionally you need to have an `EXAMPLES` comment in your readme.md:
+    ```
+    <!-- EXAMPLES -->
+    
+    <!-- Auto Generated Below -->
+    ```
+
+### Prepare
+
+Before creating a new version make sure that:
+* you built the projects to be publish (dist folder should be updated)
+* you updated [CHANGELOG.md](CHANGELOG.md)
+* you know which version to update to
+    * our library follows [Semantic Versioning](https://semver.org/) so follow this guide to decide what kind of version update you will bring:
+        * <b>MAJOR</b> version when you make incompatible API changes 
+            * <b>=></b> Users of the SIX Web Components Library must adapt their code to use the new version.
+        * <b>MINOR</b> version when you add functionality in a backwards compatible manner, and 
+            * <b>=></b> Users of the SIX Web Component Library can use new features but must not adapt their existing code.
+        * <b>PATCH</b> version when you make backwards compatible bug fixes. 
+            * <b>=></b> Users of the SIX Web Component Library get a bug fixed but must not adapt their existing code.
+        
+
+There are different ways how to create a new version:
+
+* manually increase the version in the `package.json` and `package-lock.json`
+* use `npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]`
+    * [see here for more details](https://docs.npmjs.com/updating-your-published-package-version-number)
+* [use lerna publish](https://lerna.js.org/)
+
+No matter what kind of method you use to bump the version make sure that the different packages are in sync - always publish these together:
+* ui-library
+- ui-library-react
+- ui-library-vue