@hbuesing/ui-library 6.0.1 → 7.0.0

package/dist/index.css

@@ -1 +1 @@
-:root{--uil-black: #000000;--uil-black-w: #000000;--uil-black-alt: #222222;--uil-black-light: #2b2b2b;--uil-black-lighter: #333333;--uil-box-shadow-w: rgba(0, 0, 0, .3);--uil-switch-hover-w: rgba(0, 0, 0, .05);--uil-white: #ffffff;--uil-white-b: #ffffff;--uil-white-alt: #ffffff;--uil-grey-light: #f3f3f3;--uil-grey: #e9e9e9;--uil-grey-alt: #cfcfcf;--uil-grey-dark: #757575;--uil-info-hover: 39, 121, 202;--uil-success-hover: 0, 156, 115;--uil-warning-hover: 255, 215, 0;--uil-error-hover: 207, 9, 52;--uil-info: #2876CD;--uil-success: #00875A;--uil-warning: #FFD700;--uil-warning-alt: #84722A;--uil-error: #CF0934;--uil-info-o: rgba(39, 121, 202, .3);--uil-success-o: rgba(0, 156, 115, .3);--uil-warning-o: rgba(255, 215, 0, .3);--uil-error-o: rgba(207, 9, 52, .3);--uil-top: initial;--uil-bottom: initial;--uil-left: initial;--uil-right: initial;--uil-progress-delay: .25s;--uil-pulse-anim: 2.5s;--uil-xxxs: .125rem;--uil-xxs: .25rem;--uil-xs: .5rem;--uil-s: .75rem;--uil-m: 1rem;--uil-l: 1.25rem;--uil-xl: 1.5rem;--uil-xxl: 1.75rem;--uil-xxxl: 2rem}.qr{min-height:fit-content;min-width:fit-content;height:fit-content;width:fit-content}.Br{font-size:var(--uil-m);line-height:var(--uil-xl)}.Gr{font-size:var(--uil-l);line-height:var(--uil-xxl)}.Hr{font-size:var(--uil-xxl);line-height:2.25rem}.Ir{--uil-black-w: #ffffff;--uil-black-alt: #c3c3c3;--uil-black-lighter: #dddddd;--uil-grey: #616161;--uil-grey-dark: #a3a3a3;--uil-grey-alt: #5c5c5c;--uil-white-alt: #3a3a3a;--uil-white-b: #000000;--uil-info: #7bb4ff;--uil-info-hover: 123, 180, 255;--uil-success: #00cc96;--uil-success-hover: 0, 204, 150;--uil-warning: #FFFF3E;--uil-warning-alt: #dcdc38;--uil-warning-hover: 255, 255, 30;--uil-error: #fb0b41;--uil-error-hover: 239, 34, 79;--uil-info-o: rgba(123, 180, 255, .3);--uil-success-o: rgba(0, 204, 150, .3);--uil-warning-o: rgba(255, 255, 62, .3);--uil-error-o: rgba(251, 11, 65, .3);--uil-box-shadow-w: rgba(150, 150, 150, .3);--uil-switch-hover-w: rgba(255, 255, 255, .1)}.e{margin:auto;border-radius:5px;background-color:var(--uil-white-alt);padding:0;border:transparent}.e::backdrop{background-color:#00000080}.e.Jr{width:25%}.e.Kr{width:50%}.e.Lr{width:75%}.e .f{font-weight:700;padding:.5rem}.e .f.Mr{background-color:var(--uil-info);color:var(--uil-white)}.e .f.tr{background-color:var(--uil-success);color:var(--uil-white)}.e .f.nr{background-color:var(--uil-warning);color:var(--uil-black-light)}.e .f.ur{background-color:var(--uil-error);color:var(--uil-white)}.e .f.Nr,.e .f.tr,.e .f.nr,.e .f.ur{border-top-left-radius:4px;border-top-right-radius:4px}.e .sr{display:flex;flex-direction:column;padding:.5rem}.e .sr.Or{border-top:1px solid var(--uil-grey-alt);border-bottom:1px solid var(--uil-grey-alt)}.e .B{display:flex;gap:2rem;padding:.5rem}.e .B.Pr{justify-content:start}.e .B.Qr{justify-content:end}.e .B.Rr{justify-content:space-between}.n{display:flex;flex-direction:column;gap:var(--uil-m);background-color:transparent;border:none;padding:var(--uil-xs);height:60%;max-height:60%;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none;z-index:2147483647;position:fixed;top:var(--uil-top);bottom:var(--uil-bottom);left:var(--uil-left);right:var(--uil-right)}.n.Sr{--uil-top: var(--uil-l)}.n.Tr{--uil-bottom: var(--uil-l);flex-direction:column-reverse}.n.Ur{left:50%;transform:translate(-50%)}.n.Vr{top:50%;transform:translateY(-50%)}.n.Wr{left:50%;top:50%;transform:translate(-50%)}.n.Zr{--uil-left: var(--uil-l)}.n._r{--uil-right: var(--uil-l);align-items:end}.n::-webkit-scrollbar{display:none}.n .w{display:flex;align-items:center;gap:var(--uil-s);opacity:0;color:var(--uil-white-alt);background-color:var(--uil-black-lighter);padding:var(--uil-xs);width:fit-content;border-radius:3px;transition:all .5s linear;transform:translateY(6px);box-shadow:1px 5px 6px -1px var(--uil-box-shadow-w);-webkit-box-shadow:1px 5px 6px -1px var(--uil-box-shadow-w);-moz-box-shadow:1px 5px 6px -1px var(--uil-box-shadow-w)}.n .w.ri{opacity:1;transform:translateY(0)}.n .w.ii{opacity:0;transform:translateY(-6px)}.n .w.oi{color:var(--uil-white);background-color:var(--uil-info)}.n .w.li{color:var(--uil-white);background-color:var(--uil-success)}.n .w.ai{color:var(--uil-black);background-color:var(--uil-warning)}.n .w.ei{color:var(--uil-white);background-color:var(--uil-error)}.n .w .dr{height:var(--uil-s);width:var(--uil-s);box-sizing:content-box;padding:var(--uil-xs);border-radius:50%;cursor:pointer;border:none;background-color:transparent;fill:var(--uil-white-b)}.n .w .dr:hover{background-color:#0000001a}.h{display:flex;align-items:center;gap:var(--uil-s)}.h:has(input:disabled) .cr{color:var(--uil-grey-dark)}.h .cr{color:var(--uil-black-w)}.h .p{position:relative;display:block;min-height:var(--uil-l);min-width:var(--uil-l);border:2px solid var(--uil-grey-dark);box-sizing:border-box;cursor:pointer}.h .p:hover,.h .p:has(input:checked){border-color:var(--uil-black-w)}.h .p.ti{border-radius:2px}.h .p.hr,.h .p.hr .ni{border-radius:50%}.h .p:has(input:disabled){border-color:var(--uil-grey-alt);cursor:default}.h .p input{position:absolute;cursor:pointer;height:0;width:0;opacity:0}.h .p input:checked~.P{transform:scale(1)}.h .p input:disabled~.P{background-color:var(--uil-grey-dark)}.h .p .P{position:absolute;top:25%;left:25%;background-color:var(--uil-info);width:var(--uil-xs);height:var(--uil-xs);transform:scale(0);transition:.1s ease}.Q{display:flex;gap:var(--uil-m)}.Q.ui{flex-direction:row}.Q.si{flex-direction:column}.y{--uil-pagination-size: var(--uil-xl);color:var(--uil-black-w);display:flex;align-items:center;margin:0;padding:0;min-height:var(--uil-pagination-size);font-size:calc(var(--uil-pagination-size) - var(--uil-xs))}@media (min-width: 760px){.y{--uil-pagination-size: var(--uil-xxl)}}.y .A{border:none;outline:none;background-color:transparent;padding:var(--uil-xxs);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:6px;height:var(--uil-pagination-size);width:var(--uil-pagination-size);font-size:calc(var(--uil-pagination-size) - var(--uil-xs))}.y .A:disabled{cursor:default}.y .A:disabled .vr{fill:var(--uil-grey-alt)}.y .A.di,.y .A:not(:disabled):hover{background-color:var(--uil-grey)}.y .A .vr{fill:var(--uil-black-lighter);height:100%;width:100%}.G{list-style:none;gap:var(--uil-xs)}@media (min-width: 760px){.G{gap:var(--uil-s)}}.G .br{height:var(--uil-pagination-size);width:var(--uil-pagination-size)}.G .br .ci{fill:var(--uil-grey-dark)}.z{height:1.875rem;width:1.875rem;transform:rotate(-90deg)}.z.gr{animation:1.5s ease-in-out 0s infinite pr}.z.gr .C{animation:1.5s ease-in-out 0s infinite xr}.z .C{transition:stroke-dashoffset var(--uil-progress-delay) ease-in-out 0ms}.z .C.R{stroke:var(--uil-info)}.z .C.S{stroke:var(--uil-success)}.z .C.T{stroke:var(--uil-warning)}.z .C.U{stroke:var(--uil-error)}@keyframes xr{0%{stroke-dasharray:1px,120px;stroke-dashoffset:0}50%{stroke-dasharray:90px,120px;stroke-dashoffset:-10px}to{stroke-dasharray:1px,120px;stroke-dashoffset:-120px}}@keyframes pr{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.b{overflow:hidden;position:relative;min-width:5rem;width:100%;height:5px}.b.R{background-color:var(--uil-info-o)}.b.S{background-color:var(--uil-success-o)}.b.T{background-color:var(--uil-warning-o)}.b.U{background-color:var(--uil-error-o)}.b.hi{background-color:var(--uil-grey-alt)}.b .j{position:absolute;right:0;left:0;height:100%;width:auto;transition:right var(--uil-progress-delay) ease-in-out 0ms}.b .j.vi{animation:2.5s ease-in-out 0s infinite fr}.b .j.bi{animation:2.5s ease-in-out 0s infinite wr}.b .j.R{background-color:var(--uil-info)}.b .j.S{background-color:var(--uil-success)}.b .j.T{background-color:var(--uil-warning)}.b .j.U{background-color:var(--uil-error)}@keyframes fr{0%{left:-25%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes wr{0%{left:-25%;right:100%}55%{left:-35%;right:100%}to{left:100%;right:-150%}}.r{width:100%;--uil-input-focus-color: var(--uil-info)}.r .i{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box}.r .i.v{border-bottom:1px solid var(--uil-grey-dark)}.r .i.v .o{padding-left:0}.r .i.v .m{left:0}.r .i.v .s{border-bottom:1px solid var(--uil-grey-dark)}.r .i.v .u.H{margin-right:.875rem}.r .i.v~.V{margin-left:0}.r .i.g,.r .i.g .s{border:1px solid var(--uil-grey-dark);border-radius:5px}.r .i.g .u.H{margin-left:.875rem}.r .i.g .u.gi{margin-right:.875rem}.r .i.v:not(:has(.o:disabled)):not(.x):not(:focus-within):not(:has(.u.Y)):has(.o:placeholder-shown):hover,.r .i.v:not(:has(.o:disabled)):not(.x):not(:focus-within):has(:not(.o:placeholder-shown)):hover .s,.r .i.g:not(:has(.o:disabled)):not(.x):not(:focus-within):not(:has(.u.Y)):has(.o:placeholder-shown):hover,.r .i.g:not(:has(.o:disabled)):not(.x):not(:focus-within):has(:not(.o:placeholder-shown)):hover .s{border-color:var(--uil-black-w)}.r .i.v:focus-within,.r .i.v:has(.o:not(:placeholder-shown)),.r .i.v:has(.o:disabled:not(:placeholder-shown)),.r .i.v:has(.u.Y),.r .i.g:focus-within,.r .i.g:has(.o:not(:placeholder-shown)),.r .i.g:has(.o:disabled:not(:placeholder-shown)),.r .i.g:has(.u.Y){border-color:transparent}.r .i.v:has(.u.H),.r .i.g:has(.u.H){flex-direction:row-reverse}.r .i.v:has(.o:disabled),.r .i.g:has(.o:disabled){border-color:var(--uil-grey-alt)}.r .i.x .m{color:var(--uil-error);opacity:1}.r .i.x,.r .i.x .s{border-color:var(--uil-error)}.r .i:not(.x) .o:not(:disabled):focus~.m{opacity:1;color:var(--uil-input-focus-color)}.r .i:not(.x) .o:focus~.s{border-color:var(--uil-input-focus-color)}.r .i .s{border-radius:0;padding:var(--uil-xs);margin:0;position:absolute;left:0;right:0;bottom:0;pointer-events:none;visibility:hidden;border:none;min-height:2.1875rem;box-sizing:content-box}.r .i .s .pi{visibility:hidden;padding:0 2px}.r .i .m{position:absolute;top:25%;left:.7rem;cursor:text;color:var(--uil-black-w);opacity:.6;transition:top .25s ease}.r .i .m.xi{top:var(--uil-m)}.r .i .D{font-size:var(--uil-l);line-height:var(--uil-l);transition:font-size .2s ease}.r .i .D.fi{margin-left:var(--uil-xxxs)}.r .i .o{box-sizing:border-box;width:100%;color:var(--uil-black-w);background-color:transparent;border-radius:0;padding:var(--uil-xs);padding-left:.65rem;border:none;outline:none}.r .i .o:disabled{color:var(--uil-grey-dark)}.r .i .o:disabled~.s,.r .i .o:disabled:not(:placeholder-shown)~.s{border-color:var(--uil-grey-alt)}.r .i .o:disabled~.m{color:var(--uil-grey-dark);opacity:1;cursor:default}.r .i .o:focus~.u.W,.r .i .o:not(:placeholder-shown)~.u.W{visibility:visible}.r .i .o:focus~.s{border-width:2px;padding:7px}.r .i .mr{min-width:fit-content;min-height:fit-content;margin:var(--uil-xxs);resize:var(--uil-textarea-resize)}.r .i .mr~.s{top:-.5rem}.r .i .u{min-width:fit-content;opacity:.75}.r .i .u.W{visibility:hidden}.r .i .o:focus~*.s,.r .i .o:not(:placeholder-shown)~*.s,.r .i .u.Y~*.s{visibility:visible}.r .i .o:focus~*.m,.r .i .o:not(:placeholder-shown)~*.m,.r .i .u.Y~*.m{top:-.65rem}.r .i .o:focus~* .D,.r .i .o:not(:placeholder-shown)~* .D,.r .i .u.Y~* .D{font-size:var(--uil-m);line-height:var(--uil-m)}.r .V{color:var(--uil-grey-dark);font-size:var(--uil-m);line-height:var(--uil-m);margin-left:var(--uil-s);margin-top:var(--uil-xxs);min-height:var(--uil-m)}.r .V.x{color:var(--uil-error)}.E{gap:var(--uil-xs)}@media (min-width: 760px){.E{gap:var(--uil-m)}}.E .wi{color:var(--uil-black-alt);background-color:var(--uil-white-alt);border:1px solid var(--uil-black-alt);border-radius:3px;outline:none;padding:var(--uil-xxs) var(--uil-xxs) var(--uil-xxs) 0;height:100%}.E p{margin:0}.E .mi{display:flex;gap:var(--uil-xxs);height:100%}.d{width:100%;color:var(--uil-black-w);background-color:var(--uil-white-alt);box-shadow:0 1px 3px -1px var(--uil-grey-alt);border:1px solid var(--uil-grey-alt);border-radius:5px}.d[open]{overflow-x:auto}.d[open] .k.ki{border-bottom:1px solid var(--uil-grey-alt);box-shadow:0 0 1px 0 var(--uil-grey-alt)}.d[open] .k .I{rotate:90deg}.d .k{width:100%;cursor:pointer;display:flex;align-items:center;padding:var(--uil-xs);box-sizing:border-box}.d .k::marker{content:none}.d .k::-webkit-details-marker{display:none}.d .k.yi .I{margin-right:var(--uil-s)}.d .k.kr{flex-direction:row-reverse;justify-content:space-between}.d .k.kr .I{margin-left:var(--uil-s)}.d .k .I{height:var(--uil-s);width:var(--uil-s);fill:var(--uil-black-lighter);transition:rotate .2s ease-in-out}.d .zi{padding:var(--uil-xs)}.J{display:flex;flex-direction:column}.J .d{border-radius:unset;border-bottom:none}.J .d:first-of-type{border-top-left-radius:5px;border-top-right-radius:5px}.J .d:last-of-type{border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-bottom:1px solid var(--uil-grey-alt)}.F{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.F.Fi li:last-child{font-weight:700}.F li{cursor:default;color:var(--uil-grey-dark);display:flex;align-items:center}.F .yr:last-child,.F .yr:hover{color:var(--uil-black-w)}.F .Z{background-color:transparent;border:none;padding:0;margin:0}.F .Z svg{cursor:pointer;fill:var(--uil-grey-dark);height:var(--uil-xl);width:var(--uil-xl)}.F .Z svg:hover{fill:var(--uil-black-w)}.zr{background-color:var(--uil-grey-alt);height:var(--uil-m);width:100%}.zr.ji{animation:ease-in-out var(--uil-pulse-anim) infinite Fr}@keyframes Fr{0%{opacity:1}50%{opacity:.45}to{opacity:1}}.a{display:block;border:1px solid transparent;border-radius:5px;box-sizing:border-box;background-color:transparent;cursor:pointer;text-decoration:none}.a.K{box-shadow:0 0 2px 0 var(--uil-black-alt)}.a.Yi{--uil-button-font-color: var(--uil-white-b);--uil-button-color: var(--uil-info);--uil-button-hover-color: var(--uil-info-hover)}.a.Ai{--uil-button-font-color: var(--uil-white-b);--uil-button-color: var(--uil-success);--uil-button-hover-color: var(--uil-success-hover)}.a._{--uil-button-font-color: var(--uil-black-light);--uil-button-color: var(--uil-warning);--uil-button-hover-color: var(--uil-warning-hover)}.a._.L,.a._.rr{--uil-button-color: var(--uil-warning-alt)}.a.Ci{--uil-button-font-color: var(--uil-white-b);--uil-button-color: var(--uil-error);--uil-button-hover-color: var(--uil-error-hover)}.a:not(:disabled).K{color:var(--uil-button-font-color);background-color:var(--uil-button-color)}.a:not(:disabled).K:hover{background-color:rgba(var(--uil-button-hover-color),.8)}.a:not(:disabled).L{color:var(--uil-button-color);border-color:var(--uil-button-color)}.a:not(:disabled).L:hover{background-color:rgba(var(--uil-button-hover-color),.08)}.a:not(:disabled).rr{color:var(--uil-button-color)}.a:not(:disabled).rr:hover{background-color:rgba(var(--uil-button-hover-color),.08)}.a.ir{cursor:default;color:var(--uil-grey-dark)}.a.ir.K{background-color:var(--uil-grey-light)}.a.ir.L{border-color:var(--uil-grey-dark)}.a.jr{letter-spacing:1px;padding:var(--uil-xxs) var(--uil-xs)}.a.jr.or{border-radius:var(--uil-m)}.a.Yr{letter-spacing:2px;padding:var(--uil-xs) var(--uil-s)}.a.Yr.or{border-radius:var(--uil-xl)}.a.Ar{letter-spacing:2px;padding:var(--uil-xs) var(--uil-s)}.a.Ar.or{border-radius:var(--uil-xxl)}.l{height:var(--uil-xxxl);position:relative;display:inline-flex;box-sizing:border-box}.l.M{padding:.7rem 0;width:var(--uil-xxxl)}.l.M .c{width:var(--uil-m);height:var(--uil-m);top:var(--uil-xs)}.l.M .c:has(input:checked){left:calc(100% - var(--uil-m))}.l.M .X{border-radius:6px}.l.N{padding:var(--uil-xs) 0;width:2.75rem}.l.N .c{width:var(--uil-l);height:var(--uil-l);top:.375rem}.l.N .c:has(input:checked){left:calc(100% - var(--uil-l))}.l.N .X{border-radius:9px}.l.O{padding:var(--uil-xxs) 0;width:4.25rem}.l.O .c{width:var(--uil-xxxl);height:var(--uil-xxxl);top:.0125rem}.l.O .c:has(input:checked){left:calc(100% - var(--uil-xxxl))}.l.O .X{border-radius:var(--uil-s)}.l.Di{--uil-switch-color: var(--uil-info)}.l.Ei{--uil-switch-color: var(--uil-success)}.l.Xi{--uil-switch-color: var(--uil-warning)}.l.qi{--uil-switch-color: var(--uil-error)}.l .X{height:100%;width:100%;opacity:.25;z-index:-1;background-color:var(--uil-black-lighter);transition:background-color .1s ease-in-out}.l .c{position:absolute;left:0;cursor:pointer;transition:left .15s ease-in-out;border-radius:50%}.l .c:not(:has(input:disabled)):hover,.l .c:not(:has(input:disabled)):has(input:focus){outline:6px solid var(--uil-switch-hover-w)}.l .c:not(:has(input:disabled)):has(input:checked)~.X{background-color:var(--uil-switch-color)}.l .c:not(:has(input:disabled)):has(input:checked) .lr{background-color:var(--uil-switch-color)}.l .c:has(input:disabled){cursor:default}.l .c:has(input:disabled) .lr{background-color:var(--uil-grey-dark)}.l .c .lr{width:100%;height:100%;border-radius:50%;background-color:var(--uil-white);box-shadow:1px 1px 3px -1px var(--uil-black-alt)}.l .c input{clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.t{display:flex;align-items:center;gap:var(--uil-s);cursor:default;outline:none;border-width:2px;border-style:solid}.t.ar{cursor:pointer}.t.ar:focus,.t.ar:hover{opacity:.85}.t.Cr{padding:var(--uil-xxs) var(--uil-xs);border-radius:var(--uil-m)}.t.Dr{padding:var(--uil-xs) var(--uil-s);border-radius:var(--uil-xl)}.t.Er{padding:var(--uil-xs) var(--uil-s);border-radius:var(--uil-xxl)}.t.Bi{border:transparent;color:var(--uil-tag-font-color);background-color:var(--uil-tag-color)}.t.er{background-color:transparent;color:var(--uil-tag-color);border-color:var(--uil-tag-color)}.t.er .q{fill:var(--uil-tag-color)}.t.Gi{box-shadow:0 0 2px 0 var(--uil-black-alt)}.t.Hi{--uil-tag-font-color: var(--uil-white-b);--uil-tag-color: var(--uil-info)}.t.Ii{--uil-tag-font-color: var(--uil-white-b);--uil-tag-color: var(--uil-success)}.t.Xr{--uil-tag-font-color: var(--uil-black-light);--uil-tag-color: var(--uil-warning)}.t.Xr.er{--uil-tag-color: var(--uil-warning-alt)}.t.Ji{--uil-tag-font-color: var(--uil-white-b);--uil-tag-color: var(--uil-error)}.t .q{cursor:pointer}.t .q.Cr{width:var(--uil-m);height:var(--uil-m)}.t .q.Dr{width:var(--uil-xl);height:var(--uil-xl)}.t .q.Er{width:var(--uil-xxl);height:var(--uil-xxl)}
+:root{--uil-black: #000000;--uil-black-w: #000000;--uil-black-alt: #222222;--uil-black-light: #2b2b2b;--uil-black-lighter: #333333;--uil-box-shadow-w: rgba(0, 0, 0, .3);--uil-switch-hover-w: rgba(0, 0, 0, .05);--uil-white: #ffffff;--uil-white-b: #ffffff;--uil-white-alt: #ffffff;--uil-grey-light: #f3f3f3;--uil-grey: #e9e9e9;--uil-grey-alt: #cfcfcf;--uil-grey-dark: #757575;--uil-info-hover: 39, 121, 202;--uil-success-hover: 0, 156, 115;--uil-warning-hover: 255, 215, 0;--uil-error-hover: 207, 9, 52;--uil-info: #2876CD;--uil-success: #00875A;--uil-warning: #FFD700;--uil-warning-alt: #84722A;--uil-error: #CF0934;--uil-info-o: rgba(39, 121, 202, .3);--uil-success-o: rgba(0, 156, 115, .3);--uil-warning-o: rgba(255, 215, 0, .3);--uil-error-o: rgba(207, 9, 52, .3);--uil-top: initial;--uil-bottom: initial;--uil-left: initial;--uil-right: initial;--uil-progress-delay: .25s;--uil-pulse-anim: 2.5s;--uil-xxxs: .125rem;--uil-xxs: .25rem;--uil-xs: .5rem;--uil-s: .75rem;--uil-m: 1rem;--uil-l: 1.25rem;--uil-xl: 1.5rem;--uil-xxl: 1.75rem;--uil-xxxl: 2rem}.qr{min-height:fit-content;min-width:fit-content;height:fit-content;width:fit-content}.Br{font-size:var(--uil-m);line-height:var(--uil-xl)}.Gr{font-size:var(--uil-l);line-height:var(--uil-xxl)}.Hr{font-size:var(--uil-xxl);line-height:2.25rem}.Ir{--uil-black-w: #ffffff;--uil-black-alt: #c3c3c3;--uil-black-lighter: #dddddd;--uil-grey: #616161;--uil-grey-dark: #a3a3a3;--uil-grey-alt: #5c5c5c;--uil-white-alt: #3a3a3a;--uil-white-b: #000000;--uil-info: #7bb4ff;--uil-info-hover: 123, 180, 255;--uil-success: #00cc96;--uil-success-hover: 0, 204, 150;--uil-warning: #FFFF3E;--uil-warning-alt: #dcdc38;--uil-warning-hover: 255, 255, 30;--uil-error: #fb0b41;--uil-error-hover: 239, 34, 79;--uil-info-o: rgba(123, 180, 255, .3);--uil-success-o: rgba(0, 204, 150, .3);--uil-warning-o: rgba(255, 255, 62, .3);--uil-error-o: rgba(251, 11, 65, .3);--uil-box-shadow-w: rgba(150, 150, 150, .3);--uil-switch-hover-w: rgba(255, 255, 255, .1)}.e{margin:auto;border-radius:5px;background-color:var(--uil-white-alt);padding:0;border:transparent}.e::backdrop{background-color:#00000080}.e.Jr{width:25%}.e.Kr{width:50%}.e.Lr{width:75%}.e .f{font-weight:700;padding:.5rem}.e .f.Mr{background-color:var(--uil-info);color:var(--uil-white)}.e .f.tr{background-color:var(--uil-success);color:var(--uil-white)}.e .f.nr{background-color:var(--uil-warning);color:var(--uil-black-light)}.e .f.ur{background-color:var(--uil-error);color:var(--uil-white)}.e .f.Nr,.e .f.tr,.e .f.nr,.e .f.ur{border-top-left-radius:4px;border-top-right-radius:4px}.e .sr{display:flex;flex-direction:column;padding:.5rem}.e .sr.Or{border-top:1px solid var(--uil-grey-alt);border-bottom:1px solid var(--uil-grey-alt)}.e .B{display:flex;gap:2rem;padding:.5rem}.e .B.Pr{justify-content:start}.e .B.Qr{justify-content:end}.e .B.Rr{justify-content:space-between}.n{display:flex;flex-direction:column;gap:var(--uil-m);background-color:transparent;border:none;padding:var(--uil-xs);height:60%;max-height:60%;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none;z-index:2147483647;position:fixed;top:var(--uil-top);bottom:var(--uil-bottom);left:var(--uil-left);right:var(--uil-right)}.n.Sr{--uil-top: var(--uil-l)}.n.Tr{--uil-bottom: var(--uil-l);flex-direction:column-reverse}.n.Ur{left:50%;transform:translate(-50%)}.n.Vr{top:50%;transform:translateY(-50%)}.n.Wr{left:50%;top:50%;transform:translate(-50%)}.n.Zr{--uil-left: var(--uil-l)}.n._r{--uil-right: var(--uil-l);align-items:end}.n::-webkit-scrollbar{display:none}.n .w{display:flex;align-items:center;gap:var(--uil-s);opacity:0;color:var(--uil-white-alt);background-color:var(--uil-black-lighter);padding:var(--uil-xs);width:fit-content;border-radius:3px;transition:all .5s linear;transform:translateY(6px);box-shadow:1px 5px 6px -1px var(--uil-box-shadow-w);-webkit-box-shadow:1px 5px 6px -1px var(--uil-box-shadow-w);-moz-box-shadow:1px 5px 6px -1px var(--uil-box-shadow-w)}.n .w.ri{opacity:1;transform:translateY(0)}.n .w.ii{opacity:0;transform:translateY(-6px)}.n .w.oi{color:var(--uil-white);background-color:var(--uil-info)}.n .w.li{color:var(--uil-white);background-color:var(--uil-success)}.n .w.ai{color:var(--uil-black);background-color:var(--uil-warning)}.n .w.ei{color:var(--uil-white);background-color:var(--uil-error)}.n .w .dr{height:var(--uil-s);width:var(--uil-s);box-sizing:content-box;padding:var(--uil-xs);border-radius:50%;cursor:pointer;border:none;background-color:transparent;fill:var(--uil-white-b)}.n .w .dr:hover{background-color:#0000001a}.h{display:flex;align-items:center;gap:var(--uil-s)}.h:has(input:disabled) .cr{color:var(--uil-grey-dark)}.h .cr{color:var(--uil-black-w)}.h .p{position:relative;display:block;min-height:var(--uil-l);min-width:var(--uil-l);border:2px solid var(--uil-grey-dark);box-sizing:border-box;cursor:pointer}.h .p:hover,.h .p:has(input:checked){border-color:var(--uil-black-w)}.h .p.ti{border-radius:2px}.h .p.hr,.h .p.hr .ni{border-radius:50%}.h .p:has(input:disabled){border-color:var(--uil-grey-alt);cursor:default}.h .p input{position:absolute;cursor:pointer;height:0;width:0;opacity:0}.h .p input:checked~.P{transform:scale(1)}.h .p input:disabled~.P{background-color:var(--uil-grey-dark)}.h .p .P{position:absolute;top:25%;left:25%;background-color:var(--uil-info);width:var(--uil-xs);height:var(--uil-xs);transform:scale(0);transition:.1s ease}.Q{display:flex;gap:var(--uil-m)}.Q.ui{flex-direction:row}.Q.si{flex-direction:column}.y{--uil-pagination-size: var(--uil-xl);color:var(--uil-black-w);display:flex;align-items:center;margin:0;padding:0;min-height:var(--uil-pagination-size);font-size:calc(var(--uil-pagination-size) - var(--uil-xs))}@media(min-width:760px){.y{--uil-pagination-size: var(--uil-xxl)}}.y .A{border:none;outline:none;background-color:transparent;padding:var(--uil-xxs);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:6px;height:var(--uil-pagination-size);width:var(--uil-pagination-size);font-size:calc(var(--uil-pagination-size) - var(--uil-xs))}.y .A:disabled{cursor:default}.y .A:disabled .vr{fill:var(--uil-grey-alt)}.y .A.di,.y .A:not(:disabled):hover{background-color:var(--uil-grey)}.y .A .vr{fill:var(--uil-black-lighter);height:100%;width:100%}.G{list-style:none;gap:var(--uil-xs)}@media(min-width:760px){.G{gap:var(--uil-s)}}.G .br{height:var(--uil-pagination-size);width:var(--uil-pagination-size)}.G .br .ci{fill:var(--uil-grey-dark)}.z{height:1.875rem;width:1.875rem;transform:rotate(-90deg)}.z.gr{animation:1.5s ease-in-out 0s infinite pr}.z.gr .C{animation:1.5s ease-in-out 0s infinite xr}.z .C{transition:stroke-dashoffset var(--uil-progress-delay) ease-in-out 0ms}.z .C.R{stroke:var(--uil-info)}.z .C.S{stroke:var(--uil-success)}.z .C.T{stroke:var(--uil-warning)}.z .C.U{stroke:var(--uil-error)}@keyframes xr{0%{stroke-dasharray:1px,120px;stroke-dashoffset:0}50%{stroke-dasharray:90px,120px;stroke-dashoffset:-10px}to{stroke-dasharray:1px,120px;stroke-dashoffset:-120px}}@keyframes pr{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.b{overflow:hidden;position:relative;min-width:5rem;width:100%;height:5px}.b.R{background-color:var(--uil-info-o)}.b.S{background-color:var(--uil-success-o)}.b.T{background-color:var(--uil-warning-o)}.b.U{background-color:var(--uil-error-o)}.b.hi{background-color:var(--uil-grey-alt)}.b .j{position:absolute;right:0;left:0;height:100%;width:auto;transition:right var(--uil-progress-delay) ease-in-out 0ms}.b .j.vi{animation:2.5s ease-in-out 0s infinite fr}.b .j.bi{animation:2.5s ease-in-out 0s infinite wr}.b .j.R{background-color:var(--uil-info)}.b .j.S{background-color:var(--uil-success)}.b .j.T{background-color:var(--uil-warning)}.b .j.U{background-color:var(--uil-error)}@keyframes fr{0%{left:-25%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes wr{0%{left:-25%;right:100%}55%{left:-35%;right:100%}to{left:100%;right:-150%}}.r{width:100%;--uil-input-focus-color: var(--uil-info)}.r .i{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box}.r .i.v{border-bottom:1px solid var(--uil-grey-dark)}.r .i.v .o{padding-left:0}.r .i.v .m{left:0}.r .i.v .s{border-bottom:1px solid var(--uil-grey-dark)}.r .i.v .u.H{margin-right:.875rem}.r .i.v~.V{margin-left:0}.r .i.g,.r .i.g .s{border:1px solid var(--uil-grey-dark);border-radius:5px}.r .i.g .u.H{margin-left:.875rem}.r .i.g .u.gi{margin-right:.875rem}.r .i.v:not(:has(.o:disabled)):not(.x):not(:focus-within):not(:has(.u.Y)):has(.o:placeholder-shown):hover,.r .i.v:not(:has(.o:disabled)):not(.x):not(:focus-within):has(:not(.o:placeholder-shown)):hover .s,.r .i.g:not(:has(.o:disabled)):not(.x):not(:focus-within):not(:has(.u.Y)):has(.o:placeholder-shown):hover,.r .i.g:not(:has(.o:disabled)):not(.x):not(:focus-within):has(:not(.o:placeholder-shown)):hover .s{border-color:var(--uil-black-w)}.r .i.v:focus-within,.r .i.v:has(.o:not(:placeholder-shown)),.r .i.v:has(.o:disabled:not(:placeholder-shown)),.r .i.v:has(.u.Y),.r .i.g:focus-within,.r .i.g:has(.o:not(:placeholder-shown)),.r .i.g:has(.o:disabled:not(:placeholder-shown)),.r .i.g:has(.u.Y){border-color:transparent}.r .i.v:has(.u.H),.r .i.g:has(.u.H){flex-direction:row-reverse}.r .i.v:has(.o:disabled),.r .i.g:has(.o:disabled){border-color:var(--uil-grey-alt)}.r .i.x .m{color:var(--uil-error);opacity:1}.r .i.x,.r .i.x .s{border-color:var(--uil-error)}.r .i:not(.x) .o:not(:disabled):focus~.m{opacity:1;color:var(--uil-input-focus-color)}.r .i:not(.x) .o:focus~.s{border-color:var(--uil-input-focus-color)}.r .i .s{border-radius:0;padding:var(--uil-xs);margin:0;position:absolute;left:0;right:0;bottom:0;pointer-events:none;visibility:hidden;border:none;min-height:2.1875rem;box-sizing:content-box}.r .i .s .pi{visibility:hidden;padding:0 2px}.r .i .m{position:absolute;top:25%;left:.7rem;cursor:text;color:var(--uil-black-w);opacity:.6;transition:top .25s ease}.r .i .m.xi{top:var(--uil-m)}.r .i .D{font-size:var(--uil-l);line-height:var(--uil-l);transition:font-size .2s ease}.r .i .D.fi{margin-left:var(--uil-xxxs)}.r .i .o{box-sizing:border-box;width:100%;color:var(--uil-black-w);background-color:transparent;border-radius:0;padding:var(--uil-xs);padding-left:.65rem;border:none;outline:none}.r .i .o:disabled{color:var(--uil-grey-dark)}.r .i .o:disabled~.s,.r .i .o:disabled:not(:placeholder-shown)~.s{border-color:var(--uil-grey-alt)}.r .i .o:disabled~.m{color:var(--uil-grey-dark);opacity:1;cursor:default}.r .i .o:focus~.u.W,.r .i .o:not(:placeholder-shown)~.u.W{visibility:visible}.r .i .o:focus~.s{border-width:2px;padding:7px}.r .i .mr{min-width:fit-content;min-height:fit-content;margin:var(--uil-xxs);resize:var(--uil-textarea-resize)}.r .i .mr~.s{top:-.5rem}.r .i .u{min-width:fit-content;opacity:.75}.r .i .u.W{visibility:hidden}.r .i .o:focus~*.s,.r .i .o:not(:placeholder-shown)~*.s,.r .i .u.Y~*.s{visibility:visible}.r .i .o:focus~*.m,.r .i .o:not(:placeholder-shown)~*.m,.r .i .u.Y~*.m{top:-.65rem}.r .i .o:focus~* .D,.r .i .o:not(:placeholder-shown)~* .D,.r .i .u.Y~* .D{font-size:var(--uil-m);line-height:var(--uil-m)}.r .V{color:var(--uil-grey-dark);font-size:var(--uil-m);line-height:var(--uil-m);margin-left:var(--uil-s);margin-top:var(--uil-xxs);min-height:var(--uil-m)}.r .V.x{color:var(--uil-error)}.E{gap:var(--uil-xs)}@media(min-width:760px){.E{gap:var(--uil-m)}}.E .wi{color:var(--uil-black-alt);background-color:var(--uil-white-alt);border:1px solid var(--uil-black-alt);border-radius:3px;outline:none;padding:var(--uil-xxs) var(--uil-xxs) var(--uil-xxs) 0;height:100%}.E p{margin:0}.E .mi{display:flex;gap:var(--uil-xxs);height:100%}.d{width:100%;color:var(--uil-black-w);background-color:var(--uil-white-alt);box-shadow:0 1px 3px -1px var(--uil-grey-alt);border:1px solid var(--uil-grey-alt);border-radius:5px}.d[open]{overflow-x:auto}.d[open] .k.ki{border-bottom:1px solid var(--uil-grey-alt);box-shadow:0 0 1px 0 var(--uil-grey-alt)}.d[open] .k .I{rotate:90deg}.d .k{width:100%;cursor:pointer;display:flex;align-items:center;padding:var(--uil-xs);box-sizing:border-box}.d .k::marker{content:none}.d .k::-webkit-details-marker{display:none}.d .k.yi .I{margin-right:var(--uil-s)}.d .k.kr{flex-direction:row-reverse;justify-content:space-between}.d .k.kr .I{margin-left:var(--uil-s)}.d .k .I{height:var(--uil-s);width:var(--uil-s);fill:var(--uil-black-lighter);transition:rotate .2s ease-in-out}.d .zi{padding:var(--uil-xs)}.J{display:flex;flex-direction:column}.J .d{border-radius:unset;border-bottom:none}.J .d:first-of-type{border-top-left-radius:5px;border-top-right-radius:5px}.J .d:last-of-type{border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-bottom:1px solid var(--uil-grey-alt)}.F{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.F.Fi li:last-child{font-weight:700}.F li{cursor:default;color:var(--uil-grey-dark);display:flex;align-items:center}.F .yr:last-child,.F .yr:hover{color:var(--uil-black-w)}.F .Z{background-color:transparent;border:none;padding:0;margin:0}.F .Z svg{cursor:pointer;fill:var(--uil-grey-dark);height:var(--uil-xl);width:var(--uil-xl)}.F .Z svg:hover{fill:var(--uil-black-w)}.zr{background-color:var(--uil-grey-alt);height:var(--uil-m);width:100%}.zr.ji{animation:ease-in-out var(--uil-pulse-anim) infinite Fr}@keyframes Fr{0%{opacity:1}50%{opacity:.45}to{opacity:1}}.a{display:block;border:1px solid transparent;border-radius:5px;box-sizing:border-box;background-color:transparent;cursor:pointer;text-decoration:none}.a.K{box-shadow:0 0 2px 0 var(--uil-black-alt)}.a.Yi{--uil-button-font-color: var(--uil-white-b);--uil-button-color: var(--uil-info);--uil-button-hover-color: var(--uil-info-hover)}.a.Ai{--uil-button-font-color: var(--uil-white-b);--uil-button-color: var(--uil-success);--uil-button-hover-color: var(--uil-success-hover)}.a._{--uil-button-font-color: var(--uil-black-light);--uil-button-color: var(--uil-warning);--uil-button-hover-color: var(--uil-warning-hover)}.a._.L,.a._.rr{--uil-button-color: var(--uil-warning-alt)}.a.Ci{--uil-button-font-color: var(--uil-white-b);--uil-button-color: var(--uil-error);--uil-button-hover-color: var(--uil-error-hover)}.a:not(:disabled).K{color:var(--uil-button-font-color);background-color:var(--uil-button-color)}.a:not(:disabled).K:hover{background-color:rgba(var(--uil-button-hover-color),.8)}.a:not(:disabled).L{color:var(--uil-button-color);border-color:var(--uil-button-color)}.a:not(:disabled).L:hover{background-color:rgba(var(--uil-button-hover-color),.08)}.a:not(:disabled).rr{color:var(--uil-button-color)}.a:not(:disabled).rr:hover{background-color:rgba(var(--uil-button-hover-color),.08)}.a.ir{cursor:default;color:var(--uil-grey-dark)}.a.ir.K{background-color:var(--uil-grey-light)}.a.ir.L{border-color:var(--uil-grey-dark)}.a.jr{letter-spacing:1px;padding:var(--uil-xxs) var(--uil-xs)}.a.jr.or{border-radius:var(--uil-m)}.a.Yr{letter-spacing:2px;padding:var(--uil-xs) var(--uil-s)}.a.Yr.or{border-radius:var(--uil-xl)}.a.Ar{letter-spacing:2px;padding:var(--uil-xs) var(--uil-s)}.a.Ar.or{border-radius:var(--uil-xxl)}.l{height:var(--uil-xxxl);position:relative;display:inline-flex;box-sizing:border-box}.l.M{padding:.7rem 0;width:var(--uil-xxxl)}.l.M .c{width:var(--uil-m);height:var(--uil-m);top:var(--uil-xs)}.l.M .c:has(input:checked){left:calc(100% - var(--uil-m))}.l.M .X{border-radius:6px}.l.N{padding:var(--uil-xs) 0;width:2.75rem}.l.N .c{width:var(--uil-l);height:var(--uil-l);top:.375rem}.l.N .c:has(input:checked){left:calc(100% - var(--uil-l))}.l.N .X{border-radius:9px}.l.O{padding:var(--uil-xxs) 0;width:4.25rem}.l.O .c{width:var(--uil-xxxl);height:var(--uil-xxxl);top:.0125rem}.l.O .c:has(input:checked){left:calc(100% - var(--uil-xxxl))}.l.O .X{border-radius:var(--uil-s)}.l.Di{--uil-switch-color: var(--uil-info)}.l.Ei{--uil-switch-color: var(--uil-success)}.l.Xi{--uil-switch-color: var(--uil-warning)}.l.qi{--uil-switch-color: var(--uil-error)}.l .X{height:100%;width:100%;opacity:.25;z-index:-1;background-color:var(--uil-black-lighter);transition:background-color .1s ease-in-out}.l .c{position:absolute;left:0;cursor:pointer;transition:left .15s ease-in-out;border-radius:50%}.l .c:not(:has(input:disabled)):hover,.l .c:not(:has(input:disabled)):has(input:focus){outline:6px solid var(--uil-switch-hover-w)}.l .c:not(:has(input:disabled)):has(input:checked)~.X{background-color:var(--uil-switch-color)}.l .c:not(:has(input:disabled)):has(input:checked) .lr{background-color:var(--uil-switch-color)}.l .c:has(input:disabled){cursor:default}.l .c:has(input:disabled) .lr{background-color:var(--uil-grey-dark)}.l .c .lr{width:100%;height:100%;border-radius:50%;background-color:var(--uil-white);box-shadow:1px 1px 3px -1px var(--uil-black-alt)}.l .c input{clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.t{display:flex;align-items:center;gap:var(--uil-s);cursor:default;outline:none;border-width:2px;border-style:solid}.t.ar{cursor:pointer}.t.ar:focus,.t.ar:hover{opacity:.85}.t.Cr{padding:var(--uil-xxs) var(--uil-xs);border-radius:var(--uil-m)}.t.Dr{padding:var(--uil-xs) var(--uil-s);border-radius:var(--uil-xl)}.t.Er{padding:var(--uil-xs) var(--uil-s);border-radius:var(--uil-xxl)}.t.Bi{border:transparent;color:var(--uil-tag-font-color);background-color:var(--uil-tag-color)}.t.er{background-color:transparent;color:var(--uil-tag-color);border-color:var(--uil-tag-color)}.t.er .q{fill:var(--uil-tag-color)}.t.Gi{box-shadow:0 0 2px 0 var(--uil-black-alt)}.t.Hi{--uil-tag-font-color: var(--uil-white-b);--uil-tag-color: var(--uil-info)}.t.Ii{--uil-tag-font-color: var(--uil-white-b);--uil-tag-color: var(--uil-success)}.t.Xr{--uil-tag-font-color: var(--uil-black-light);--uil-tag-color: var(--uil-warning)}.t.Xr.er{--uil-tag-color: var(--uil-warning-alt)}.t.Ji{--uil-tag-font-color: var(--uil-white-b);--uil-tag-color: var(--uil-error)}.t .q{cursor:pointer}.t .q.Cr{width:var(--uil-m);height:var(--uil-m)}.t .q.Dr{width:var(--uil-xl);height:var(--uil-xl)}.t .q.Er{width:var(--uil-xxl);height:var(--uil-xxl)}

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@hbuesing/ui-library",
-  "version": "6.0.1",
+  "version": "7.0.0",
   "description": "Collection of reusable ui components for react based applications",
   "source": "src/index.ts",
   "type": "module",
@@ -49,17 +49,17 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^9.1.6",
-    "@storybook/react-vite": "^9.1.6",
+    "@storybook/addon-a11y": "^10.0.3",
+    "@storybook/react-vite": "^10.0.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@vitest/coverage-v8": "^3.2.4",
-    "esbuild": "0.25.10",
+    "@vitest/coverage-v8": "^4.0.6",
+    "esbuild": "0.25.12",
     "esbuild-sass-plugin": "^3.3.1",
-    "eslint-plugin-storybook": "^9.1.6",
-    "jsdom": "^27.0.0",
-    "storybook": "^9.1.6",
+    "eslint-plugin-storybook": "^10.0.3",
+    "jsdom": "^27.1.0",
+    "storybook": "^10.0.3",
     "typescript-plugin-css-modules": "^5.2.0",
-    "vitest": "^3.2.4"
+    "vitest": "^4.0.6"
   }
 }