@studio-west/component-sw 0.11.7 → 0.11.8

package/dist/component-sw.css

@@ -1 +1 @@
-@charset "UTF-8";:root{--sw-color-default: #DFDFDF;--sw-color-primary: #3EAF4E;--sw-color-success: #75C6ff;--sw-color-info: #C0C0C0;--sw-color-warning: #FF7A00;--sw-color-danger: #CC2D4A;--sw-color-preholiday: #FFE78070;--sw-color-weekend: #ff808070;--sw-color-select: #007bff70;--sw-color-holiday: #ff0000;--sw-color-nowork: #ff0000;--sw-color-active: #5aaaff;--sw-text-color-primary: #333333;--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: rgba(133, 133, 133, .45);--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;font-family:Montserrat,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;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}: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: rgba(27, 33, 39, .55);--sw-border-color: #4E4E4E;--sw-border-color-input: #5C5E63;--sw-shadow: 0 100px 80px rgba(0, 0, 0, .03), 0 41.7776px 33.4221px rgba(0, 0, 0, .0215656), 0 22.3363px 17.869px rgba(0, 0, 0, .0178832), 0 12.5216px 10.0172px rgba(0, 0, 0, .015), 0 6.6501px 5.32008px rgba(0, 0, 0, .0121168), 0 2.76726px 2.21381px rgba(0, 0, 0, .00843437)}@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: rgba(27, 33, 39, .55);--sw-border-color: #4E4E4E;--sw-border-color-input: #5C5E63;--sw-shadow: 0 100px 80px rgba(0, 0, 0, .03), 0 41.7776px 33.4221px rgba(0, 0, 0, .0215656), 0 22.3363px 17.869px rgba(0, 0, 0, .0178832), 0 12.5216px 10.0172px rgba(0, 0, 0, .015), 0 6.6501px 5.32008px rgba(0, 0, 0, .0121168), 0 2.76726px 2.21381px rgba(0, 0, 0, .00843437)}}.sw-alert-wrapper{position:fixed;background:none;border:none;top:max(env(safe-area-inset-top,0rem),env(titlebar-area-y,0rem))}.sw-alert-wrapper .sw-alert{padding:.625rem 1rem;margin:1rem auto 0;border-radius:var(--sw-border-radius);color:var(--sw-text-color-revers)}.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{display:flex;justify-content:flex-end}.sw-tabs{-webkit-user-select:none;user-select:none}.sw-tabs>header{display:flex;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);font-weight:400;margin-bottom:1.25rem;transition:all .6s ease-out}.sw-tabs>header span{position:relative;top:2px;border-radius:0;padding:5px;cursor:pointer;border:none;background:none;outline:none}.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{display:flex;align-items:center;position:relative;gap:0 1.75rem;padding:0 1.2em;border:1px solid var(--sw-border-color-input);border-radius:var(--sw-border-radius)}.sw-input>label{text-align:left;transition:all .2s .2s linear;position:absolute;font-size:var(--sw-font-size-large);line-height:1;top:1.1rem;background:var(--sw-bg-color-page)}.sw-input>label:hover{top:.8rem}.sw-input>label+input::placeholder{opacity:0}.sw-input>input{line-height:var(--sw-component-size-base);border:none;width:100%;font-size:var(--sw-font-size-large);background:none;outline:none}.sw-input>input::placeholder{color:var(--sw-text-color-secondary);opacity:1;transition:opacity .2s .2s linear}.sw-input>input:focus::placeholder{opacity:1}.sw-input .svg-icon{font-size:20px;color:var(--sw-text-color-third)}.sw-input>svg+label{left:4rem}.sw-input.sw-small label{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{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);padding:0 1.2em;min-height:var(--sw-component-size-base);font-size:var(--sw-font-size);font-weight:500;cursor:pointer;transition:border-color .25s;background-color:var(--sw-color-default);color:var(--sw-text-color-revers)}.sw-button-group{display:inline-flex;--radius: var(--sw-border-radius)}.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{display:flex;justify-content:space-between;font-size:var(--sw-font-size-small);color:var(--sw-text-color-secondary);gap:1rem}.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{position:relative;display:inline-block;outline:none}.sw-dropdown-popup{z-index:3;padding:8px;min-width:200px;margin:0;-webkit-user-select:none;user-select:none;background-color:var(--sw-bg-color-second);border:1px solid var(--sw-border-color);border-radius:4px;box-shadow:0 2px 8px #0000001a}.sw-dropdown-popup.gide>header,.sw-dropdown-popup.gide>footer{display:flex;justify-content:space-between;align-items:center}.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{position:absolute;height:160px;right:-100px}.sw-dropdown-popup.gide img.reflect{left:-100px}.sw-dropdown-item{display:block;outline:none;-webkit-user-select:none;user-select:none}.sw-dropdown-item svg{margin-right:.5rem}.sw-dropdown-item:hover{color:var(--sw-color-primary)}.sw-collapse{transition:all .3s ease-out;overflow:hidden;box-sizing:border-box;margin:0;will-change:max-height}.sw-slider{position:relative;width:100%;height:var(--sw-component-size-small);cursor:pointer;-webkit-user-select:none;user-select:none}.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%;left:50%;top:0;transform:translate(-50%)}.sw-slider .track{position:absolute;background:var(--sw-border-color);border-radius:var(--sw-border-radius-small)}.sw-slider .track .fill{background:var(--sw-color-primary);border-radius:var(--sw-border-radius-small);transition:all .1s ease;position:absolute;height:100%;width:100%}.sw-slider .thumb{position:absolute;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;box-shadow:0 2px 4px #0003;transition:all .2s;text-align:center;transform:translate(-50%,-50%);left:50%;top:50%;color:var(--sw-color-primary);line-height:calc(var(--sw-component-size-small) - var(--sw-border-thickness) * 2)}.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{position:absolute;background:var(--sw-bg-color-page);color:var(--sw-text-color-primary);padding:0;box-shadow:var(--sw-shadow);font-size:var(--sw-font-size-small);white-space:nowrap;z-index:10;left:50%;transform:translate(-50%)}.sw-slider .thumb .tooltip.tooltip-vertical{top:50%;left:auto;transform:translateY(-50%)}.sw-switch{display:inline-flex;align-items:center;box-sizing:border-box;-webkit-user-select:none;user-select:none}.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);left:.5rem;right:auto}.sw-switch>input:checked+label:after{background:#f7f7f7;left:2.125rem}.sw-switch>label{background-color:var(--sw-color-info);border-radius:1rem;cursor:pointer;flex:0 0 4rem;height:1.75rem;margin:.5rem;position:relative;transition:all .3s;width:4rem}.sw-switch>label:before{color:var(--sw-text-color-revers);content:attr(data-offlabel);display:block;font-size:1rem;position:absolute;right:.5rem;transition:all .3s}.sw-switch>label:after{background:var(--sw-text-color-revers);border:1px solid var(--sw-color-info);border-radius:50%;content:"";height:2rem;left:-.125rem;position:absolute;top:-.125rem;transition:all .3s;width:2rem}.sw-switch.sw-small>label{width:3.125rem;flex:0 0 3.125rem}.sw-switch.sw-small>label:before{content:""}.sw-switch.sw-small>label:after{content:"";left:.15rem;top:.125rem;width:1.375rem;height:1.375rem}.sw-switch.sw-small>input:checked+label:before{content:""}.sw-switch.sw-small>input:checked+label:after{left:1.475rem}.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);height:.875rem;flex:0 0 .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:"✔";width:1em;top:-.9rem;left:0;text-rendering:geometricPrecision;white-space:nowrap;font-size:1.6rem}.sw-skeleton{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end}.sw-skeleton-item{min-height:var(--sw-component-size-base);width:100%;background:var(--sw-bg-color-second);border-radius:var(--sw-border-radius);border:1px solid var(--sw-bg-color);box-sizing:border-box;overflow:hidden;position:relative}.sw-skeleton-item>div{height:100%;width:10px;background:var(--sw-border-color-input);display:inline-block;animation:sw-skeleton 3s linear infinite normal;position:absolute;transform:skew(-20deg);box-shadow:0 0 20px 20px var(--sw-border-color-input)}.sw-message{background-color:var(--sw-bg-color-page);border:1px solid var(--sw-border-color);border-radius:var(--sw-border-radius);padding:1.875rem;box-sizing:border-box;top:50%;left:50%;transform:translateY(-50%) translate(-50%);min-width:16rem;max-width:95%;max-height:95%;overflow-y:auto}.sw-message::backdrop{background:var(--sw-bg-color-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.sw-message>header{display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}.sw-message>footer{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}.sw-modal-footer{margin-top:1rem;display:flex;gap:.5rem;justify-content:flex-end}.sw-data-picker{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.sw-data-picker .month_year{display:flex;justify-content:space-around;align-items:center}.sw-data-picker .month_year span:not(.text) button{font-size:1.3em}.sw-data-picker button{color:var(--sw-text-color-primary);height:30px;text-align:center;line-height:30px;cursor:pointer;background:none;border:none;border-radius:.2rem;transition:all .3s ease}.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{width:250px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr;gap:.2rem}.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{width:250px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:.2rem;border-top:1px solid var(--sw-color-info)}.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{display:grid;width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;grid-template-rows:40% 0 1fr;grid-template-columns:1fr 0 1fr;overflow-x:hidden;grid-template-areas:"overlay0 overlay0 overlay0" "overlay1 windows overlay2" "overlay3 overlay3 overlay3"}.sw-gide .hole{height:100%}.sw-gide .overlay0,.sw-gide .overlay1,.sw-gide .overlay2,.sw-gide .overlay3{grid-area:overlay0;background:var(--sw-bg-color-glass);-webkit-backdrop-filter:blur(.8rem);backdrop-filter:blur(.8rem)}.sw-gide .overlay1{grid-area:overlay1}.sw-gide .overlay2{grid-area:overlay2}.sw-gide .overlay3{grid-area:overlay3}.sw-icon{width:1em;height:1em;vertical-align:-.15em;fill:currentColor;overflow:hidden}.sw-external-icon{background-color:currentColor;-webkit-mask-size:cover!important;mask-size:cover!important;display:inline-block}.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-color-default);background:none}.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{background:none;border:none;padding:0;color:var(--sw-text-color-secondary);min-height:1em}.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{position:absolute;z-index:1;list-style:none;font-size:.8rem;line-height:1.2;word-break:break-word;padding:0;margin:10px 0 0}.popup .wrapper :before{content:"";border-bottom-color:transparent!important;border-left-color:transparent!important;border:1px solid var(--el-border-color-light);background:var(--el-bg-color-overlay);right:50%;top:-6px;position:absolute;width:10px;height:10px;z-index:1;transform:rotate(-45deg)}.popup .scrollbar{box-shadow:0 0 0 1px var(--el-border-color);border-radius:var(--el-border-radius-base);background:#fff;padding:.5rem 0;margin:0}.popup .scrollbar li{display:flex;align-items:start;white-space:nowrap;list-style:none;line-height:22px;padding:5px 16px;margin:0;font-size:var(--el-font-size-base);color:var(--el-text-color-regular);cursor:pointer;outline:none}.popup .scrollbar li:not(.is-disabled):focus{background:var(--el-dropdown-menuItem-hover-fill);color:var(--el-dropdown-menuItem-hover-color)}
+@charset "UTF-8";:root{--sw-color-default: #DFDFDF;--sw-color-primary: #3EAF4E;--sw-color-success: #75C6ff;--sw-color-info: #C0C0C0;--sw-color-warning: #FF7A00;--sw-color-danger: #CC2D4A;--sw-color-preholiday: #FFE78070;--sw-color-weekend: #ff808070;--sw-color-select: #007bff70;--sw-color-holiday: #ff0000;--sw-color-nowork: #ff0000;--sw-color-active: #5aaaff;--sw-text-color-primary: #333333;--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: rgba(133, 133, 133, .45);--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;font-family:Montserrat,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;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}: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: rgba(27, 33, 39, .55);--sw-border-color: #4E4E4E;--sw-border-color-input: #5C5E63;--sw-shadow: 0 100px 80px rgba(0, 0, 0, .03), 0 41.7776px 33.4221px rgba(0, 0, 0, .0215656), 0 22.3363px 17.869px rgba(0, 0, 0, .0178832), 0 12.5216px 10.0172px rgba(0, 0, 0, .015), 0 6.6501px 5.32008px rgba(0, 0, 0, .0121168), 0 2.76726px 2.21381px rgba(0, 0, 0, .00843437)}@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: rgba(27, 33, 39, .55);--sw-border-color: #4E4E4E;--sw-border-color-input: #5C5E63;--sw-shadow: 0 100px 80px rgba(0, 0, 0, .03), 0 41.7776px 33.4221px rgba(0, 0, 0, .0215656), 0 22.3363px 17.869px rgba(0, 0, 0, .0178832), 0 12.5216px 10.0172px rgba(0, 0, 0, .015), 0 6.6501px 5.32008px rgba(0, 0, 0, .0121168), 0 2.76726px 2.21381px rgba(0, 0, 0, .00843437)}}.sw-alert-wrapper{position:fixed;background:none;border:none;top:max(env(safe-area-inset-top,0rem),env(titlebar-area-y,0rem))}.sw-alert-wrapper .sw-alert{padding:.625rem 1rem;margin:1rem auto 0;border-radius:var(--sw-border-radius);color:var(--sw-text-color-revers)}.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{display:flex;justify-content:flex-end}.sw-tabs{-webkit-user-select:none;user-select:none}.sw-tabs>header{display:flex;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);font-weight:400;margin-bottom:1.25rem;transition:all .6s ease-out}.sw-tabs>header span{position:relative;top:2px;border-radius:0;padding:5px;cursor:pointer;border:none;background:none;outline:none}.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{display:flex;align-items:center;position:relative;gap:0 1.75rem;padding:0 1.2em;border:1px solid var(--sw-border-color-input);border-radius:var(--sw-border-radius)}.sw-input>label{text-align:left;transition:all .2s .2s linear;position:absolute;font-size:var(--sw-font-size-large);line-height:1;top:1.1rem;background:var(--sw-bg-color-page)}.sw-input>label:hover{top:.8rem}.sw-input>label+input::placeholder{opacity:0}.sw-input>input{line-height:var(--sw-component-size-base);border:none;width:100%;font-size:var(--sw-font-size-large);background:none;outline:none}.sw-input>input::placeholder{color:var(--sw-text-color-secondary);opacity:1;transition:opacity .2s .2s linear}.sw-input>input:focus::placeholder{opacity:1}.sw-input .svg-icon{font-size:20px;color:var(--sw-text-color-third)}.sw-input>svg+label{left:4rem}.sw-input.sw-small label{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{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);padding:0 1.2em;min-height:var(--sw-component-size-base);font-size:var(--sw-font-size);font-weight:500;cursor:pointer;transition:border-color .25s;background-color:var(--sw-color-default);color:var(--sw-text-color-revers)}.sw-button-group{display:inline-flex;--radius: var(--sw-border-radius)}.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{display:flex;justify-content:space-between;font-size:var(--sw-font-size-small);color:var(--sw-text-color-secondary);gap:1rem}.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{position:relative;display:inline-block;outline:none}.sw-dropdown-popup{z-index:3;padding:8px;min-width:200px;margin:0;-webkit-user-select:none;user-select:none;background-color:var(--sw-bg-color-second);border:1px solid var(--sw-border-color);border-radius:4px;box-shadow:0 2px 8px #0000001a}.sw-dropdown-popup.gide>header,.sw-dropdown-popup.gide>footer{display:flex;justify-content:space-between;align-items:center}.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{position:absolute;height:160px;right:-100px}.sw-dropdown-popup.gide img.reflect{left:-100px}.sw-dropdown-item{display:block;outline:none;-webkit-user-select:none;user-select:none}.sw-dropdown-item svg{margin-right:.5rem}.sw-dropdown-item:hover{color:var(--sw-color-primary)}.sw-collapse{transition:all .3s ease-out;overflow:hidden;box-sizing:border-box;margin:0;will-change:max-height}.sw-slider{position:relative;width:100%;height:var(--sw-component-size-small);cursor:pointer;-webkit-user-select:none;user-select:none}.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%;left:50%;top:0;transform:translate(-50%)}.sw-slider .track{position:absolute;background:var(--sw-border-color);border-radius:var(--sw-border-radius-small)}.sw-slider .track .fill{background:var(--sw-color-primary);border-radius:var(--sw-border-radius-small);transition:all .1s ease;position:absolute;height:100%;width:100%}.sw-slider .thumb{position:absolute;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;box-shadow:0 2px 4px #0003;transition:all .2s;text-align:center;transform:translate(-50%,-50%);left:50%;top:50%;color:var(--sw-color-primary);line-height:calc(var(--sw-component-size-small) - var(--sw-border-thickness) * 2)}.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{position:absolute;background:var(--sw-bg-color-page);color:var(--sw-text-color-primary);padding:0;box-shadow:var(--sw-shadow);font-size:var(--sw-font-size-small);white-space:nowrap;z-index:10;left:50%;transform:translate(-50%)}.sw-slider .thumb .tooltip.tooltip-vertical{top:50%;left:auto;transform:translateY(-50%)}.sw-switch{display:inline-flex;align-items:center;box-sizing:border-box;-webkit-user-select:none;user-select:none}.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);left:.5rem;right:auto}.sw-switch>input:checked+label:after{background:#f7f7f7;left:2.125rem}.sw-switch>label{background-color:var(--sw-color-info);border-radius:1rem;cursor:pointer;flex:0 0 4rem;height:1.75rem;margin:.5rem;position:relative;transition:all .3s;width:4rem}.sw-switch>label:before{color:var(--sw-text-color-revers);content:attr(data-offlabel);display:block;font-size:1rem;position:absolute;right:.5rem;transition:all .3s}.sw-switch>label:after{background:var(--sw-text-color-revers);border:1px solid var(--sw-color-info);border-radius:50%;content:"";height:2rem;left:-.125rem;position:absolute;top:-.125rem;transition:all .3s;width:2rem}.sw-switch.sw-small>label{width:3.125rem;flex:0 0 3.125rem}.sw-switch.sw-small>label:before{content:""}.sw-switch.sw-small>label:after{content:"";left:.15rem;top:.125rem;width:1.375rem;height:1.375rem}.sw-switch.sw-small>input:checked+label:before{content:""}.sw-switch.sw-small>input:checked+label:after{left:1.475rem}.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);height:.875rem;flex:0 0 .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:"✔";width:1em;top:-.9rem;left:0;text-rendering:geometricPrecision;white-space:nowrap;font-size:1.6rem}.sw-skeleton{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end}.sw-skeleton-item{min-height:var(--sw-component-size-base);width:100%;background:var(--sw-bg-color-second);border-radius:var(--sw-border-radius);border:1px solid var(--sw-bg-color);box-sizing:border-box;overflow:hidden;position:relative}.sw-skeleton-item>div{height:100%;width:10px;background:var(--sw-border-color-input);display:inline-block;animation:sw-skeleton 3s linear infinite normal;position:absolute;transform:skew(-20deg);box-shadow:0 0 20px 20px var(--sw-border-color-input)}.sw-message{background-color:var(--sw-bg-color-page);border:1px solid var(--sw-border-color);border-radius:var(--sw-border-radius);padding:1.875rem;box-sizing:border-box;top:50%;left:50%;transform:translateY(-50%) translate(-50%);min-width:16rem;max-width:95%;max-height:95%;overflow-y:auto}.sw-message::backdrop{background:var(--sw-bg-color-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.sw-message>header{display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}.sw-message>footer{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}.sw-modal-footer{margin-top:1rem;display:flex;gap:.5rem;justify-content:flex-end}.sw-data-picker{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.sw-data-picker .month_year{display:flex;justify-content:space-around;align-items:center}.sw-data-picker .month_year span:not(.text) button{font-size:1.3em}.sw-data-picker button{color:var(--sw-text-color-primary);height:30px;text-align:center;line-height:30px;cursor:pointer;background:none;border:none;border-radius:.2rem;transition:all .3s ease}.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{width:250px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr;gap:.2rem}.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{width:250px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:.2rem;border-top:1px solid var(--sw-color-info)}.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{display:grid;width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;grid-template-rows:40% 0 1fr;grid-template-columns:1fr 0 1fr;overflow-x:hidden;grid-template-areas:"overlay0 overlay0 overlay0" "overlay1 windows overlay2" "overlay3 overlay3 overlay3"}.sw-gide .hole{height:100%}.sw-gide .overlay0,.sw-gide .overlay1,.sw-gide .overlay2,.sw-gide .overlay3{grid-area:overlay0;background:var(--sw-bg-color-glass);-webkit-backdrop-filter:blur(.8rem);backdrop-filter:blur(.8rem)}.sw-gide .overlay1{grid-area:overlay1}.sw-gide .overlay2{grid-area:overlay2}.sw-gide .overlay3{grid-area:overlay3}.sw-icon{width:1em;height:1em;vertical-align:-.15em;fill:currentColor;overflow:hidden}.sw-external-icon{background-color:currentColor;-webkit-mask-size:cover!important;mask-size:cover!important;display:inline-block}.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:none}.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{background:none;border:none;padding:0;color:var(--sw-text-color-secondary);min-height:1em}.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{position:absolute;z-index:1;list-style:none;font-size:.8rem;line-height:1.2;word-break:break-word;padding:0;margin:10px 0 0}.popup .wrapper :before{content:"";border-bottom-color:transparent!important;border-left-color:transparent!important;border:1px solid var(--el-border-color-light);background:var(--el-bg-color-overlay);right:50%;top:-6px;position:absolute;width:10px;height:10px;z-index:1;transform:rotate(-45deg)}.popup .scrollbar{box-shadow:0 0 0 1px var(--el-border-color);border-radius:var(--el-border-radius-base);background:#fff;padding:.5rem 0;margin:0}.popup .scrollbar li{display:flex;align-items:start;white-space:nowrap;list-style:none;line-height:22px;padding:5px 16px;margin:0;font-size:var(--sw-font-size);color:var(--sw-text-color-secondary);cursor:pointer;outline:none}.popup .scrollbar li:not(.is-disabled):focus{background:var(--el-dropdown-menuItem-hover-fill);color:var(--el-dropdown-menuItem-hover-color)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studio-west/component-sw",
-  "version": "0.11.7",
+  "version": "0.11.8",
   "description": "Vue components of Component-SW collection.",
   "type": "module",
   "keywords": [
@@ -10,12 +10,16 @@
     "component-sw"
   ],
   "files": [
-    "dist"
+    "dist",
+    "types",
+    "src/**/*.d.ts"
   ],
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
+      "types": "./types/index.d.ts",
       "require": "./dist/index.cjs",
       "import": "./dist/index.js"
     },
@@ -25,16 +29,20 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "@vue/tsconfig": "^0.8.1",
     "sass": "^1.86.0",
     "sass-embedded": "^1.83.0",
-    "vite": "7.1.11"
+    "typescript": "^5.9.3",
+    "vite": "7.1.11",
+    "vue-tsc": "^2.2.12"
   },
   "author": "Alexander Efimov",
   "license": "MIT"

