@studio-west/component-sw 0.12.7 → 0.12.9

package/dist/component-sw.css

@@ -1,2 +1,2 @@
-:root{--sw-color-default:#dfdfdf;--sw-color-primary:#3eaf4e;--sw-color-success:#75c6ff;--sw-color-info:silver;--sw-color-warning:#ff7a00;--sw-color-danger:#cc2d4a;--sw-color-preholiday:#ffe78070;--sw-color-weekend:#ff808070;--sw-color-select:#007bff70;--sw-color-holiday:red;--sw-color-nowork:red;--sw-color-active:#5aaaff;--sw-text-color-primary:#333;--sw-text-color-secondary:#4c4c4c;--sw-text-color-third:#818181;--sw-text-color-revers:white;--sw-bg-color:#f4f4f4;--sw-bg-color-page:white;--sw-bg-color-second:#fafafa;--sw-bg-color-glass:#85858573;--sw-border-color:#d6d6d6;--sw-border-color-input:#cecece;--sw-font-size:1rem;--sw-font-size-small:.875rem;--sw-font-size-large:1.125rem;--sw-font-size-big:2.8rem;--sw-border-radius:.625rem;--sw-border-radius-small:.25rem;--sw-border-round:3.625rem;--sw-component-size-base:3rem;--sw-component-size-small:1.625rem;--sw-component-size-large:3.5rem;--sw-component-size-big:10.5rem;--sw-track-thickness:.375rem;--sw-border-thickness:.125rem;color:var(--sw-text-color-primary);background-color:var(--sw-bg-color);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Montserrat,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}:root.dark{--sw-color-default:#4e4e4e;--sw-color-primary:#38a151;--sw-color-success:#0d588d;--sw-color-info:#808185;--sw-color-warning:#ff7a00;--sw-color-danger:#cc2d4a;--sw-color-active:#007bff;--sw-text-color-primary:white;--sw-text-color-secondary:#fafafa;--sw-text-color-third:#fafafa;--sw-text-color-revers:white;--sw-bg-color:#182127;--sw-bg-color-page:#323741;--sw-bg-color-second:#232832;--sw-bg-color-glass:#1b21278c;--sw-border-color:#4e4e4e;--sw-border-color-input:#5c5e63;--sw-shadow:0 100px 80px #00000008, 0 41.7776px 33.4221px #00000005, 0 22.3363px 17.869px #00000005, 0 12.5216px 10.0172px #00000004, 0 6.6501px 5.32008px #00000003, 0 2.76726px 2.21381px #00000002}@media (prefers-color-scheme:dark){:root:not(.light){--sw-color-default:#4e4e4e;--sw-color-primary:#38a151;--sw-color-success:#0d588d;--sw-color-info:#808185;--sw-color-warning:#ff7a00;--sw-color-danger:#cc2d4a;--sw-color-active:#007bff;--sw-text-color-primary:white;--sw-text-color-secondary:#fafafa;--sw-text-color-third:#fafafa;--sw-text-color-revers:white;--sw-bg-color:#182127;--sw-bg-color-page:#323741;--sw-bg-color-second:#232832;--sw-bg-color-glass:#1b21278c;--sw-border-color:#4e4e4e;--sw-border-color-input:#5c5e63;--sw-shadow:0 100px 80px #00000008, 0 41.7776px 33.4221px #00000005, 0 22.3363px 17.869px #00000005, 0 12.5216px 10.0172px #00000004, 0 6.6501px 5.32008px #00000003, 0 2.76726px 2.21381px #00000002}}.sw-alert-wrapper{top:max(env(safe-area-inset-top,0rem), env(titlebar-area-y,0rem));background:0 0;border:none;position:fixed}.sw-alert-wrapper .sw-alert{border-radius:var(--sw-border-radius);color:var(--sw-text-color-revers);margin:1rem auto 0;padding:.625rem 1rem}.sw-alert-wrapper .sw-alert .svg-icon{flex-shrink:0}.sw-alert-wrapper .sw-alert .svg-icon:first-child{margin-right:1rem}.sw-alert-wrapper .sw-alert .fade-enter-active,.sw-alert-wrapper .sw-alert .fade-leave-active{transition:opacity .5s}.sw-alert-wrapper .sw-alert .fade-enter-from,.sw-alert-wrapper .sw-alert .fade-leave-to{opacity:0}.sw-alert-wrapper .sw-alert footer{justify-content:flex-end;display:flex}.sw-tabs{-webkit-user-select:none;user-select:none}.sw-tabs>header{border-bottom:2px solid var(--sw-color-info);color:var(--sw-color-info);-webkit-user-select:none;user-select:none;font-size:var(--sw-font-size-small);margin-bottom:1.25rem;font-weight:400;transition:all .6s ease-out;display:flex}.sw-tabs>header span{cursor:pointer;background:0 0;border:none;border-radius:0;outline:none;padding:5px;position:relative;top:2px}.sw-tabs>header span.active{border-bottom:2px solid var(--sw-color-primary);color:var(--sw-color-primary);font-weight:700}.sw-tabs>header span:hover:not(.active){color:var(--sw-border-color)}.sw-input{border:1px solid var(--sw-border-color-input);border-radius:var(--sw-border-radius);align-items:center;gap:0 1.75rem;padding:0 1.2em;display:flex;position:relative}.sw-input>label{text-align:left;font-size:var(--sw-font-size);background:var(--sw-bg-color-page);line-height:1;transition:all .2s linear .2s;position:absolute;top:1.1rem}.sw-input>label:hover{top:.8rem}.sw-input>label+input::placeholder{opacity:0}.sw-input>input{line-height:var(--sw-component-size-base);width:100%;font-size:var(--sw-font-size-large);background:0 0;border:none;outline:none}.sw-input>input::placeholder{color:var(--sw-text-color-secondary);opacity:1;transition:opacity .2s linear .2s}.sw-input>input:focus::placeholder{opacity:1}.sw-input .svg-icon{color:var(--sw-text-color-third);font-size:20px}.sw-input>svg+label{left:4rem}.sw-input.sw-small label{font-size:var(--sw-font-size-small);top:.3rem}.sw-input.sw-small label:hover{top:0}.sw-input.sw-small input{line-height:var(--sw-component-size-small)}.sw-input.sw-large label{font-size:var(--sw-font-size-large);top:1.22rem}.sw-input.sw-large label:hover{top:1rem}.sw-input.sw-large input{line-height:var(--sw-component-size-large)}.sw-button{border-radius:var(--sw-border-radius);border:1px solid var(--sw-color-default);min-height:var(--sw-component-size-base);font-size:var(--sw-font-size);cursor:pointer;background-color:var(--sw-color-default);color:var(--sw-text-color-revers);padding:0 1.2em;font-weight:500;transition:border-color .25s}.sw-button-group{--radius:var(--sw-border-radius);display:inline-flex}.sw-button-group.sw-round{--radius:var(--sw-border-round)}.sw-button-group>.sw-button{border-radius:0}.sw-button-group :first-child{border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius)}.sw-button-group :last-child{border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius)}.sw-button-group.sw-vertical :first-child{border-top-right-radius:var(--radius);border-bottom-left-radius:0}.sw-button-group.sw-vertical :last-child{border-top-right-radius:0;border-bottom-left-radius:var(--radius)}.sw-form-item{font-size:var(--sw-font-size-small);color:var(--sw-text-color-secondary);justify-content:space-between;gap:1rem;display:flex}.sw-form-item.sw-start{justify-content:flex-start}.sw-form-item.sw-end{justify-content:flex-end}.sw-form-item.sw-around{justify-content:space-around}.sw-form-item.sw-center{justify-content:center}.sw-dropdown{outline:none;display:inline-block;position:relative}.sw-dropdown-popup{z-index:3;-webkit-user-select:none;user-select:none;background-color:var(--sw-bg-color-second);border:1px solid var(--sw-border-color);border-radius:4px;min-width:200px;margin:0;padding:8px;box-shadow:0 2px 8px #0000001a}.sw-dropdown-popup.gide>header,.sw-dropdown-popup.gide>footer{justify-content:space-between;align-items:center;display:flex}.sw-dropdown-popup.gide>header .sw-button,.sw-dropdown-popup.gide>footer .sw-button{font-size:var(--sw-font-size-large);padding:.3em}.sw-dropdown-popup.gide>footer .sw-button{padding:.1em .6em}.sw-dropdown-popup.gide img{height:160px;position:absolute;right:-100px}.sw-dropdown-popup.gide img.reflect{left:-100px}.sw-dropdown-item{-webkit-user-select:none;user-select:none;outline:none;display:block}.sw-dropdown-item svg{margin-right:.5rem}.sw-dropdown-item:hover{color:var(--sw-color-primary)}.sw-collapse{grid-template-rows:0fr;transition:grid-template-rows .28s;display:grid}.sw-collapse.is-open{grid-template-rows:1fr}.sw-collapse__inner{min-height:0;overflow:hidden}.sw-slider{width:100%;height:var(--sw-component-size-small);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.sw-slider:not(.vertical) .track{height:var(--sw-track-thickness);width:100%;top:50%;left:0;transform:translateY(-50%)}.sw-slider.vertical{width:var(--sw-component-size-small);height:200px}.sw-slider.vertical .track{width:var(--sw-track-thickness);height:100%;top:0;left:50%;transform:translate(-50%)}.sw-slider .track{background:var(--sw-border-color);border-radius:var(--sw-border-radius-small);position:absolute}.sw-slider .track .fill{background:var(--sw-color-primary);border-radius:var(--sw-border-radius-small);width:100%;height:100%;transition:all .1s;position:absolute}.sw-slider .thumb{width:var(--sw-component-size-small);height:var(--sw-component-size-small);background:var(--sw-bg-color-page);border:var(--sw-border-thickness) solid var(--sw-color-primary);box-sizing:border-box;border-radius:var(--sw-border-round);cursor:grab;text-align:center;color:var(--sw-color-primary);line-height:calc(var(--sw-component-size-small) - var(--sw-border-thickness) * 2);transition:all .2s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 4px #0003}.sw-slider .thumb:hover,.sw-slider .thumb:active{transform:translate(-50%,-50%)scale(1.1)}.sw-slider .thumb>*{width:calc(var(--sw-component-size-small) - var(--sw-border-thickness) * 2);height:calc(var(--sw-component-size-small) - var(--sw-border-thickness) * 2)}.sw-slider .thumb .tooltip{background:var(--sw-bg-color-page);color:var(--sw-text-color-primary);box-shadow:var(--sw-shadow);font-size:var(--sw-font-size-small);white-space:nowrap;z-index:10;padding:0;position:absolute;left:50%;transform:translate(-50%)}.sw-slider .thumb .tooltip.tooltip-vertical{top:50%;left:auto;transform:translateY(-50%)}.sw-switch{box-sizing:border-box;-webkit-user-select:none;user-select:none;font-size:var(--sw-font-size);align-items:center;display:inline-flex}.sw-switch>input{display:none}.sw-switch>input:checked+label{background-color:var(--sw-color-primary)}.sw-switch>input:checked+label:before{color:var(--sw-text-color-revers);content:attr(data-onlabel);right:auto;left:calc(var(--sw-component-size-base) * .4);bottom:calc((var(--sw-component-size-base) - 1em) / 4)}.sw-switch>input:checked+label:after{left:calc(var(--sw-component-size-base) * 1.4);background:#f7f7f7}.sw-switch>label{background-color:var(--sw-color-info);border-radius:var(--sw-component-size-base);cursor:pointer;flex:0 0 calc(var(--sw-component-size-base) * 2.6);width:calc(var(--sw-component-size-base) * 2.6);height:var(--sw-component-size-base);margin-right:.5rem;transition:all .3s;position:relative}.sw-switch>label:before{color:var(--sw-text-color-revers);content:attr(data-offlabel);right:calc(var(--sw-component-size-base) * .4);bottom:calc((var(--sw-component-size-base) - 1em) / 4);font-size:1em;transition:all .3s;display:block;position:absolute}.sw-switch>label:after{background:var(--sw-text-color-revers);border:calc(var(--sw-border-thickness) / 2) solid var(--sw-color-info);content:"";left:calc(var(--sw-border-thickness) / -2);width:calc(var(--sw-component-size-base) * 1.2);height:calc(var(--sw-component-size-base) * 1.2);top:calc(var(--sw-component-size-base) * -.15);border-radius:50%;transition:all .3s;position:absolute}.sw-switch.sw-small{font-size:var(--sw-font-size-small)}.sw-switch.sw-small>label{border-radius:var(--sw-component-size-small);height:var(--sw-component-size-small);width:calc(var(--sw-component-size-small) * 1.9);flex:0 0 calc(var(--sw-component-size-small) * 1.9)}.sw-switch.sw-small>label:before{content:""}.sw-switch.sw-small>label:after{content:"";left:calc(var(--sw-border-thickness) / -2);width:calc(var(--sw-component-size-small) - var(--sw-border-thickness));height:calc(var(--sw-component-size-small) - var(--sw-border-thickness));top:0}.sw-switch.sw-small>input:checked+label:before{content:""}.sw-switch.sw-small>input:checked+label:after{left:calc(var(--sw-component-size-small) * 1.9)}.sw-switch.sw-checkbox label{border-radius:var(--sw-border-radius-small);background:var(--sw-bg-color-pag);border:1px solid var(--sw-border-color-input);flex:0 0 .875rem;height:.875rem}.sw-switch.sw-checkbox label:after{content:none}.sw-switch.sw-checkbox>input:checked+label{background:var(--sw-bg-color-page);color:var(--sw-color-primary)}.sw-switch.sw-checkbox>input:checked+label:before{content:"✔";text-rendering:geometricprecision;white-space:nowrap;width:1em;font-size:1.6rem;top:-.9rem;left:0}.sw-skeleton{flex-wrap:wrap;align-items:flex-end;gap:.5rem;display:flex}.sw-skeleton-item{min-height:var(--sw-component-size-base);background:var(--sw-bg-color-second);border-radius:var(--sw-border-radius);border:1px solid var(--sw-bg-color);box-sizing:border-box;width:100%;position:relative;overflow:hidden}.sw-skeleton-item>div{background:var(--sw-border-color-input);width:10px;height:100%;box-shadow:0 0 20px 20px var(--sw-border-color-input);animation:3s linear infinite sw-skeleton;display:inline-block;position:absolute;transform:skew(-20deg)}.sw-message{background-color:var(--sw-bg-color-page);border:1px solid var(--sw-border-color);border-radius:var(--sw-border-radius);box-sizing:border-box;min-width:16rem;max-width:95%;max-height:95%;padding:1.875rem;top:50%;left:50%;overflow-y:auto;transform:translateY(-50%)translate(-50%)}.sw-message::backdrop{background:var(--sw-bg-color-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.sw-message>header{justify-content:space-between;gap:.5rem;margin-bottom:.5rem;display:flex}.sw-message>footer{flex-wrap:wrap;justify-content:flex-end;gap:.5rem;margin-top:.5rem;display:flex}.sw-modal-footer{justify-content:flex-end;gap:.5rem;margin-top:1rem;display:flex}.sw-data-picker{flex-wrap:wrap;justify-content:center;gap:2rem;display:flex}.sw-data-picker .month_year{justify-content:space-around;align-items:center;display:flex}.sw-data-picker .month_year span:not(.text) button{font-size:1.3em}.sw-data-picker button{color:var(--sw-text-color-primary);text-align:center;cursor:pointer;background:0 0;border:none;border-radius:.2rem;height:30px;line-height:30px;transition:all .3s}.sw-data-picker button:hover:not(.disabled):not(.active){color:var(--sw-color-primary)}.sw-data-picker .week{border-bottom:1px solid var(--sw-color-info);margin-bottom:.5rem}.sw-data-picker .month,.sw-data-picker .week{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr;gap:.2rem;width:250px;display:grid}.sw-data-picker .month>button,.sw-data-picker .week>button{width:30px}.sw-data-picker .month>button.disabled,.sw-data-picker .week>button.disabled{color:var(--sw-color-info);cursor:not-allowed}.sw-data-picker .month>button.preholiday,.sw-data-picker .week>button.preholiday{background-color:var(--sw-color-preholiday)}.sw-data-picker .month>button.weekend,.sw-data-picker .week>button.weekend{background-color:var(--sw-color-weekend)}.sw-data-picker .month>button.select,.sw-data-picker .week>button.select{background-color:var(--sw-color-select)}.sw-data-picker .month>button.holiday,.sw-data-picker .week>button.holiday{background-color:var(--sw-color-holiday)}.sw-data-picker .month>button.nowork,.sw-data-picker .week>button.nowork{background-color:var(--sw-color-nowork)}.sw-data-picker .month>button.active,.sw-data-picker .week>button.active{background-color:var(--sw-color-active)}.sw-data-picker .year{border-top:1px solid var(--sw-color-info);grid-template-columns:1fr 1fr 1fr;gap:.2rem;width:250px;display:grid}.sw-data-picker .year>button.disabled{color:var(--sw-color-info);cursor:not-allowed}.sw-data-picker .year>button.active{color:var(--sw-color-active)}.sw-gide{z-index:1;grid-template:"overlay0 overlay0 overlay0"40%"overlay1 windows overlay2"0"overlay3 overlay3 overlay3"1fr/1fr 0 1fr;width:100%;height:100%;display:grid;position:absolute;top:0;left:0;overflow-x:hidden}.sw-gide .hole{height:100%}.sw-gide .overlay0,.sw-gide .overlay1,.sw-gide .overlay2,.sw-gide .overlay3{background:var(--sw-bg-color-glass);-webkit-backdrop-filter:blur(.8rem);backdrop-filter:blur(.8rem);grid-area:overlay0}.sw-gide .overlay1{grid-area:overlay1}.sw-gide .overlay2{grid-area:overlay2}.sw-gide .overlay3{grid-area:overlay3}.sw-icon{vertical-align:-.15em;width:1em;height:1em;fill:var(--icon-fill,currentColor);stroke:var(--icon-stroke,currentColor);overflow:hidden}.sw-external-icon{background-color:var(--icon-bg,currentColor);display:inline-block;-webkit-mask-size:cover!important;mask-size:cover!important}.sw-revers{transform:scaleX(-1)}.sw-round{border-radius:var(--sw-border-round)}.sw-small{min-height:var(--sw-component-size-small)}.sw-large{min-height:var(--sw-component-size-large)}.sw-big{min-height:var(--sw-component-size-big)}.sw-primary{background-color:var(--sw-color-primary);border-color:var(--sw-color-primary)}.sw-success{background-color:var(--sw-color-success);border-color:var(--sw-color-success)}.sw-info{background-color:var(--sw-color-info);border-color:var(--sw-color-info)}.sw-warning{background-color:var(--sw-color-warning);border-color:var(--sw-color-warning)}.sw-danger{background-color:var(--sw-color-danger);border-color:var(--sw-color-danger)}.sw-vertical{flex-direction:column}.sw-disabled{opacity:.5;cursor:not-allowed}.sw-text{color:var(--sw-text-color-primary)}.sw-text:hover,.sw-text:active{opacity:.5}.sw-text:not(:hover),.sw-text:not(:active){background:0 0}.sw-text.sw-primary{color:var(--sw-color-primary)}.sw-text.sw-success{color:var(--sw-color-success)}.sw-text.sw-info{color:var(--sw-color-info)}.sw-text.sw-warning{color:var(--sw-color-warning)}.sw-text.sw-danger{color:var(--sw-color-danger)}.sw-link{color:var(--sw-text-color-secondary);background:0 0;border:none;min-height:1em;padding:0}.sw-link:hover.sw-primary{color:var(--sw-color-primary)}.sw-link:hover.sw-success{color:var(--sw-color-success)}.sw-link:hover.sw-info{color:var(--sw-color-info)}.sw-link:hover.sw-warning{color:var(--sw-color-warning)}.sw-link:hover.sw-danger{color:var(--sw-color-danger)}@keyframes sw-skeleton{0%{left:-50px}to{left:calc(50px + 100%)}}.popup{position:relative}.popup .wrapper{z-index:1;word-break:break-word;margin:10px 0 0;padding:0;font-size:.8rem;line-height:1.2;list-style:none;position:absolute}.popup .wrapper :before{content:"";border:1px solid var(--el-border-color-light);background:var(--el-bg-color-overlay);z-index:1;width:10px;height:10px;position:absolute;top:-6px;right:50%;transform:rotate(-45deg);border-bottom-color:#0000!important;border-left-color:#0000!important}.popup .scrollbar{box-shadow:0 0 0 1px var(--el-border-color);border-radius:var(--el-border-radius-base);background:#fff;margin:0;padding:.5rem 0}.popup .scrollbar li{white-space:nowrap;line-height:22px;font-size:var(--sw-font-size);color:var(--sw-text-color-secondary);cursor:pointer;outline:none;align-items:start;margin:0;padding:5px 16px;list-style:none;display:flex}.popup .scrollbar li:not(.is-disabled):focus{background:var(--el-dropdown-menuItem-hover-fill);color:var(--el-dropdown-menuItem-hover-color)}
+:root{--sw-color-default:#dfdfdf;--sw-color-primary:#3eaf4e;--sw-color-success:#75c6ff;--sw-color-info:silver;--sw-color-warning:#ff7a00;--sw-color-danger:#cc2d4a;--sw-color-preholiday:#ffe78070;--sw-color-weekend:#ff808070;--sw-color-select:#007bff70;--sw-color-holiday:red;--sw-color-nowork:red;--sw-color-active:#5aaaff;--sw-text-color-primary:#333;--sw-text-color-secondary:#4c4c4c;--sw-text-color-third:#818181;--sw-text-color-revers:white;--sw-bg-color:#f4f4f4;--sw-bg-color-page:white;--sw-bg-color-second:#fafafa;--sw-bg-color-glass:#85858573;--sw-border-color:#d6d6d6;--sw-border-color-input:#cecece;--sw-font-size:1rem;--sw-font-size-small:.875rem;--sw-font-size-large:1.125rem;--sw-font-size-big:2.8rem;--sw-border-radius:.625rem;--sw-border-radius-small:.25rem;--sw-border-round:3.625rem;--sw-component-size-base:3rem;--sw-component-size-small:1.625rem;--sw-component-size-large:3.5rem;--sw-component-size-big:10.5rem;--sw-track-thickness:.375rem;--sw-border-thickness:.125rem;color:var(--sw-text-color-primary);background-color:var(--sw-bg-color);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Montserrat,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}:root.dark{--sw-color-default:#4e4e4e;--sw-color-primary:#38a151;--sw-color-success:#0d588d;--sw-color-info:#808185;--sw-color-warning:#ff7a00;--sw-color-danger:#cc2d4a;--sw-color-active:#007bff;--sw-text-color-primary:white;--sw-text-color-secondary:#fafafa;--sw-text-color-third:#fafafa;--sw-text-color-revers:white;--sw-bg-color:#182127;--sw-bg-color-page:#323741;--sw-bg-color-second:#232832;--sw-bg-color-glass:#1b21278c;--sw-border-color:#4e4e4e;--sw-border-color-input:#5c5e63;--sw-shadow:0 100px 80px #00000008, 0 41.7776px 33.4221px #00000005, 0 22.3363px 17.869px #00000005, 0 12.5216px 10.0172px #00000004, 0 6.6501px 5.32008px #00000003, 0 2.76726px 2.21381px #00000002}@media (prefers-color-scheme:dark){:root:not(.light){--sw-color-default:#4e4e4e;--sw-color-primary:#38a151;--sw-color-success:#0d588d;--sw-color-info:#808185;--sw-color-warning:#ff7a00;--sw-color-danger:#cc2d4a;--sw-color-active:#007bff;--sw-text-color-primary:white;--sw-text-color-secondary:#fafafa;--sw-text-color-third:#fafafa;--sw-text-color-revers:white;--sw-bg-color:#182127;--sw-bg-color-page:#323741;--sw-bg-color-second:#232832;--sw-bg-color-glass:#1b21278c;--sw-border-color:#4e4e4e;--sw-border-color-input:#5c5e63;--sw-shadow:0 100px 80px #00000008, 0 41.7776px 33.4221px #00000005, 0 22.3363px 17.869px #00000005, 0 12.5216px 10.0172px #00000004, 0 6.6501px 5.32008px #00000003, 0 2.76726px 2.21381px #00000002}}.sw-alert-wrapper{top:max(env(safe-area-inset-top,0rem), env(titlebar-area-y,0rem));background:0 0;border:none;position:fixed}.sw-alert-wrapper .sw-alert{border-radius:var(--sw-border-radius);color:var(--sw-text-color-revers);margin:1rem auto 0;padding:.625rem 1rem}.sw-alert-wrapper .sw-alert .svg-icon{flex-shrink:0}.sw-alert-wrapper .sw-alert .svg-icon:first-child{margin-right:1rem}.sw-alert-wrapper .sw-alert .fade-enter-active,.sw-alert-wrapper .sw-alert .fade-leave-active{transition:opacity .5s}.sw-alert-wrapper .sw-alert .fade-enter-from,.sw-alert-wrapper .sw-alert .fade-leave-to{opacity:0}.sw-alert-wrapper .sw-alert footer{justify-content:flex-end;display:flex}.sw-tabs{-webkit-user-select:none;user-select:none}.sw-tabs>header{border-bottom:2px solid var(--sw-color-info);color:var(--sw-color-info);-webkit-user-select:none;user-select:none;font-size:var(--sw-font-size-small);margin-bottom:1.25rem;font-weight:400;transition:all .6s ease-out;display:flex}.sw-tabs>header span{cursor:pointer;background:0 0;border:none;border-radius:0;outline:none;padding:5px;position:relative;top:2px}.sw-tabs>header span.active{border-bottom:2px solid var(--sw-color-primary);color:var(--sw-color-primary);font-weight:700}.sw-tabs>header span:hover:not(.active){color:var(--sw-border-color)}.sw-input{border:1px solid var(--sw-border-color-input);border-radius:var(--sw-border-radius);align-items:center;gap:0 1.75rem;padding:0 1.2em;display:flex;position:relative}.sw-input>label{text-align:left;font-size:var(--sw-font-size);background:var(--sw-bg-color-page);line-height:1;transition:all .2s linear .2s;position:absolute;top:1.1rem}.sw-input>label:hover{top:.8rem}.sw-input>label+input::placeholder{opacity:0}.sw-input>input{line-height:var(--sw-component-size-base);width:100%;font-size:var(--sw-font-size-large);background:0 0;border:none;outline:none}.sw-input>input::placeholder{color:var(--sw-text-color-secondary);opacity:1;transition:opacity .2s linear .2s}.sw-input>input:focus::placeholder{opacity:1}.sw-input .svg-icon{color:var(--sw-text-color-third);font-size:20px}.sw-input>svg+label{left:4rem}.sw-input.sw-small label{font-size:var(--sw-font-size-small);top:.3rem}.sw-input.sw-small label:hover{top:0}.sw-input.sw-small input{line-height:var(--sw-component-size-small)}.sw-input.sw-large label{font-size:var(--sw-font-size-large);top:1.22rem}.sw-input.sw-large label:hover{top:1rem}.sw-input.sw-large input{line-height:var(--sw-component-size-large)}.sw-button{border-radius:var(--sw-border-radius);border:1px solid var(--sw-color-default);min-height:var(--sw-component-size-base);font-size:var(--sw-font-size);cursor:pointer;background-color:var(--sw-color-default);color:var(--sw-text-color-revers);padding:0 1.2em;font-weight:500;transition:border-color .25s}.sw-button-group{--radius:var(--sw-border-radius);display:inline-flex}.sw-button-group.sw-round{--radius:var(--sw-border-round)}.sw-button-group>.sw-button{border-radius:0}.sw-button-group :first-child{border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius)}.sw-button-group :last-child{border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius)}.sw-button-group.sw-vertical :first-child{border-top-right-radius:var(--radius);border-bottom-left-radius:0}.sw-button-group.sw-vertical :last-child{border-top-right-radius:0;border-bottom-left-radius:var(--radius)}.sw-form-item{font-size:var(--sw-font-size-small);color:var(--sw-text-color-secondary);justify-content:space-between;gap:1rem;display:flex}.sw-form-item.sw-start{justify-content:flex-start}.sw-form-item.sw-end{justify-content:flex-end}.sw-form-item.sw-around{justify-content:space-around}.sw-form-item.sw-center{justify-content:center}.sw-dropdown{outline:none;display:inline-block;position:relative}.sw-dropdown-popup{z-index:3;-webkit-user-select:none;user-select:none;background-color:var(--sw-bg-color-second);border:1px solid var(--sw-border-color);border-radius:4px;min-width:200px;margin:0;padding:8px;box-shadow:0 2px 8px #0000001a}.sw-dropdown-popup.gide>header,.sw-dropdown-popup.gide>footer{justify-content:space-between;align-items:center;display:flex}.sw-dropdown-popup.gide>header .sw-button,.sw-dropdown-popup.gide>footer .sw-button{font-size:var(--sw-font-size-large);padding:.3em}.sw-dropdown-popup.gide>footer .sw-button{padding:.1em .6em}.sw-dropdown-popup.gide img{height:160px;position:absolute;right:-100px}.sw-dropdown-popup.gide img.reflect{left:-100px}.sw-dropdown-item{-webkit-user-select:none;user-select:none;outline:none;display:block}.sw-dropdown-item svg{margin-right:.5rem}.sw-dropdown-item:hover{color:var(--sw-color-primary)}.sw-collapse{grid-template-rows:0fr;transition:grid-template-rows .28s;display:grid}.sw-collapse.is-open{grid-template-rows:1fr}.sw-collapse__inner{min-height:0;overflow:hidden}.sw-slider{width:100%;height:var(--sw-component-size-small);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.sw-slider:not(.vertical) .track{height:var(--sw-track-thickness);width:100%;top:50%;left:0;transform:translateY(-50%)}.sw-slider.vertical{width:var(--sw-component-size-small);height:200px}.sw-slider.vertical .track{width:var(--sw-track-thickness);height:100%;top:0;left:50%;transform:translate(-50%)}.sw-slider .track{background:var(--sw-border-color);border-radius:var(--sw-border-radius-small);position:absolute}.sw-slider .track .fill{background:var(--sw-color-primary);border-radius:var(--sw-border-radius-small);width:100%;height:100%;transition:all .1s;position:absolute}.sw-slider .thumb{width:var(--sw-component-size-small);height:var(--sw-component-size-small);background:var(--sw-bg-color-page);border:var(--sw-border-thickness) solid var(--sw-color-primary);box-sizing:border-box;border-radius:var(--sw-border-round);cursor:grab;text-align:center;color:var(--sw-color-primary);line-height:calc(var(--sw-component-size-small) - var(--sw-border-thickness) * 2);transition:all .2s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 4px #0003}.sw-slider .thumb:hover,.sw-slider .thumb:active{transform:translate(-50%,-50%)scale(1.1)}.sw-slider .thumb>*{width:calc(var(--sw-component-size-small) - var(--sw-border-thickness) * 2);height:calc(var(--sw-component-size-small) - var(--sw-border-thickness) * 2)}.sw-slider .thumb .tooltip{background:var(--sw-bg-color-page);color:var(--sw-text-color-primary);box-shadow:var(--sw-shadow);font-size:var(--sw-font-size-small);white-space:nowrap;z-index:10;padding:0;position:absolute;left:50%;transform:translate(-50%)}.sw-slider .thumb .tooltip.tooltip-vertical{top:50%;left:auto;transform:translateY(-50%)}.sw-switch{box-sizing:border-box;-webkit-user-select:none;user-select:none;font-size:var(--sw-font-size);align-items:center;display:inline-flex}.sw-switch>input{display:none}.sw-switch>input:checked+label{background-color:var(--sw-color-primary)}.sw-switch>input:checked+label:before{color:var(--sw-text-color-revers);content:attr(data-onlabel);right:auto;left:calc(var(--sw-component-size-base) * .4);bottom:calc((var(--sw-component-size-base) - 1em) / 4)}.sw-switch>input:checked+label:after{left:calc(var(--sw-component-size-base) * 1.4);background:#f7f7f7}.sw-switch>label{background-color:var(--sw-color-info);border-radius:var(--sw-component-size-base);cursor:pointer;flex:0 0 calc(var(--sw-component-size-base) * 2.6);width:calc(var(--sw-component-size-base) * 2.6);height:var(--sw-component-size-base);margin-right:.5rem;transition:all .3s;position:relative}.sw-switch>label:before{color:var(--sw-text-color-revers);content:attr(data-offlabel);right:calc(var(--sw-component-size-base) * .4);bottom:calc((var(--sw-component-size-base) - 1em) / 4);font-size:1em;transition:all .3s;display:block;position:absolute}.sw-switch>label:after{background:var(--sw-text-color-revers);border:calc(var(--sw-border-thickness) / 2) solid var(--sw-color-info);content:"";left:calc(var(--sw-border-thickness) / -2);width:calc(var(--sw-component-size-base) * 1.2);height:calc(var(--sw-component-size-base) * 1.2);top:calc(var(--sw-component-size-base) * -.15);border-radius:50%;transition:all .3s;position:absolute}.sw-switch.sw-small{font-size:var(--sw-font-size-small)}.sw-switch.sw-small>label{border-radius:var(--sw-component-size-small);height:var(--sw-component-size-small);width:calc(var(--sw-component-size-small) * 1.9);flex:0 0 calc(var(--sw-component-size-small) * 1.9)}.sw-switch.sw-small>label:before{content:""}.sw-switch.sw-small>label:after{content:"";left:calc(var(--sw-border-thickness) / -2);width:calc(var(--sw-component-size-small) - var(--sw-border-thickness));height:calc(var(--sw-component-size-small) - var(--sw-border-thickness));top:0}.sw-switch.sw-small>input:checked+label:before{content:""}.sw-switch.sw-small>input:checked+label:after{left:calc(var(--sw-component-size-small) * .9)}.sw-switch.sw-checkbox label{border-radius:var(--sw-border-radius-small);background:var(--sw-bg-color-pag);border:1px solid var(--sw-border-color-input);flex:0 0 .875rem;height:.875rem}.sw-switch.sw-checkbox label:after{content:none}.sw-switch.sw-checkbox>input:checked+label{background:var(--sw-bg-color-page);color:var(--sw-color-primary)}.sw-switch.sw-checkbox>input:checked+label:before{content:"✔";text-rendering:geometricprecision;white-space:nowrap;width:1em;font-size:1.6rem;top:-.9rem;left:0}.sw-skeleton{flex-wrap:wrap;align-items:flex-end;gap:.5rem;display:flex}.sw-skeleton-item{min-height:var(--sw-component-size-base);background:var(--sw-bg-color-second);border-radius:var(--sw-border-radius);border:1px solid var(--sw-bg-color);box-sizing:border-box;width:100%;position:relative;overflow:hidden}.sw-skeleton-item>div{background:var(--sw-border-color-input);width:10px;height:100%;box-shadow:0 0 20px 20px var(--sw-border-color-input);animation:3s linear infinite sw-skeleton;display:inline-block;position:absolute;transform:skew(-20deg)}.sw-message{background-color:var(--sw-bg-color-page);border:1px solid var(--sw-border-color);border-radius:var(--sw-border-radius);box-sizing:border-box;min-width:16rem;max-width:95%;max-height:95%;padding:1.875rem;top:50%;left:50%;overflow-y:auto;transform:translateY(-50%)translate(-50%)}.sw-message::backdrop{background:var(--sw-bg-color-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.sw-message>header{justify-content:space-between;gap:.5rem;margin-bottom:.5rem;display:flex}.sw-message>footer{flex-wrap:wrap;justify-content:flex-end;gap:.5rem;margin-top:.5rem;display:flex}.sw-modal-footer{justify-content:flex-end;gap:.5rem;margin-top:1rem;display:flex}.sw-data-picker{flex-wrap:wrap;justify-content:center;gap:2rem;display:flex}.sw-data-picker .month_year{justify-content:space-around;align-items:center;display:flex}.sw-data-picker .month_year span:not(.text) button{font-size:1.3em}.sw-data-picker button{color:var(--sw-text-color-primary);text-align:center;cursor:pointer;background:0 0;border:none;border-radius:.2rem;height:30px;line-height:30px;transition:all .3s}.sw-data-picker button:hover:not(.disabled):not(.active){color:var(--sw-color-primary)}.sw-data-picker .week{border-bottom:1px solid var(--sw-color-info);margin-bottom:.5rem}.sw-data-picker .month,.sw-data-picker .week{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr;gap:.2rem;width:250px;display:grid}.sw-data-picker .month>button,.sw-data-picker .week>button{width:30px}.sw-data-picker .month>button.disabled,.sw-data-picker .week>button.disabled{color:var(--sw-color-info);cursor:not-allowed}.sw-data-picker .month>button.preholiday,.sw-data-picker .week>button.preholiday{background-color:var(--sw-color-preholiday)}.sw-data-picker .month>button.weekend,.sw-data-picker .week>button.weekend{background-color:var(--sw-color-weekend)}.sw-data-picker .month>button.select,.sw-data-picker .week>button.select{background-color:var(--sw-color-select)}.sw-data-picker .month>button.holiday,.sw-data-picker .week>button.holiday{background-color:var(--sw-color-holiday)}.sw-data-picker .month>button.nowork,.sw-data-picker .week>button.nowork{background-color:var(--sw-color-nowork)}.sw-data-picker .month>button.active,.sw-data-picker .week>button.active{background-color:var(--sw-color-active)}.sw-data-picker .year{border-top:1px solid var(--sw-color-info);grid-template-columns:1fr 1fr 1fr;gap:.2rem;width:250px;display:grid}.sw-data-picker .year>button.disabled{color:var(--sw-color-info);cursor:not-allowed}.sw-data-picker .year>button.active{color:var(--sw-color-active)}.sw-gide{z-index:1;grid-template:"overlay0 overlay0 overlay0"40%"overlay1 windows overlay2"0"overlay3 overlay3 overlay3"1fr/1fr 0 1fr;width:100%;height:100%;display:grid;position:absolute;top:0;left:0;overflow-x:hidden}.sw-gide .hole{height:100%}.sw-gide .overlay0,.sw-gide .overlay1,.sw-gide .overlay2,.sw-gide .overlay3{background:var(--sw-bg-color-glass);-webkit-backdrop-filter:blur(.8rem);backdrop-filter:blur(.8rem);grid-area:overlay0}.sw-gide .overlay1{grid-area:overlay1}.sw-gide .overlay2{grid-area:overlay2}.sw-gide .overlay3{grid-area:overlay3}.sw-icon{vertical-align:-.15em;width:1em;height:1em;fill:var(--icon-fill,currentColor);stroke:var(--icon-stroke,currentColor);overflow:hidden}.sw-external-icon{background-color:var(--icon-bg,currentColor);display:inline-block;-webkit-mask-size:cover!important;mask-size:cover!important}.sw-revers{transform:scaleX(-1)}.sw-round{border-radius:var(--sw-border-round)}.sw-small{min-height:var(--sw-component-size-small)}.sw-large{min-height:var(--sw-component-size-large)}.sw-big{min-height:var(--sw-component-size-big)}.sw-primary{background-color:var(--sw-color-primary);border-color:var(--sw-color-primary)}.sw-success{background-color:var(--sw-color-success);border-color:var(--sw-color-success)}.sw-info{background-color:var(--sw-color-info);border-color:var(--sw-color-info)}.sw-warning{background-color:var(--sw-color-warning);border-color:var(--sw-color-warning)}.sw-danger{background-color:var(--sw-color-danger);border-color:var(--sw-color-danger)}.sw-vertical{flex-direction:column}.sw-disabled{opacity:.5;cursor:not-allowed}.sw-text{color:var(--sw-text-color-primary)}.sw-text:hover,.sw-text:active{opacity:.5}.sw-text:not(:hover),.sw-text:not(:active){background:0 0}.sw-text.sw-primary{color:var(--sw-color-primary)}.sw-text.sw-success{color:var(--sw-color-success)}.sw-text.sw-info{color:var(--sw-color-info)}.sw-text.sw-warning{color:var(--sw-color-warning)}.sw-text.sw-danger{color:var(--sw-color-danger)}.sw-link{color:var(--sw-text-color-secondary);background:0 0;border:none;min-height:1em;padding:0}.sw-link:hover.sw-primary{color:var(--sw-color-primary)}.sw-link:hover.sw-success{color:var(--sw-color-success)}.sw-link:hover.sw-info{color:var(--sw-color-info)}.sw-link:hover.sw-warning{color:var(--sw-color-warning)}.sw-link:hover.sw-danger{color:var(--sw-color-danger)}@keyframes sw-skeleton{0%{left:-50px}to{left:calc(50px + 100%)}}.popup{position:relative}.popup .wrapper{z-index:1;word-break:break-word;margin:10px 0 0;padding:0;font-size:.8rem;line-height:1.2;list-style:none;position:absolute}.popup .wrapper :before{content:"";border:1px solid var(--el-border-color-light);background:var(--el-bg-color-overlay);z-index:1;width:10px;height:10px;position:absolute;top:-6px;right:50%;transform:rotate(-45deg);border-bottom-color:#0000!important;border-left-color:#0000!important}.popup .scrollbar{box-shadow:0 0 0 1px var(--el-border-color);border-radius:var(--el-border-radius-base);background:#fff;margin:0;padding:.5rem 0}.popup .scrollbar li{white-space:nowrap;line-height:22px;font-size:var(--sw-font-size);color:var(--sw-text-color-secondary);cursor:pointer;outline:none;align-items:start;margin:0;padding:5px 16px;list-style:none;display:flex}.popup .scrollbar li:not(.is-disabled):focus{background:var(--el-dropdown-menuItem-hover-fill);color:var(--el-dropdown-menuItem-hover-color)}
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studio-west/component-sw",
-  "version": "0.12.7",
+  "version": "0.12.9",
   "description": "Vue components of Component-SW collection.",
   "type": "module",
   "keywords": [

package/src/Alert.ts

@@ -14,9 +14,14 @@ export interface AlertOptions {
   footer?: string | (() => VNode | VNode[])
 }
 
-let container: HTMLDivElement | null = document.querySelector("div.sw-alert-wrapper")
+let container: HTMLDivElement | null = null
 
 export function Alert(options: AlertOptions = {}): void {
+  if (typeof document === 'undefined') return
+
+  if (!container) {
+    container = document.querySelector("div.sw-alert-wrapper")
+  }
   if (!container) {
     container = document.createElement('div')
     container.className = 'sw-alert-wrapper'

package/src/components/SwDatePicker.vue

@@ -32,7 +32,7 @@ const days = ref([])
 const ind = ref(0)
 const startId = ref(-1)
 const endId = ref(-1)
-const locale = ref(navigator.language || 'ru')
+const locale = ref((typeof navigator !== 'undefined' && navigator.language) || 'ru')
 const iso = (/en|zh|ja|he/.test(locale.value)) ? 0 : 1
 const months = computed(() => {
   return Array.from({ length: 12 }, (_, i) => {

package/src/components/SwSlider.vue

@@ -71,7 +71,7 @@
   }
 
   const tooltipStyle = (index) => {
-    const sliderElement = document.querySelector('.sw-slider')
+    const sliderElement = typeof document !== 'undefined' ? document.querySelector('.sw-slider') : null
     if (sliderElement) {
       return calculateTooltipPosition(sliderElement, props.vertical)
     }