wj-elements 0.1.0 → 0.1.2

package/dist/wje-slider.js

@@ -1,9 +1,9 @@
-var v = Object.defineProperty;
-var p = (a, o, r) => o in a ? v(a, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : a[o] = r;
-var l = (a, o, r) => (p(a, typeof o != "symbol" ? o + "" : o, r), r);
-import j from "./wje-element.js";
-const g = ':host{--wje-slider-track-height: .25rem;position:relative;display:flex;align-items:center;max-width:100%}:host .native-slider{display:flex;position:relative;flex-grow:1;align-items:center;height:inherit}:host .slider{display:flex;align-items:center;position:relative;flex:1 1 0%;width:100%;height:var(--height);contain:size layout style;cursor:grab;touch-action:pan-y}input[type=range]{-webkit-appearance:none;width:100%;height:var(--wje-slider-track-height);margin:0;border-radius:5px;background-size:70% 100%;background-repeat:no-repeat;--wje-slider-color: var(--wje-color-primary);--wje-slider-thumb-color: var(--wje-color-primary);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-2);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-2));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-primary)),var(--wje-slider-color, var(--wje-color-primary)))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;cursor:ew-resize;transition:background .3s ease-in-out}input[type=range]::-moz-range-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;cursor:pointer;transition:background .3s ease-in-out;border:0}input[type=range]::-ms-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;cursor:ew-resize;transition:background .3s ease-in-out}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}input[type=range]::-moz-range-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}input[type=range]::-ms-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}input[type=range][color=primary]{--wje-slider-color: var(--wje-color-primary);--wje-slider-thumb-color: var(--wje-color-primary);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-2);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-2));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-primary)),var(--wje-slider-color, var(--wje-color-primary)))}input[type=range][color=primary]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=primary]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=primary]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=primary]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=primary]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=primary]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=primary]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=primary]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=primary]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=success]{--wje-slider-color: var(--wje-color-success);--wje-slider-thumb-color: var(--wje-color-success);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-2);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-2));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-success)),var(--wje-slider-color, var(--wje-color-success)))}input[type=range][color=success]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=success]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=success]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=success]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=success]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=success]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=success]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=success]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=success]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=complete]{--wje-slider-color: var(--wje-color-complete);--wje-slider-thumb-color: var(--wje-color-complete);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-2);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-2));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-complete)),var(--wje-slider-color, var(--wje-color-complete)))}input[type=range][color=complete]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=complete]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=complete]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=complete]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=complete]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=complete]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=complete]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=complete]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=complete]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=danger]{--wje-slider-color: var(--wje-color-danger);--wje-slider-thumb-color: var(--wje-color-danger);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-2);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-2));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-danger)),var(--wje-slider-color, var(--wje-color-danger)))}input[type=range][color=danger]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=danger]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=danger]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=danger]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=danger]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=danger]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=danger]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=danger]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=danger]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=warning]{--wje-slider-color: var(--wje-color-warning);--wje-slider-thumb-color: var(--wje-color-warning);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-2);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-2));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-warning)),var(--wje-slider-color, var(--wje-color-warning)))}input[type=range][color=warning]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=warning]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=warning]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=warning]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=warning]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=warning]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=warning]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=warning]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=warning]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=dark]{--wje-slider-color: var(--wje-color-contrast-10);--wje-slider-thumb-color: var(--wje-color-contrast-10);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-6) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-6);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-6));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-contrast-10)),var(--wje-slider-color, var(--wje-color-contrast-10)))}input[type=range][color=dark]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=dark]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=dark]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=dark]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=dark]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=dark]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=dark]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=dark]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=dark]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}datalist{display:flex;justify-content:space-between;height:auto;overflow:hidden;margin-top:16px}datalist option:before{content:"";display:block;width:0;height:auto;padding-left:3px;text-indent:0}output{position:absolute;background:var(--wje-color-contrast-11);color:var(--wje-color-contrast-0);top:-46px;padding:4px 8px;border-radius:4px}::slotted([slot=label]){margin-inline:0 1rem;font-size:var(--wje-font-size)}::slotted([slot=start]){margin-inline:0 1rem}::slotted([slot=end]){margin-inline:1rem 0}';
-class b extends j {
+var p = Object.defineProperty;
+var j = (t, o, r) => o in t ? p(t, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[o] = r;
+var c = (t, o, r) => (j(t, typeof o != "symbol" ? o + "" : o, r), r);
+import g, { event as s } from "./wje-element.js";
+const k = ':host{--wje-slider-track-height: .25rem;position:relative;display:flex;align-items:center;max-width:100%}:host .native-slider{display:flex;position:relative;flex-grow:1;align-items:center;height:inherit}:host .slider{display:flex;align-items:center;position:relative;flex:1 1 0%;width:100%;height:var(--height);contain:size layout style;cursor:grab;touch-action:pan-y}input[type=range]{-webkit-appearance:none;width:100%;height:var(--wje-slider-track-height);margin:0;border-radius:5px;background-size:70% 100%;background-repeat:no-repeat;--wje-slider-color: var(--wje-color-primary);--wje-slider-thumb-color: var(--wje-color-primary);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-2);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-2));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-primary)),var(--wje-slider-color, var(--wje-color-primary)))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;cursor:ew-resize;transition:background .3s ease-in-out}input[type=range]::-moz-range-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;cursor:pointer;transition:background .3s ease-in-out;border:0}input[type=range]::-ms-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;cursor:ew-resize;transition:background .3s ease-in-out}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}input[type=range]::-moz-range-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}input[type=range]::-ms-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}input[type=range][color=primary]{--wje-slider-color: var(--wje-color-primary);--wje-slider-thumb-color: var(--wje-color-primary);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-2);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-2));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-primary)),var(--wje-slider-color, var(--wje-color-primary)))}input[type=range][color=primary]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=primary]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=primary]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=primary]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=primary]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=primary]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=primary]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=primary]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=primary]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=success]{--wje-slider-color: var(--wje-color-success);--wje-slider-thumb-color: var(--wje-color-success);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-2);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-2));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-success)),var(--wje-slider-color, var(--wje-color-success)))}input[type=range][color=success]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=success]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=success]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=success]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=success]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=success]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=success]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=success]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=success]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=complete]{--wje-slider-color: var(--wje-color-complete);--wje-slider-thumb-color: var(--wje-color-complete);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-2);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-2));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-complete)),var(--wje-slider-color, var(--wje-color-complete)))}input[type=range][color=complete]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=complete]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=complete]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=complete]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=complete]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=complete]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=complete]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=complete]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=complete]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=danger]{--wje-slider-color: var(--wje-color-danger);--wje-slider-thumb-color: var(--wje-color-danger);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-2);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-2));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-danger)),var(--wje-slider-color, var(--wje-color-danger)))}input[type=range][color=danger]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=danger]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=danger]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=danger]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=danger]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=danger]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=danger]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=danger]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=danger]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=warning]{--wje-slider-color: var(--wje-color-warning);--wje-slider-thumb-color: var(--wje-color-warning);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-2);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-2));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-warning)),var(--wje-slider-color, var(--wje-color-warning)))}input[type=range][color=warning]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=warning]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=warning]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=warning]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=warning]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=warning]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=warning]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=warning]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=warning]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=dark]{--wje-slider-color: var(--wje-color-contrast-10);--wje-slider-thumb-color: var(--wje-color-contrast-10);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-6) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-6);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-6));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-contrast-10)),var(--wje-slider-color, var(--wje-color-contrast-10)))}input[type=range][color=dark]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=dark]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=dark]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=dark]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=dark]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=dark]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=dark]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=dark]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=dark]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}datalist{display:flex;justify-content:space-between;height:auto;overflow:hidden;margin-top:16px}datalist option:before{content:"";display:block;width:0;height:auto;padding-left:3px;text-indent:0}output{position:absolute;background:var(--wje-color-contrast-11);color:var(--wje-color-contrast-0);top:-46px;padding:4px 8px;border-radius:4px}::slotted([slot=label]){margin-inline:0 1rem;font-size:var(--wje-font-size)}::slotted([slot=start]){margin-inline:0 1rem}::slotted([slot=end]){margin-inline:1rem 0}';
+class m extends g {
   /**
    * Creates an instance of Slider.
    *
@@ -11,17 +11,17 @@ class b extends j {
    */
   constructor() {
     super();
-    l(this, "className", "Slider");
+    c(this, "className", "Slider");
     /**
      * Sets the handle position of the slider.
      */
-    l(this, "setHandlePosition", () => {
+    c(this, "setHandlePosition", () => {
       this.input.style.backgroundSize = this.getPercentage(this.input.value, this.input.min, this.input.max) + "% 100%";
     });
     /**
      * Sets the bubble of the slider.
      */
-    l(this, "setBubble", () => {
+    c(this, "setBubble", () => {
       let r = this.getPercentage(this.input.value, this.input.min, this.input.max);
       this.output.style.left = `calc(${r}% + (${8 - r * 0.15}px) - ${this.output.offsetWidth / 2}px)`, this.output.innerHTML = this.input.value;
     });
@@ -97,7 +97,7 @@ class b extends j {
    * @returns {CSSStyleSheet}
    */
   static get cssStyleSheet() {
-    return g;
+    return k;
   }
   /**
    * Returns the list of attributes to observe for changes.
@@ -106,7 +106,7 @@ class b extends j {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return ["max", "value"];
+    return ["max"];
   }
   /**
    * Sets up the attributes for the component.
@@ -122,82 +122,43 @@ class b extends j {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(r, c, n) {
-    let d = document.createDocumentFragment(), t = document.createElement("div");
-    t.className = "native-slider", t.setAttribute("part", "native");
-    let s = document.createElement("div");
-    s.className = "slider";
-    let u = document.createElement("slot");
-    u.name = "label";
+  draw(r, n, d) {
+    let u = document.createDocumentFragment(), a = document.createElement("div");
+    a.className = "native-slider", a.setAttribute("part", "native");
+    let l = document.createElement("div");
+    l.className = "slider";
     let w = document.createElement("slot");
-    w.name = "start";
+    w.name = "label";
     let h = document.createElement("slot");
-    h.name = "end";
+    h.name = "start";
+    let b = document.createElement("slot");
+    b.name = "end";
     let i = document.createElement("output");
     i.setAttribute("for", "slider"), i.id = "output", i.setAttribute("hidden", "");
     let e = document.createElement("input");
-    return e.type = "range", e.min = this.min, e.max = this.max, e.step = this.step, e.value = this.value, e.id = "slider", e.name = "slider", e.part = "slider", e.setAttribute("autocomplete", "off"), e.setAttribute("color", this.color || ""), e.addEventListener("input", (m) => {
-      this.setHandlePosition(m.target);
-    }), s.appendChild(e), this.hasAttribute("bubble") && s.appendChild(i), t.appendChild(u), t.appendChild(w), t.appendChild(s), t.appendChild(h), d.appendChild(t), this.input = e, this.output = i, d;
+    return e.type = "range", e.min = this.min, e.max = this.max, e.step = this.step, e.value = this.value, e.id = "slider", e.name = "slider", e.part = "slider", e.setAttribute("autocomplete", "off"), e.setAttribute("color", this.color || ""), e.addEventListener("input", null, (v) => {
+      this.setHandlePosition(v.target);
+    }), l.appendChild(e), this.hasAttribute("bubble") && l.appendChild(i), a.appendChild(w), a.appendChild(h), a.appendChild(l), a.appendChild(b), u.appendChild(a), this.input = e, this.output = i, u;
   }
   /**
    * Sets up the event listeners after the component is drawn.
    */
   afterDraw() {
-    this.setHandlePosition(), this.hasAttribute("bubble") && (this.output.innerHTML = this.input.value, this.output.removeAttribute("hidden"), setTimeout(this.setBubble, 50)), this.dispatchInit(this.input.value), this.input.addEventListener("input", (r) => {
-      this.value = r.target.value, this.dispatchMove(this.value), this.hasAttribute("bubble") && this.setBubble();
-    }), this.input.addEventListener("change", (r) => {
-      this.dispatchChange(r.target.value);
+    this.setHandlePosition(), this.hasAttribute("bubble") && (this.output.innerHTML = this.input.value, this.output.removeAttribute("hidden"), setTimeout(this.setBubble, 50)), s.dispatchCustomEvent(this.input, "wje-slider:init", {
+      value: this.input.value,
+      output: this.output
+    }), s.addListener(this.input, "input", null, (r) => {
+      this.value = r.target.value, s.dispatchCustomEvent(this.input, "wje-slider:move", {
+        value: r.target.value,
+        output: this.output
+      }), this.hasAttribute("bubble") && this.setBubble();
+    }), s.addListener(this.input, "change", null, (r) => {
+      s.dispatchCustomEvent(this.input, "wje-slider:change", {
+        value: r.target.value,
+        output: this.output
+      });
     });
   }
-  /**
-   * Dispatches the slider initialization event.
-   *
-   * @param {number} value - The value of the slider.
-   */
-  dispatchInit(r) {
-    this.dispatchEvent(
-      new CustomEvent("wje:slider-init", {
-        bubbles: !0,
-        detail: {
-          value: r,
-          output: this.output
-        }
-      })
-    );
-  }
-  /**
-   * Dispatches the slider move event.
-   *
-   * @param {number} value - The value of the slider.
-   */
-  dispatchMove(r) {
-    this.dispatchEvent(
-      new CustomEvent("wje:slider-move", {
-        bubbles: !0,
-        detail: {
-          value: r,
-          output: this.output
-        }
-      })
-    );
-  }
-  /**
-   * Dispatches the slider change event.
-   *
-   * @param {number} value - The value of the slider.
-   */
-  dispatchChange(r) {
-    this.dispatchEvent(
-      new CustomEvent("wje:slider-change", {
-        bubbles: !0,
-        detail: {
-          value: r,
-          output: this.output
-        }
-      })
-    );
-  }
   /**
    * Returns the percentage of the slider value.
    *
@@ -206,11 +167,11 @@ class b extends j {
    * @param {number} max - The maximum value of the slider.
    * @returns {number} The percentage of the slider value.
    */
-  getPercentage(r = 0, c, n) {
-    return Number((r - c) * 100 / (n - c)) || 0;
+  getPercentage(r = 0, n, d) {
+    return Number((r - n) * 100 / (d - n)) || 0;
   }
 }
-b.define("wje-slider", b);
+m.define("wje-slider", m);
 export {
-  b as default
+  m as default
 };

package/dist/wje-tab.js

@@ -1,9 +1,9 @@
-var s = Object.defineProperty;
-var l = (e, t, a) => t in e ? s(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
-var n = (e, t, a) => (l(e, typeof t != "symbol" ? t + "" : t, a), a);
-import d, { event as c } from "./wje-element.js";
+var l = Object.defineProperty;
+var d = (e, t, a) => t in e ? l(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
+var n = (e, t, a) => (d(e, typeof t != "symbol" ? t + "" : t, a), a);
+import c, { event as p } from "./wje-element.js";
 const b = ':host{--wje-font-size: 10px;--wje-tab-text-transfrom: uppercase;--wje-tab-font-weight: 500;--wje-tab-letter-spacing: .06em;--wje-tab-padding-inline: 1rem;--wje-tab-padding-top: .75rem;--wje-tab-padding-bottom: .75rem;--wje-tab-color-active: var(--wje-color-primary-11);--wje-tab-color-hover: var(--wje-color-primary-1);display:block;position:relative}:host a{display:block;align-items:center;white-space:nowrap;font-family:var(--wje-font-family-secondary);font-size:var(--wje-font-size);letter-spacing:var(--wje-tab-letter-spacing);text-transform:var(--wje-tab-text-transfrom);font-weight:var(--wje-tab-font-weight);text-decoration:none;padding-inline:var(--wje-tab-padding-inline);padding-top:var(--wje-tab-padding-top);padding-bottom:var(--wje-tab-padding-bottom);color:var(--wje-color)}:host a>svg{inline-size:1.5em;pointer-events:none}:host a:hover{background:var(--wje-tab-color-hover)}:host a:hover:after{display:block}:host a:after{content:" ";display:none;block-size:.15rem;writing-mode:var(--wje-tab-writing-mode);background:var(--wje-tab-color-active);position:absolute;bottom:var(--wje-tab-bottom);left:var(--wje-tab-start);right:var(--wje-tab-end);top:var(--wje-tab-top)}:host([disabled]) a{opacity:.5;cursor:not-allowed;background:inherit}:host([disabled]) a:after{display:none}:host([active]) a:after{display:block}';
-class i extends d {
+class i extends c {
   /**
    * Creates an instance of Tab.
    *
@@ -42,15 +42,15 @@ class i extends d {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(a, p, w) {
-    let r = document.createDocumentFragment(), o = document.createElement("a");
-    return o.setAttribute("href", "#" + this.panel), o.innerHTML = this.innerHTML, r.appendChild(o), r;
+  draw(a, w, m) {
+    let r = document.createDocumentFragment(), s = document.createElement("slot"), o = document.createElement("a");
+    return o.setAttribute("href", "#" + this.panel), o.appendChild(s), r.appendChild(o), r;
   }
   /**
    * Sets up the event listeners after the component is drawn.
    */
   afterDraw() {
-    c.addListener(this, "click", "wje:tab-change");
+    p.addListener(this, "click", "wje:tab-change");
   }
 }
 i.define("wje-tab", i);

package/dist/wje-toast.js

@@ -1,27 +1,27 @@
 var c = Object.defineProperty;
-var m = (i, t, e) => t in i ? c(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var p = (i, t, e) => (m(i, typeof t != "symbol" ? t + "" : t, e), e);
+var m = (e, t, i) => t in e ? c(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
+var p = (e, t, i) => (m(e, typeof t != "symbol" ? t + "" : t, i), i);
 import f from "./wje-element.js";
-const l = (i, t, e) => {
-  i.classList.add("pgn-simple"), t.innerHTML = "<div>" + e.message + "</div>", e.showClose && t.appendChild(a());
-}, b = (i, t, e) => {
-  i.classList.add("pgn-flip"), t.innerHTML = "<span>" + e.message + "</span>", e.showClose && t.appendChild(a());
-}, g = (i, t, e) => {
-  i.classList.add("pgn-circle");
+const l = (e, t, i) => {
+  e.classList.add("pgn-simple"), t.innerHTML = "<div>" + i.message + "</div>", t.appendChild(a());
+}, b = (e, t, i) => {
+  e.classList.add("pgn-flip"), t.innerHTML = "<span>" + i.message + "</span>", t.appendChild(a());
+}, g = (e, t, i) => {
+  e.classList.add("pgn-circle");
   let r = "", n = "";
-  e.title && (r = `<p><b>${e.title}</b></p>`), e.message && (n = `<p>${e.message}</p>`), t.innerHTML = `<wje-avatar>
+  i.title && (r = `<p><b>${i.title}</b></p>`), i.message && (n = `<p>${i.message}</p>`), t.innerHTML = `<wje-avatar>
       <img alt="Silhouette of a person's head" src="/assets/img/avatar.svg" />
     </wje-avatar>
     <div>
       ${r + n}
-  </div>`, e.showClose && t.appendChild(a());
-}, w = (i, t, e) => {
-  i.classList.add("pgn-bar"), t.classList.add("alert-" + e.type), t.innerHTML = "<div>" + e.message + "</div>", e.showClose && t.appendChild(a());
+  </div>`, t.appendChild(a());
+}, w = (e, t, i) => {
+  e.classList.add("pgn-bar"), t.classList.add("alert-" + i.type), t.innerHTML = "<div>" + i.message + "</div>", t.appendChild(a());
 }, a = () => {
-  let i = document.createElement("wje-icon");
-  i.setAttribute("name", "x"), i.setAttribute("slot", "icon-only");
+  let e = document.createElement("wje-icon");
+  e.setAttribute("name", "x"), e.setAttribute("slot", "icon-only");
   let t = document.createElement("wje-button");
-  return t.setAttribute("fill", "link"), t.setAttribute("size", "small"), t.classList.add("close"), t.appendChild(i), t;
+  return t.setAttribute("fill", "link"), t.setAttribute("size", "small"), t.classList.add("close"), t.appendChild(e), t;
 }, h = ':host{position:fixed;z-index:999}:host([data-position$="-left"]){left:0}:host([data-position$="-right"]){right:0}:host([data-position^="top-"]){top:0}:host([data-position^="bottom-"]){bottom:0}:host([data-position="top"]){top:0;left:0;right:0}:host([data-position="bottom"]){bottom:0;left:0;right:0}.pgn{position:relative;margin:10px}.pgn .alert{margin:0 0 4px}.pgn-simple .alert{padding-top:13px;padding-bottom:13px;max-width:500px;animation:fadeIn .3s cubic-bezier(.05,.74,.27,.99) forwards;-webkit-animation:fadeIn .3s cubic-bezier(.05,.74,.27,.99) forwards;max-height:250px;overflow:hidden}.pgn-bar{overflow:hidden;margin:0}.pgn-bar .alert{border-radius:0;padding-top:13px;padding-bottom:13px;max-height:91px}:host([data-position="top"]) .pgn-bar .alert{animation:slideInFromTop .5s cubic-bezier(.05,.74,.27,.99) forwards;-webkit-animation:slideInFromTop .5s cubic-bezier(.05,.74,.27,.99) forwards;transform-origin:top left;-webkit-transform-origin:top left}:host([data-position="bottom"]) .pgn-bar .alert{animation:slideInFromBottom .5s cubic-bezier(.05,.74,.27,.99) forwards;-webkit-animation:slideInFromBottom .5s cubic-bezier(.05,.74,.27,.99) forwards;transform-origin:bottom left;-webkit-transform-origin:bottom left}.pgn-bar .alert span{opacity:0;animation:fadeIn .3s cubic-bezier(.05,.74,.27,.99) forwards;-webkit-animation:fadeIn .3s cubic-bezier(.05,.74,.27,.99) forwards}@keyframes slideInFromTop{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@-webkit-keyframes slideInFromTop{0%{-webkit-transform:translateY(-100%)}to{-webkit-transform:translateY(0)}}@keyframes slideInFromBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes slideInFromBottom{0%{-webkit-transform:translateY(100%)}to{-webkit-transform:translateY(0)}}.pgn-circle .alert{margin-bottom:10px;border-radius:300px;animation:fadeInCircle .3s ease forwards,resizeCircle .3s .4s cubic-bezier(.25,.25,.4,1.6) forwards;-webkit-animation:fadeInCircle .3s ease forwards,resizeCircle .3s .4s cubic-bezier(.25,.25,.4,1.6) forwards;height:48px;overflow:hidden;padding:6px 55px 6px 6px;-webkit-transform:translateZ(0);position:relative;display:flex}:host[data-position$=-right] .pgn-circle .alert{float:right}:host[data-position$=-left] .pgn-circle .alert{float:left}:host[data-position^=bottom-] .pgn-circle .alert{margin-bottom:20px}wje-avatar:first-child{margin-right:8px}.pgn-circle .alert .close{margin-top:-12px;position:absolute;right:18px;top:50%;opacity:0;animation:fadeIn .3s .5s ease forwards;-webkit-animation:fadeIn .3s .5s ease forwards}.pgn-circle .alert p{margin:0}.pgn-circle .alert>div{display:flex;flex-direction:column;justify-content:center}.pgn-circle .alert>div>div{display:table-cell;vertical-align:middle}@keyframes fadeInCircle{0%{opacity:0;width:60px}to{opacity:1;width:60px}}@-webkit-keyframes fadeInCircle{0%{opacity:0;width:60px}to{opacity:1;width:60px}}@keyframes resizeCircle{0%{width:60px}to{width:300px}}@-webkit-keyframes resizeCircle{0%{width:60px}to{width:300px}}:host[data-position^=bottom-] .pgn-flip .alert{-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.pgn-flip .alert{-webkit-transform-origin:50% 0%;transform-origin:50% 0%;-webkit-animation-name:flipInX;animation-name:flipInX;-webkit-animation-duration:.8s;animation-duration:.8s;border-radius:0;padding:25px 35px;max-width:500px;max-height:250px;overflow:hidden}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-90deg);-webkit-transition-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,20deg);-webkit-transition-timing-function:ease-out}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-10deg);-webkit-transition-timing-function:ease-in;opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,5deg);-webkit-transition-timing-function:ease-out}to{-webkit-transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-90deg);transform:perspective(400px) rotateX(-90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,20deg);transform:perspective(400px) rotateX(20deg);-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-10deg);transform:perspective(400px) rotateX(-10deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,5deg);transform:perspective(400px) rotateX(5deg);-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}:host([data-position="top"]){top:60px;left:0}:host([data-position="bottom"]){left:0}:host([data-position$="-left"]){left:0;right:auto}:host([data-position^="top-"]){bottom:auto}:host{z-index:999}@media (max-width: 979px){body .pgn-wrapper[data-position=top],body .pgn-wrapper[data-position=bottom]{left:0!important}}@media (max-width: 767px){body .pgn-wrapper[data-position$=-left],body .pgn-wrapper[data-position$=-right]{left:10px!important;right:10px!important}body .pgn-wrapper[data-position$=-right] .alert,body .pgn-wrapper[data-position$=-left] .alert{max-width:100%;width:100%}}.alert{background-image:none;box-shadow:none;text-shadow:none;padding:9px 19px 9px 15px;border-radius:3px;font-size:13px;border-width:0;transition:all .2s linear 0s;display:flex;align-items:center}.alert.bordered{border-width:1px}.alert .link{color:#ce8f22;font-weight:700}.alert .alert-heading{color:#ce8f22!important;margin-bottom:5px;font-weight:600}.alert .btn-small{position:relative;top:-3.5px}.alert .button-set .btn{position:relative;top:8px}.alert-danger,.alert-error,.alert-danger.btn,.alert-error.btn{background-color:var(--wje-color-primary-2)!important;color:var(--wje-color-primary-11)!important;border-color:var(--wje-color-primary-9)!important}.alert-danger .close,.alert-error .close,.alert-danger.btn .close,.alert-error.btn .close{background-position:-95px -10px!important}.alert-warning{background-color:var(--wje-color-warning-2)!important;color:var(--wje-color-warning-11)!important;border-color:var(--wje-color-warning-9)!important}.alert-info{background-color:var(--wje-color-complete-2)!important;color:var(--wje-color-complete-11)!important;border-color:var(--wje-color-complete-9)!important}.alert-info .close{background-position:-67px -10px!important}.alert-success,.alert-success.btn{background-color:var(--wje-color-success-2)!important;color:var(--wje-color-success-11)!important;border-color:var(--wje-color-success-9)!important}.alert-success .close,.alert-success.btn .close{background-position:-38px -10px!important}.alert-default{background-color:var(--wje-color-contrast-2)!important;color:var(--wje-color-contrast-11)!important;border-color:var(--wje-color-contrast-9)!important}.alert-default .close{background-position:-67px -10px!important}';
 class d extends f {
   /**
@@ -57,7 +57,7 @@ class d extends f {
    * @param {Object} params - The parameters
    * @returns {Object} Document fragment
    */
-  draw(e, r, n) {
+  draw(i, r, n) {
     let s = document.createDocumentFragment(), o = {
       message: "Záznam bol úspešne uložený.",
       position: this.position,

package/dist/wje-toggle.js

@@ -1,9 +1,9 @@
-var g = Object.defineProperty;
-var p = (o, e, r) => e in o ? g(o, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[e] = r;
-var c = (o, e, r) => (p(o, typeof e != "symbol" ? e + "" : e, r), r);
-import b from "./wje-element.js";
-const h = ':host(.wje-color-primary){--wje-toggle-color-base: var(--wje-color-primary)}:host(.wje-color-complete){--wje-toggle-color-base: var(--wje-color-complete)}:host(.wje-color-success){--wje-toggle-color-base: var(--wje-color-success) !important}:host(.wje-color-warning){--wje-toggle-color-base: var(--wje-color-warning)}:host(.wje-color-danger){--wje-toggle-color-base: var(--wje-color-danger)}:host(.wje-color-info){--wje-toggle-color-base: var(--wje-color-info)}:host{--wje-toggle-color-base: var(--wje-color-contrast-3);--wje-toggle-width: 30px;--wje-toggle-height: 18px;--wje-toggle-border-radius: 50px;--wje-toggle-handle-width: 14px;--wje-toggle-handle-height: 14px;--wje-toggle-handle-border-radius: 9px;--wje-toggle-handle-color: #fff;--wje-toggle-handle-shadow: 1px 0 1px .5px rgba(0,0,0,.12), 2px 4px 6px rgba(0,0,0,.2);--wje-toggle-handle-shadow-checked: 1px 1px 0 rgba(0,0,0,.08), -3px 3px 6px rgba(0,0,0,.3);--wje-toggle-duration: .25s;--wje-toggle-curve: cubic-bezier(.4,0,.2,1)}.native-toggle{display:flex}label{display:flex;cursor:pointer;align-items:center;-webkit-user-select:none;user-select:none}label .label-wrapper{width:var(--wje-toggle-width);height:var(--wje-toggle-height);position:relative;display:flex;align-items:center}label .label-wrapper:before{content:"";position:absolute;cursor:pointer;width:100%;height:100%;top:auto;left:0;background:var(--wje-toggle-color-base);background-size:300%;background-position:right;border-radius:var(--wje-toggle-border-radius);border:none;box-shadow:inset 0 0 0 1px #0000001f;transition:background calc(var(--wje-toggle-duration) + (var(--wje-toggle-duration) * .24)),box-shadow var(--wje-toggle-duration);transition-timing-function:var(--wje-toggle-curve)}label .label-wrapper:after{content:"";position:absolute;transform:translate(0);background:var(--wje-toggle-handle-color);width:var(--wje-toggle-handle-width);height:var(--wje-toggle-handle-height);border-radius:var(--wje-toggle-handle-border-radius);top:auto;left:2px;box-shadow:var(--wje-toggle-handle-shadow);transition:transform,box-shadow;transition-duration:var(--wje-toggle-duration);transition-timing-function:var(--wje-toggle-curve)}input[type=checkbox][disabled]+label{cursor:not-allowed!important;color:var(--wje-color-contrast-9);opacity:.58}input[type=checkbox][disabled]+label:before{cursor:not-allowed!important}input[type=checkbox]{position:absolute;z-index:-1;opacity:0}input[type=checkbox]:checked+label .label-wrapper:before{background-position:left;box-shadow:inset 0 0 0 1px #0000001f}input[type=checkbox]:checked+label .label-wrapper:after{transform:translate(calc(var(--wje-toggle-width) - var(--wje-toggle-handle-width) - 4px));box-shadow:var(--wje-toggle-handle-shadow-checked)}input[type=checkbox]:focus+label .label-wrapper:before{outline:none!important;box-shadow:inset 0 0 0 1px #0000001f,0 0 #78c8fe}input[type=checkbox][disabled]:active+label .label-wrapper:after{transform:scaleX(1.1);transform-origin:center left;transition:transform step-start}input[type=checkbox]:checked[disabled]:active+label .label-wrapper:after{transform:translate(calc(100% - 6px)) scaleX(1.1);transform-origin:center right}input[type=checkbox]:hover:active+label .label-wrapper:before{background-color:transparent}:host .text{margin-inline:.5rem 0}';
-class d extends b {
+var h = Object.defineProperty;
+var g = (r, t, e) => t in r ? h(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var c = (r, t, e) => (g(r, typeof t != "symbol" ? t + "" : t, e), e);
+import b, { event as d } from "./wje-element.js";
+const w = ':host{--wje-toggle-color-base: var(--wje-color-contrast-3);--wje-toggle-width: 30px;--wje-toggle-height: 18px;--wje-toggle-border-radius: 50px;--wje-toggle-handle-width: 13px;--wje-toggle-handle-height: 13px;--wje-toggle-handle-border-radius: 9px;--wje-toggle-handle-color: #fff;--wje-toggle-handle-shadow: 1px 0 1px .5px rgba(0,0,0,.12), 2px 4px 6px rgba(0,0,0,.2);--wje-toggle-handle-shadow-checked: 1px 1px 0 rgba(0,0,0,.08), -3px 3px 6px rgba(0,0,0,.3);--wje-toggle-duration: .25s;--wje-toggle-curve: cubic-bezier(.4,0,.2,1)}:host(.wje-color-primary) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-primary) !important}:host(.wje-color-complete) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-complete)}:host(.wje-color-success) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-success) !important}:host(.wje-color-warning) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-warning)}:host(.wje-color-danger) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-danger)}:host(.wje-color-info) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-info)}.native-toggle{display:flex}label{display:flex;cursor:pointer;align-items:center;-webkit-user-select:none;user-select:none}label .label-wrapper{width:var(--wje-toggle-width)!important;min-width:var(--wje-toggle-width);height:var(--wje-toggle-height);position:relative;display:flex;align-items:center}label .label-wrapper:before{content:"";position:absolute;cursor:pointer;width:100%;height:100%;top:auto;left:0;background:var(--wje-toggle-color-base);background-size:300%;background-position:right;border-radius:var(--wje-toggle-border-radius);border:none;box-shadow:inset 0 0 0 1px #0000001f;transition:background calc(var(--wje-toggle-duration) + (var(--wje-toggle-duration) * .24)),box-shadow var(--wje-toggle-duration);transition-timing-function:var(--wje-toggle-curve)}label .label-wrapper:after{content:"";position:absolute;transform:translate(0);background:var(--wje-toggle-handle-color);width:var(--wje-toggle-handle-width);height:var(--wje-toggle-handle-height);border-radius:var(--wje-toggle-handle-border-radius);top:auto;left:2px;box-shadow:var(--wje-toggle-handle-shadow);transition:transform,box-shadow;transition-duration:var(--wje-toggle-duration);transition-timing-function:var(--wje-toggle-curve)}input[type=checkbox][disabled]+label{cursor:not-allowed!important;color:var(--wje-color-contrast-9);opacity:.58}input[type=checkbox][disabled]+label:before{cursor:not-allowed!important}input[type=checkbox]{position:absolute;z-index:-1;opacity:0}input[type=checkbox]:checked+label .label-wrapper:before{background-position:left;box-shadow:inset 0 0 0 1px #0000001f}input[type=checkbox]:checked+label .label-wrapper:after{transform:translate(calc(var(--wje-toggle-width) - var(--wje-toggle-handle-width) - 4px));box-shadow:var(--wje-toggle-handle-shadow-checked)}input[type=checkbox]:focus+label .label-wrapper:before{outline:none!important;box-shadow:inset 0 0 0 1px #0000001f,0 0 #78c8fe}input[type=checkbox][disabled]:active+label .label-wrapper:after{transform:scaleX(1.1);transform-origin:center left;transition:transform step-start}input[type=checkbox]:checked[disabled]:active+label .label-wrapper:after{transform:translate(calc(100% - 6px)) scaleX(1.1);transform-origin:center right}input[type=checkbox]:hover:active+label .label-wrapper:before{background-color:transparent}:host .text{margin-inline:.5rem 0}:host .end label{width:100%}:host .end .text{margin-inline:0 .5rem;width:100%}slot{display:flex;align-items:center;width:100%}';
+class p extends b {
   /**
    * @constructor
    * @summary Toggle constructor
@@ -16,6 +16,13 @@ class d extends b {
      */
     c(this, "className", "Toggle");
   }
+  /**
+   * @summary Set checked attribute
+   * @returns {boolean} true if the toggle is checked, false otherwise
+   */
+  set disabled(e) {
+    e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
   /**
    * @summary Get disabled attribute
    * @returns {boolean} true if the toggle is disabled, false otherwise
@@ -23,6 +30,13 @@ class d extends b {
   get disabled() {
     return this.hasAttribute("disabled");
   }
+  /**
+   * @summary Set checked attribute
+   * @returns {boolean} true if the toggle is checked, false otherwise
+   */
+  set checked(e) {
+    e ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+  }
   /**
    * @summary Get checked attribute
    * @returns {boolean} true if the toggle is checked, false otherwise
@@ -36,7 +50,10 @@ class d extends b {
    * @returns {Object} styles
    */
   static get cssStyleSheet() {
-    return h;
+    return w;
+  }
+  static get observedAttributes() {
+    return ["checked", "disabled"];
   }
   /**
    * @summary Setup attributes
@@ -51,20 +68,27 @@ class d extends b {
    * @param {Object} params - The parameters
    * @returns {Object} Document fragment
    */
-  draw(r, w, u) {
-    let s = document.createDocumentFragment(), a = document.createElement("div");
-    a.setAttribute("part", "native"), a.classList.add("native-toggle");
-    let t = document.createElement("input");
-    t.setAttribute("part", "input"), t.setAttribute("type", "checkbox"), t.setAttribute("name", this.name), t.setAttribute("id", "input");
+  draw(e, u, j) {
+    let s = document.createDocumentFragment(), o = document.createElement("div");
+    o.setAttribute("part", "native"), o.classList.add("native-toggle");
+    let a = document.createElement("input");
+    a.setAttribute("part", "input"), a.setAttribute("type", "checkbox"), a.setAttribute("name", this.name), a.setAttribute("id", "input"), a.checked = this.hasAttribute("checked"), a.disabled = this.hasAttribute("disabled");
     let l = document.createElement("label");
     l.setAttribute("for", "input");
     let i = document.createElement("div");
     i.setAttribute("part", "toggle"), i.classList.add("label-wrapper");
     let n = document.createElement("div");
-    return n.classList.add("text"), n.innerHTML = "<slot></slot>", this.color && this.classList.add("wje-color-" + this.color, "wje-color"), this.checked && (t.checked = this.checked), this.disabled && (t.disabled = this.disabled), a.appendChild(t), a.appendChild(l), l.appendChild(i), l.appendChild(n), s.appendChild(a), s;
+    return n.classList.add("text"), n.innerHTML = "<slot></slot>", this.color && this.classList.add("wje-color-" + this.color, "wje-color"), o.appendChild(a), o.appendChild(l), this.placement === "end" ? (o.classList.add("end"), l.appendChild(n), l.appendChild(i)) : (l.appendChild(i), l.appendChild(n)), s.appendChild(o), this.input = a, s;
+  }
+  afterDraw() {
+    this.disabled || (this.input.addEventListener("input", (e) => {
+      this.checked = e.target.checked, d.dispatchCustomEvent(this, "wje-toggle:input");
+    }), this.input.addEventListener("change", (e) => {
+      this.checked = e.target.checked, d.dispatchCustomEvent(this, "wje-toggle:change");
+    }));
   }
 }
-d.define("wje-toggle", d);
+p.define("wje-toggle", p);
 export {
-  d as default
+  p as default
 };

package/dist/wje-tooltip.js

@@ -1,9 +1,9 @@
-var c = Object.defineProperty;
-var u = (r, e, t) => e in r ? c(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var a = (r, e, t) => (u(r, typeof e != "symbol" ? e + "" : e, t), t);
-import h, { event as d } from "./wje-element.js";
-const m = ":host{--wje-tooltip-arrow-color: var(--wje-color-contrast-11)}.native-tooltip{display:block;padding:.5rem;color:var(--wje-color-contrast-0);background-color:var(--wje-color-contrast-11);font-weight:400;font-size:.75rem!important;border-radius:var(--wje-border-radius-small);line-height:1;box-sizing:border-box;box-shadow:var(--wje-box-shadow-medium)}.arrow{position:absolute;width:10px;height:10px;background:var(--wje-tooltip-arrow-color);transform:rotate(45deg)}";
-class p extends h {
+var p = Object.defineProperty;
+var u = (r, e, t) => e in r ? p(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var i = (r, e, t) => (u(r, typeof e != "symbol" ? e + "" : e, t), t);
+import m, { event as l } from "./wje-element.js";
+const w = ":host{--wje-tooltip-arrow-color: var(--wje-color-contrast-11)}.native-tooltip{display:block;padding:.5rem;color:var(--wje-color-contrast-0);background-color:var(--wje-color-contrast-11);font-weight:400;font-size:.75rem!important;border-radius:var(--wje-border-radius-small);line-height:1;box-sizing:border-box;box-shadow:var(--wje-box-shadow-medium)}.arrow{position:absolute;width:10px;height:10px;background:var(--wje-tooltip-arrow-color);transform:rotate(45deg)}";
+class d extends m {
   /**
    * @constructor
    * @summary Tooltip constructor
@@ -14,27 +14,39 @@ class p extends h {
      * @summary Class name
      * @type {string}
      */
-    a(this, "className", "Tooltip");
+    i(this, "className", "Tooltip");
     /**
      * @summary Show tooltip
      */
-    a(this, "onShow", () => {
-      this.popup.show();
+    i(this, "onShow", () => {
+      this.classList.add("active"), Promise.resolve(this.beforeShow(this)).then((t) => {
+        if (!this.classList.contains("active") || !t || typeof t != "string")
+          throw new Error("beforeShow method returned false or not string");
+        this.native.innerHTML = t, this.popup.show(), Promise.resolve(this.afterShow(this));
+      }).catch((t) => {
+        this.classList.remove("active"), this.popup.hide();
+      });
     });
     /**
      * @summary Hide tooltip
      */
-    a(this, "onHide", () => {
-      this.popup.hide();
+    i(this, "onHide", () => {
+      this.classList.remove("active"), this.popup.hide();
     });
   }
+  set content(t) {
+    this.setAttribute("content", t);
+  }
+  get content() {
+    return this.hasAttribute("content") ? this.getAttribute("content") : "";
+  }
   /**
    * @summary Get CSS stylesheet
    * @static
    * @returns {Object} styles
    */
   static get cssStyleSheet() {
-    return m;
+    return w;
   }
   /**
    * @summary Get observed attributes
@@ -42,7 +54,7 @@ class p extends h {
    * @returns {Array} An array of observed attributes
    */
   static get observedAttributes() {
-    return ["active", "content"];
+    return ["active"];
   }
   /**
    * @summary Setup attributes
@@ -57,25 +69,37 @@ class p extends h {
    * @param {Object} params - The parameters
    * @returns {Object} Document fragment
    */
-  draw(t, w, b) {
-    let l = document.createDocumentFragment(), o = document.createElement("wje-popup");
+  draw(t, h, v) {
+    let c = document.createDocumentFragment(), o = document.createElement("wje-popup");
     o.setAttribute("placement", this.placement || "top"), o.setAttribute("offset", this.offset || "0");
-    let i = document.createElement("slot");
-    i.setAttribute("slot", "anchor");
-    let n = document.createElement("div");
-    n.classList.add("arrow"), n.setAttribute("slot", "arrow");
+    let n = document.createElement("slot");
+    n.setAttribute("slot", "anchor");
+    let a = document.createElement("div");
+    a.classList.add("arrow"), a.setAttribute("slot", "arrow");
     let s = document.createElement("div");
-    return s.setAttribute("part", "native"), s.classList.add("native-tooltip"), s.innerHTML = this.content, o.appendChild(i), o.appendChild(n), o.appendChild(s), this.mySlot = i, this.popup = o, l.appendChild(o), l;
+    return s.setAttribute("part", "native"), s.classList.add("native-tooltip"), s.innerHTML = this.content, o.appendChild(n), o.appendChild(a), o.appendChild(s), this.mySlot = n, this.popup = o, this.native = s, c.appendChild(o), c;
   }
   /**
    * @summary After draw method
    */
   afterDraw() {
     let t = this.mySlot.assignedElements()[0];
-    t && (d.addListener(t, "mouseenter", null, this.onShow), d.addListener(t, "mouseleave", null, this.onHide));
+    t && (l.addListener(t, "mouseenter", null, this.onShow), l.addListener(t, "mouseleave", null, this.onHide));
+  }
+  dispatch(t) {
+    return new Promise((h) => {
+      l.dispatchCustomEvent(this, t, {
+        resolve: h
+      });
+    });
+  }
+  beforeShow() {
+    return this.content;
+  }
+  afterShow() {
   }
 }
-p.define("wje-tooltip", p);
+d.define("wje-tooltip", d);
 export {
-  p as default
+  d as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",
@@ -37,6 +37,7 @@
     }
   },
   "dependencies": {
+    "@crowdin/cli": "^3.19.2",
     "@faker-js/faker": "^8.0.0",
     "@floating-ui/dom": "^1.5.1",
     "animate.css": "^4.1.1",