package/types/index.d.ts

@@ -0,0 +1,100 @@
+import type { DefineComponent, Plugin } from 'vue'
+
+declare const Library: Plugin
+
+interface AlertOptions {
+    title?: string
+    message?: string
+    type?: 'success' | 'warning' | 'error' | 'info'
+    duration?: number
+    showClose?: boolean
+    onClose?: () => void
+    prefix?: string | (() => any)
+    suffix?: string | (() => any)
+    footer?: string | (() => any)
+}
+
+export declare function Alert(options?: AlertOptions): void
+
+export declare const components: Record<string, DefineComponent>
+
+// Component Props Interfaces
+export interface SwButtonProps {
+    class?: string
+    size?: 'large' | 'small' | ''
+    type?: 'primary' | 'success' | 'info' | 'warning' | 'danger' | ''
+    round?: boolean
+    text?: boolean
+    link?: boolean
+    href?: string
+    disabled?: boolean
+}
+
+export interface SwInputProps {
+    before?: string
+    after?: string
+    placeholder?: string
+    label?: string
+    name: string
+    class?: string
+    size?: string
+    type?: string
+    inputMode?: string
+    required?: boolean
+    maxlength?: number
+    minlength?: number
+    inputSize?: number
+}
+
+export interface SwSwitchProps {
+    id?: string
+    class?: string
+    name?: string
+    on?: string
+    off?: string
+    size?: string
+    checkbox?: boolean
+}
+
+export interface SwSelectProps {
+    class?: string
+    size?: 'large' | 'small'
+    placeholder?: string
+    token?: string
+}
+
+// Export individual component types
+export type SwButton = DefineComponent<SwButtonProps>
+export type SwInput = DefineComponent<SwInputProps>
+export type SwSwitch = DefineComponent<SwSwitchProps>
+export type SwSelect = DefineComponent<SwSelectProps>
+
+// Global component registration
+declare module 'vue' {
+    export interface GlobalComponents {
+        SwButton: typeof import('../src/components/SwButton.vue')['default']
+        SwInput: typeof import('../src/components/SwInput.vue')['default']
+        SwSwitch: typeof import('../src/components/SwSwitch.vue')['default']
+        SwSelect: typeof import('../src/components/SwSelect.vue')['default']
+        SwAlert: typeof import('../src/components/SwAlert.vue')['default']
+        SwButtonGroup: typeof import('../src/components/SwButtonGroup.vue')['default']
+        SwCollapse: typeof import('../src/components/SwCollapse.vue')['default']
+        SwDropdown: typeof import('../src/components/SwDropdown.vue')['default']
+        SwDropdownItem: typeof import('../src/components/SwDropdownItem.vue')['default']
+        SwDropdownNew: typeof import('../src/components/SwDropdownNew.vue')['default']
+        SwFormItem: typeof import('../src/components/SwFormItem.vue')['default']
+        SwGide: typeof import('../src/components/SwGide.vue')['default']
+        SwIcon: typeof import('../src/components/SwIcon.vue')['default']
+        SwMessage: typeof import('../src/components/SwMessage.vue')['default']
+        SwSection: typeof import('../src/components/SwSection.vue')['default']
+        SwSkeleton: typeof import('../src/components/SwSkeleton.vue')['default']
+        SwSkeletonItem: typeof import('../src/components/SwSkeletonItem.vue')['default']
+        SwSlider: typeof import('../src/components/SwSlider.vue')['default']
+        SwTable: typeof import('../src/components/SwTable.vue')['default']
+        SwTableColumn: typeof import('../src/components/SwTableColumn.vue')['default']
+        SwTabs: typeof import('../src/components/SwTabs.vue')['default']
+        SwTabsPane: typeof import('../src/components/SwTabsPane.vue')['default']
+    }
+}
+
+export { Library as default }