@vanjana/vue-ui 0.1.59 → 0.1.61

package/dist/theme-light.css

@@ -1 +1 @@
-.button{transition:opacity .1s ease-in-out;box-shadow:var(--box-shadow-component);border-radius:var(--border-radius-component);padding:var(--space-s) var(--space-m);gap:var(--space-m);font-size:var(--font-size-button);font-weight:var(--font-weight-button);line-height:var(--line-height-button);letter-spacing:var(--letter-spacing-button);font-family:var(--font-family-button)}.button.primary{background-color:var(--surface-button-primary);color:var(--on-surface-button-primary, inherit);border:none}.button.secondary{background-color:var(--surface-button-secondary);color:var(--on-surface-button-secondary, inherit);border:none}.button.tertiary{background-color:var(--surface-button-tertiary);color:var(--on-surface-button-tertiary, inherit);border:none}.button:not(:disabled):hover{background-color:var(--surface-button-hover);color:var(--on-surface-button-hover, inherit);cursor:pointer}.button:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.button:active{transform:scale(.98);opacity:.8}.button.icon-only{width:40px;height:40px;border-radius:50%}.button-bar,.button-bar .left,.button-bar .right{gap:var(--space-m)}.card{background-color:var(--surface-base);color:var(--on-surface-base, inherit)}.card .header-actions .button:not(.menu-action){padding:0 var(--space-m)}.card .header-actions .button.icon-only:not(.menu-action){width:32px;height:32px;border-radius:50%}.card.scrollable{height:calc(100% - var(--space-m) - var(--space-m) - var(--space-s) - var(--space-s));overflow:hidden}.checkbox{gap:var(--space-s)}.checkbox:hover .checkbox-box{border-color:var(--color-primary)}.checkbox-box{border-color:var(--color-border);border-radius:var(--border-radius-s);background-color:var(--color-background)}.checkbox-icon{color:var(--color-primary-contrast)}.checkbox-input:checked+.checkbox-box{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-label{color:var(--color-text-primary)}.dialog-card{background-color:var(--surface-base);color:var(--on-surface-base, inherit)}.dialog-card .header-actions .button:not(.menu-action){padding:0 var(--space-m)}.dialog-card .header-actions .button.icon-only:not(.menu-action){width:32px;height:32px;border-radius:50%}.button.dot-menu{background-color:var(--surface-dot-menu);color:var(--on-surface-dot-menu, inherit)}.button.dot-menu:hover{background-color:var(--surface-button-hover);color:var(--on-surface-button-hover, inherit);cursor:pointer}.icon-size-s{font-size:1rem}.icon-size-m{font-size:1.5rem}.icon-size-l{font-size:2rem}.menu{box-shadow:var(--box-shadow-container);border-radius:var(--border-radius-container);padding:var(--space-m);background-color:var(--surface-base);color:var(--on-surface-base, inherit)}.menu-action{box-shadow:var(--box-shadow-component);border-radius:0;padding:var(--space-s) var(--space-m);gap:var(--space-m)}.menu-action .menu-action--icon{width:24px;height:24px}.page{gap:var(--space-m)}.page header{gap:var(--space-m);padding-bottom:var(--space-m)}.page header>span{gap:var(--space-s)}.page main footer{padding-top:var(--space-s);background-color:var(--surface-base);color:var(--on-surface-base, inherit)}.search-field{padding:var(--space-s) var(--space-l);border-radius:var(--border-radius-input);outline:var(--border-input);outline-offset:-1px;font-size:var(--font-size-primary);font-weight:var(--font-weight-primary);line-height:var(--line-height-primary);letter-spacing:var(--letter-spacing-primary);font-family:var(--font-family-primary);background-color:var(--surface-input);color:var(--on-surface-input, inherit)}.search-field>*{align-self:center}.search-field:focus-within{outline-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed14}.search-field input{border:none;outline:none;padding:0;margin:0 var(--space-s);background:transparent;font:inherit;color:inherit}.search-field .reset{transition:opacity .2s ease-in}.shell{padding:0}.shell>header{padding:var(--space-s)}.shell>header .shell-title{gap:var(--space-m)}.shell>header .shell-title img{width:40px;height:40px}.shell>header .header-actions{display:flex;gap:var(--space-s)}.shell>header{--application__color: blue;--application-gradient: linear-gradient(90deg, #e0f7ff 0%, #c5dbff 20%, #fff9e6 50%, #ffe4f0 75%, #ffd9f2 100%);border-bottom:solid var(--space-s) var(--application__color);border-image-slice:1;border-image-source:var(--application-gradient)}.shell .shell-content main{padding:0;overflow:auto}.shell .shell-content aside{border-left:1px solid var(--color-border)}.shell .shell-content.with-navigation main{padding:0 var(--space-m)}.shell .shell-navigation{flex-basis:4rem;border-radius:0 10px 20px 0!important;border-bottom:var(--border-footer)!important;background-color:var(--surface-navigation);color:var(--on-surface-navigation, inherit);box-shadow:var(--box-shadow-container);border-radius:var(--border-radius-container);padding:var(--space-m)}.shell .shell-navigation ul{padding:0;margin:0;gap:var(--space-s)}.shell .shell-navigation ul .shell-navigation-item{padding:0;margin:0}.shell .shell-navigation ul .shell-navigation-item .shell-navigation-item-link{padding:var(--space-m) var(--space-s);text-decoration:none;border-left:solid 5px transparent;transition:all .2s ease}.shell .shell-navigation ul .shell-navigation-item .shell-navigation-item-link .shell-navigation-icon{font-size:1.5rem}.shell .shell-navigation ul .shell-navigation-item .shell-navigation-item-link{background-color:var(--surface-navigation-item);color:var(--on-surface-navigation-item, inherit)}.shell .shell-navigation ul .shell-navigation-item .shell-navigation-item-link:hover{background-color:var(--surface-navigation-hover);color:var(--on-surface-navigation-hover, inherit);border-left:solid 5px currentColor}.shell .shell-navigation ul .shell-navigation-item .shell-navigation-item-link.router-link-active{background-color:var(--surface-navigation-hover);color:var(--on-surface-navigation-hover, inherit);border-left:solid 5px currentColor;background-color:#ffffff80}.shell .shell-navigation .shell-navigation-item-label{display:none}.shell .shell-navigation.with-labels .shell-navigation-item-label{display:inline}.shell .shell-navigation .navigation-bottom{margin-top:auto}.tab-view .tab-view-header{gap:var(--space-s);position:relative}.tab-view .tab-view-header .tab-button{padding:var(--space-s) var(--space-l);background:none;border:none;cursor:pointer;transition:color .2s;font-size:var(--font-size-button);font-weight:var(--font-weight-button);line-height:var(--line-height-button);letter-spacing:var(--letter-spacing-button);font-family:var(--font-family-button);background-color:var(--surface-tab);color:var(--on-surface-tab, inherit)}.tab-view .tab-view-header .tab-button:hover{background-color:var(--surface-tab-hover);color:var(--on-surface-tab-hover, inherit)}.tab-view .tab-view-header .tab-button.active{background-color:var(--surface-tab-active);color:var(--on-surface-tab-active, inherit)}.tab-indicator{height:var(--tab-indicator-height);background-color:var(--color-border-highlight);transition:all .3s ease}.tab-line{height:var(--tab-indicator-height);background-color:var(--color-border)}.tab-view-content{flex:1}.tab{animation:fadeIn .2s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.form-field{margin-top:var(--space-s);font-family:inherit}.form-field .form-field__label{left:8px;padding:0 var(--space-xs);font-size:var(--font-size-caption);font-weight:var(--font-weight-caption);line-height:var(--line-height-caption);letter-spacing:var(--letter-spacing-caption);font-family:var(--font-family-caption);background-color:var(--surface-input-label);color:var(--on-surface-input-label, inherit)}.form-field .form-field__label--float{left:12px;font-size:var(--font-size-caption);font-weight:var(--font-weight-caption);line-height:var(--line-height-caption);letter-spacing:var(--letter-spacing-caption);font-family:var(--font-family-caption);background-color:var(--surface-input-label-floating);color:var(--on-surface-input-label-floating, inherit)}.form-field.disabled{opacity:var(--opacity-disabled)}.form-field.labelless{margin-top:0}.form-field.labelless .form-field__label{display:none}.input{padding:var(--space-s) var(--space-l);border-radius:var(--border-radius-input);outline:var(--border-input);outline-offset:-1px;gap:var(--space-s);font-size:var(--font-size-input);font-weight:var(--font-weight-input);line-height:var(--line-height-input);letter-spacing:var(--letter-spacing-input);font-family:var(--font-family-input);background-color:var(--surface-input);color:var(--on-surface-input, inherit)}.input>*{align-self:center;width:100%}.input:focus-within{outline-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed14}.input input{border:none;outline:none;padding:0;margin:0 var(--space-s);background:transparent;font:inherit;color:inherit}.input input:disabled{opacity:.5;cursor:not-allowed}.input .clear-icon{transition:opacity .2s ease-in}.select:not(.form-field--control) .select-trigger{border:var(--border-input);border-radius:var(--border-radius-input);padding:var(--space-s) var(--space-m);text-align:left;transition:all .2s;height:40px;outline:var(--border-input);outline-offset:-1px;background-color:var(--surface-input);color:var(--on-surface-input, inherit);font-size:var(--font-size-input);font-weight:var(--font-weight-input);line-height:var(--line-height-input);letter-spacing:var(--letter-spacing-input);font-family:var(--font-family-input)}.select:not(.form-field--control) .select-trigger:hover:not(:disabled){background-color:var(--surface-input-hover);color:var(--on-surface-input-hover, inherit);border-color:var(--color-primary)}.select:not(.form-field--control) .select-trigger:focus-visible{outline-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed14}.select:not(.form-field--control) .select-placeholder{color:var(--color-text-secondary)}.select:not(.form-field--control) .select-dropdown{background-color:var(--color-background);border-color:var(--color-border);border-radius:var(--border-radius-s)}.select:not(.form-field--control) .select-option:hover,.select:not(.form-field--control) .select-option.highlighted{background-color:var(--color-hover)}.select:not(.form-field--control) .select-option.selected{background-color:var(--color-primary-light);color:var(--color-primary)}.select.form-field--control .select-trigger{font-size:var(--font-size-input);font-weight:var(--font-weight-input);line-height:var(--line-height-input);letter-spacing:var(--letter-spacing-input);font-family:var(--font-family-input);background-color:var(--surface-input);color:var(--on-surface-input, inherit)}.select.form-field--control .select-placeholder{color:var(--color-text-secondary)}.textarea{padding:var(--space-s) var(--space-l);border-radius:var(--border-radius-input);outline:var(--border-input);outline-offset:-1px;font-size:var(--font-size-input);font-weight:var(--font-weight-input);line-height:var(--line-height-input);letter-spacing:var(--letter-spacing-input);font-family:var(--font-family-input);background-color:var(--surface-input);color:var(--on-surface-input, inherit)}.textarea>*{align-self:flex-start}.textarea:focus-within{outline-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed14}.textarea textarea{border:none;outline:none;padding:0;margin:0 var(--space-s);background:transparent;font:inherit;color:inherit}.textarea textarea:disabled{opacity:.5;cursor:not-allowed}.textarea .clear-icon{transition:opacity .2s ease-in}:root{--box-shadow-container: rgba(0, 0, 0, .24) 0px 3px 8px;--padding-container: .5rem;--border-radius-component: 6px;--border-radius-container: 4px;--space-xs: .25rem;--space-s: .5rem;--space-m: .75rem;--space-l: 1em;--space-xl: 1.5rem}:root{--color-border: #dedede;--color-border-highlight: #4f46e5;--border-footer: solid 1px var(--color-border);--border-input: solid 1px var(--color-border);--border-radius-input: 6px;--opacity-disabled: .5;--tab-indicator-height: 3px;--surface-base: #ffffff;--on-surface-base: #333333;--surface-input: #ffffff;--on-surface-input: #333333;--surface-input-label: #ffffff;--on-surface-input-label: #64748b;--surface-input-label-floating: #ffffff;--on-surface-input-label-floating: #4c1d95;--surface-navigation: #ffffff;--on-surface-navigation: #2d3748;--surface-navigation-item: transparent;--on-surface-navigation-item: #64748b;--surface-navigation-hover: transparent;--on-surface-navigation-hover: #4f46e5;--surface-button-primary: #4f46e5;--on-surface-button-primary: #ffffff;--surface-button-secondary: #f97316;--on-surface-button-secondary: #ffffff;--surface-button-tertiary: transparent;--on-surface-button-tertiary: #374151;--surface-dot-menu: #eeeeee;--on-surface-dot-menu: #374151;--surface-button-hover: #403b9c;--on-surface-button-hover: #ffffff;--surface-tab: transparent;--on-surface-tab: #333333;--surface-tab-hover: transparent;--on-surface-tab-hover: #4f46e5;--surface-tab-active: transparent;--on-surface-tab-active: #4f46e5;--font-size-title: 24px;--font-weight-title: 600;--line-height-title: 1.2;--letter-spacing-title: normal;--font-family-title: var(--font-family, inherit)}:root h1{font-size:var(--font-size-title);font-weight:var(--font-weight-title);line-height:var(--line-height-title);letter-spacing:var(--letter-spacing-title);font-family:var(--font-family-title);margin:0}:root{--font-size-title: 24px;--font-weight-title: 600;--line-height-title: 1.2;--letter-spacing-title: normal;--font-family-title: var(--font-family, inherit)}:root h2{font-size:var(--font-size-title);font-weight:var(--font-weight-title);line-height:var(--line-height-title);letter-spacing:var(--letter-spacing-title);font-family:var(--font-family-title);margin:0}:root{--font-size-header: 18px;--font-weight-header: 600;--line-height-header: 32px;--letter-spacing-header: normal;--font-family-header: var(--font-family, inherit)}:root h3{font-size:var(--font-size-header);font-weight:var(--font-weight-header);line-height:var(--line-height-header);letter-spacing:var(--letter-spacing-header);font-family:var(--font-family-header);margin:0}:root{--font-size-primary: 16px;--font-weight-primary: 400;--line-height-primary: 1.2;--letter-spacing-primary: normal;--font-family-primary: var(--font-family, inherit)}:root body{font-size:var(--font-size-primary);font-weight:var(--font-weight-primary);line-height:var(--line-height-primary);letter-spacing:var(--letter-spacing-primary);font-family:var(--font-family-primary);margin:0}:root{--font-size-input: 16px;--font-weight-input: 400;--line-height-input: 24px;--letter-spacing-input: normal;--font-family-input: var(--font-family, inherit)}:root input{font-size:var(--font-size-input);font-weight:var(--font-weight-input);line-height:var(--line-height-input);letter-spacing:var(--letter-spacing-input);font-family:var(--font-family-input);margin:0}:root{--font-size-caption: 14px;--font-weight-caption: 400;--line-height-caption: 24px;--letter-spacing-caption: normal;--font-family-caption: var(--font-family, inherit)}:root label{font-size:var(--font-size-caption);font-weight:var(--font-weight-caption);line-height:var(--line-height-caption);letter-spacing:var(--letter-spacing-caption);font-family:var(--font-family-caption);margin:0}:root{--font-size-button: 16px;--font-weight-button: 600;--line-height-button: 24px;--letter-spacing-button: normal;--font-family-button: var(--font-family, inherit)}:root button{font-size:var(--font-size-button);font-weight:var(--font-weight-button);line-height:var(--line-height-button);letter-spacing:var(--letter-spacing-button);font-family:var(--font-family-button);margin:0}html,body{height:100%;padding:0;margin:0}a{color:#fff}
+@charset "UTF-8";.button{transition:opacity .1s ease-in-out;justify-content:center;align-items:center;box-shadow:var(--box-shadow-component);border-radius:var(--border-radius-component);padding:var(--space-s) var(--space-m);gap:var(--space-m);font-size:var(--font-size-button);font-weight:var(--font-weight-button);line-height:var(--line-height-button);letter-spacing:var(--letter-spacing-button);font-family:var(--font-family-button)}.button.primary{background-color:var(--surface-button-primary);color:var(--on-surface-button-primary, inherit);border:none}.button.secondary{background-color:var(--surface-button-secondary);color:var(--on-surface-button-secondary, inherit);border:none}.button.tertiary{background-color:var(--surface-button-tertiary);color:var(--on-surface-button-tertiary, inherit);border:none}.button:not(:disabled):hover{background-color:var(--surface-button-hover);color:var(--on-surface-button-hover, inherit);cursor:pointer}.button:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.button:active{transform:scale(.98);opacity:.8}.button.icon-only{width:40px;height:40px;border-radius:50%}.button-bar,.button-bar .left,.button-bar .right{gap:var(--space-m)}.card{background-color:var(--surface-base);color:var(--on-surface-base, inherit)}.card .header-actions .button:not(.menu-action){padding:0 var(--space-m)}.card .header-actions .button.icon-only:not(.menu-action){width:32px;height:32px;border-radius:50%}.card.scrollable{height:calc(100% - var(--space-m) - var(--space-m) - var(--space-s) - var(--space-s));overflow:hidden}.checkbox{gap:var(--space-s)}.checkbox:hover .checkbox-box{border-color:var(--color-primary)}.checkbox-box{border-color:var(--color-border);border-radius:var(--border-radius-s);background-color:var(--color-background)}.checkbox-icon{color:var(--color-primary-contrast)}.checkbox-input:checked+.checkbox-box{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-label{color:var(--color-text-primary)}.dialog-card{background-color:var(--surface-base);color:var(--on-surface-base, inherit)}.dialog-card .header-actions .button:not(.menu-action){padding:0 var(--space-m)}.dialog-card .header-actions .button.icon-only:not(.menu-action){width:32px;height:32px;border-radius:50%}.button.dot-menu{background-color:var(--surface-dot-menu);color:var(--on-surface-dot-menu, inherit)}.button.dot-menu:hover{background-color:var(--surface-button-hover);color:var(--on-surface-button-hover, inherit);cursor:pointer}.icon-size-s{font-size:1rem}.icon-size-m{font-size:1.5rem}.icon-size-l{font-size:2rem}.menu{box-shadow:var(--box-shadow-container);border-radius:var(--border-radius-container);padding:var(--space-m);background-color:var(--surface-base);color:var(--on-surface-base, inherit)}.menu-action{box-shadow:var(--box-shadow-component);border-radius:0;padding:var(--space-s) var(--space-m);gap:var(--space-m)}.menu-action .menu-action--icon{width:24px;height:24px}.page{gap:var(--space-m)}.page header{gap:var(--space-m);padding-bottom:var(--space-m)}.page header>span{gap:var(--space-s)}.page main footer{padding-top:var(--space-s);background-color:var(--surface-base);color:var(--on-surface-base, inherit)}.search-field{padding:var(--space-s) var(--space-l);border-radius:var(--border-radius-input);outline:var(--border-input);outline-offset:-1px;font-size:var(--font-size-primary);font-weight:var(--font-weight-primary);line-height:var(--line-height-primary);letter-spacing:var(--letter-spacing-primary);font-family:var(--font-family-primary);background-color:var(--surface-input);color:var(--on-surface-input, inherit)}.search-field>*{align-self:center}.search-field:focus-within{outline-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed14}.search-field input{border:none;outline:none;padding:0;margin:0 var(--space-s);background:transparent;font:inherit;color:inherit}.search-field .reset{transition:opacity .2s ease-in}.shell{padding:0}.shell>header{padding:var(--space-s)}.shell>header .shell-title{gap:var(--space-m)}.shell>header .shell-title img{width:40px;height:40px}.shell>header .header-actions{display:flex;gap:var(--space-s)}.shell>header{--application__color: blue;--application-gradient: linear-gradient(90deg, #e0f7ff 0%, #c5dbff 20%, #fff9e6 50%, #ffe4f0 75%, #ffd9f2 100%);border-bottom:solid var(--space-s) var(--application__color);border-image-slice:1;border-image-source:var(--application-gradient)}.shell .shell-content main{padding:0;overflow:auto}.shell .shell-content aside{border-left:1px solid var(--color-border)}.shell .shell-content.with-navigation main{padding:0 var(--space-m)}.shell .shell-navigation{flex-basis:4rem;border-radius:0 10px 20px 0!important;border-bottom:var(--border-footer)!important;background-color:var(--surface-navigation);color:var(--on-surface-navigation, inherit);box-shadow:var(--box-shadow-container);border-radius:var(--border-radius-container);padding:var(--space-m)}.shell .shell-navigation ul{padding:0;margin:0;gap:var(--space-s)}.shell .shell-navigation ul .shell-navigation-item{padding:0;margin:0}.shell .shell-navigation ul .shell-navigation-item .shell-navigation-item-link{padding:var(--space-m) var(--space-s);text-decoration:none;border-left:solid 5px transparent;transition:all .2s ease}.shell .shell-navigation ul .shell-navigation-item .shell-navigation-item-link .shell-navigation-icon{font-size:1.5rem}.shell .shell-navigation ul .shell-navigation-item .shell-navigation-item-link{background-color:var(--surface-navigation-item);color:var(--on-surface-navigation-item, inherit)}.shell .shell-navigation ul .shell-navigation-item .shell-navigation-item-link:hover{background-color:var(--surface-navigation-hover);color:var(--on-surface-navigation-hover, inherit);border-left:solid 5px currentColor}.shell .shell-navigation ul .shell-navigation-item .shell-navigation-item-link.router-link-active{background-color:var(--surface-navigation-hover);color:var(--on-surface-navigation-hover, inherit);border-left:solid 5px currentColor;background-color:#ffffff80}.shell .shell-navigation .shell-navigation-item-label{display:none}.shell .shell-navigation.with-labels .shell-navigation-item-label{display:inline}.shell .shell-navigation .navigation-bottom{margin-top:auto}.tab-view .tab-view-header{gap:var(--space-s);position:relative}.tab-view .tab-view-header .tab-button{padding:var(--space-s) var(--space-l);background:none;border:none;cursor:pointer;transition:color .2s;font-size:var(--font-size-button);font-weight:var(--font-weight-button);line-height:var(--line-height-button);letter-spacing:var(--letter-spacing-button);font-family:var(--font-family-button);background-color:var(--surface-tab);color:var(--on-surface-tab, inherit)}.tab-view .tab-view-header .tab-button:hover{background-color:var(--surface-tab-hover);color:var(--on-surface-tab-hover, inherit)}.tab-view .tab-view-header .tab-button.active{background-color:var(--surface-tab-active);color:var(--on-surface-tab-active, inherit)}.tab-indicator{height:var(--tab-indicator-height);background-color:var(--color-border-highlight);transition:all .3s ease}.tab-line{height:var(--tab-indicator-height);background-color:var(--color-border)}.tab-view-content{flex:1}.tab{animation:fadeIn .2s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.form-field{margin-top:var(--space-s);font-family:inherit}.form-field .form-field__label{left:8px;padding:0 var(--space-xs);font-size:var(--font-size-caption);font-weight:var(--font-weight-caption);line-height:var(--line-height-caption);letter-spacing:var(--letter-spacing-caption);font-family:var(--font-family-caption);background-color:var(--surface-input-label);color:var(--on-surface-input-label, inherit)}.form-field .form-field__label--float{left:12px;font-size:var(--font-size-caption);font-weight:var(--font-weight-caption);line-height:var(--line-height-caption);letter-spacing:var(--letter-spacing-caption);font-family:var(--font-family-caption);background-color:var(--surface-input-label-floating);color:var(--on-surface-input-label-floating, inherit)}.form-field.disabled{opacity:var(--opacity-disabled)}.form-field.labelless{margin-top:0}.form-field.labelless .form-field__label{display:none}.input{padding:var(--space-s) var(--space-l);border-radius:var(--border-radius-input);outline:var(--border-input);outline-offset:-1px;gap:var(--space-s);font-size:var(--font-size-input);font-weight:var(--font-weight-input);line-height:var(--line-height-input);letter-spacing:var(--letter-spacing-input);font-family:var(--font-family-input);background-color:var(--surface-input);color:var(--on-surface-input, inherit)}.input>*{align-self:center;width:100%}.input:focus-within{outline-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed14}.input input{border:none;outline:none;padding:0;margin:0 var(--space-s);background:transparent;font:inherit;color:inherit}.input input:disabled{opacity:.5;cursor:not-allowed}.input .clear-icon{transition:opacity .2s ease-in}.select:not(.form-field--control) .select-trigger{border:var(--border-input);border-radius:var(--border-radius-input);padding:var(--space-s) var(--space-l);text-align:left;transition:all .2s;height:40px;outline:var(--border-input);outline-offset:-1px;background-color:var(--surface-input);color:var(--on-surface-input, inherit);font-size:var(--font-size-input);font-weight:var(--font-weight-input);line-height:var(--line-height-input);letter-spacing:var(--letter-spacing-input);font-family:var(--font-family-input)}.select:not(.form-field--control) .select-trigger:hover:not(:disabled){background-color:var(--surface-input-hover);color:var(--on-surface-input-hover, inherit);border-color:var(--color-primary)}.select:not(.form-field--control) .select-trigger:focus-visible{outline-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed14}.select:not(.form-field--control) .select-placeholder{color:var(--on-surface-input, inherit)}.select:not(.form-field--control) .select-dropdown{background-color:var(--color-background);border-color:var(--color-border);border-radius:var(--border-radius-s)}.select:not(.form-field--control) .select-option:hover,.select:not(.form-field--control) .select-option.highlighted{background-color:var(--color-hover)}.select:not(.form-field--control) .select-option.selected{background-color:var(--color-primary-light);color:var(--color-primary)}.select.form-field--control .select-trigger{font-size:var(--font-size-input);font-weight:var(--font-weight-input);line-height:var(--line-height-input);letter-spacing:var(--letter-spacing-input);font-family:var(--font-family-input);background-color:var(--surface-input);color:var(--on-surface-input, inherit)}.select.form-field--control .select-placeholder{color:var(--color-text-secondary)}.textarea{padding:var(--space-s) var(--space-l);border-radius:var(--border-radius-input);outline:var(--border-input);outline-offset:-1px;font-size:var(--font-size-input);font-weight:var(--font-weight-input);line-height:var(--line-height-input);letter-spacing:var(--letter-spacing-input);font-family:var(--font-family-input);background-color:var(--surface-input);color:var(--on-surface-input, inherit)}.textarea>*{align-self:flex-start}.textarea:focus-within{outline-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed14}.textarea textarea{border:none;outline:none;padding:0;margin:0 var(--space-s);background:transparent;font:inherit;color:inherit}.textarea textarea:disabled{opacity:.5;cursor:not-allowed}.textarea .clear-icon{transition:opacity .2s ease-in}:root{--box-shadow-container: rgba(0, 0, 0, .24) 0px 3px 8px;--padding-container: .5rem;--border-radius-component: 6px;--border-radius-container: 4px;--space-xs: .25rem;--space-s: .5rem;--space-m: .75rem;--space-l: 1em;--space-xl: 1.5rem}.compact{--space-xs: .15rem;--space-s: .25rem;--space-m: .5rem;--space-l: .75em;--space-xl: 1rem}.compact .select:not(.form-field--control) .select-trigger{height:32px}:root{--color-border: #dedede;--color-border-highlight: #4f46e5;--border-footer: solid 1px var(--color-border);--border-input: solid 1px var(--color-border);--border-radius-input: 6px;--opacity-disabled: .5;--tab-indicator-height: 3px;--surface-base: #ffffff;--on-surface-base: #333333;--surface-input: #ffffff;--on-surface-input: #333333;--surface-input-label: #ffffff;--on-surface-input-label: #64748b;--surface-input-label-floating: #ffffff;--on-surface-input-label-floating: #4c1d95;--surface-navigation: #ffffff;--on-surface-navigation: #2d3748;--surface-navigation-item: transparent;--on-surface-navigation-item: #64748b;--surface-navigation-hover: transparent;--on-surface-navigation-hover: #4f46e5;--surface-button-primary: #4f46e5;--on-surface-button-primary: #ffffff;--surface-button-secondary: #f97316;--on-surface-button-secondary: #ffffff;--surface-button-tertiary: transparent;--on-surface-button-tertiary: #374151;--surface-dot-menu: #eeeeee;--on-surface-dot-menu: #374151;--surface-button-hover: #403b9c;--on-surface-button-hover: #ffffff;--surface-tab: transparent;--on-surface-tab: #333333;--surface-tab-hover: transparent;--on-surface-tab-hover: #4f46e5;--surface-tab-active: transparent;--on-surface-tab-active: #4f46e5;--font-size-title: 24px;--font-weight-title: 600;--line-height-title: 1.2;--letter-spacing-title: normal;--font-family-title: var(--font-family, inherit)}:root h1{font-size:var(--font-size-title);font-weight:var(--font-weight-title);line-height:var(--line-height-title);letter-spacing:var(--letter-spacing-title);font-family:var(--font-family-title);margin:0}:root{--font-size-title: 24px;--font-weight-title: 600;--line-height-title: 1.2;--letter-spacing-title: normal;--font-family-title: var(--font-family, inherit)}:root h2{font-size:var(--font-size-title);font-weight:var(--font-weight-title);line-height:var(--line-height-title);letter-spacing:var(--letter-spacing-title);font-family:var(--font-family-title);margin:0}:root{--font-size-header: 18px;--font-weight-header: 600;--line-height-header: 32px;--letter-spacing-header: normal;--font-family-header: var(--font-family, inherit)}:root h3{font-size:var(--font-size-header);font-weight:var(--font-weight-header);line-height:var(--line-height-header);letter-spacing:var(--letter-spacing-header);font-family:var(--font-family-header);margin:0}:root{--font-size-primary: 16px;--font-weight-primary: 400;--line-height-primary: 1.2;--letter-spacing-primary: normal;--font-family-primary: var(--font-family, inherit)}:root body{font-size:var(--font-size-primary);font-weight:var(--font-weight-primary);line-height:var(--line-height-primary);letter-spacing:var(--letter-spacing-primary);font-family:var(--font-family-primary);margin:0}:root{--font-size-input: 16px;--font-weight-input: 400;--line-height-input: 24px;--letter-spacing-input: normal;--font-family-input: var(--font-family, inherit)}:root input{font-size:var(--font-size-input);font-weight:var(--font-weight-input);line-height:var(--line-height-input);letter-spacing:var(--letter-spacing-input);font-family:var(--font-family-input);margin:0}:root{--font-size-caption: 14px;--font-weight-caption: 400;--line-height-caption: 24px;--letter-spacing-caption: normal;--font-family-caption: var(--font-family, inherit)}:root label{font-size:var(--font-size-caption);font-weight:var(--font-weight-caption);line-height:var(--line-height-caption);letter-spacing:var(--letter-spacing-caption);font-family:var(--font-family-caption);margin:0}:root{--font-size-button: 16px;--font-weight-button: 600;--line-height-button: 24px;--letter-spacing-button: normal;--font-family-button: var(--font-family, inherit)}:root button{font-size:var(--font-size-button);font-weight:var(--font-weight-button);line-height:var(--line-height-button);letter-spacing:var(--letter-spacing-button);font-family:var(--font-family-button);margin:0}html,body{height:100%;padding:0;margin:0}a{color:#fff}

package/dist/types/components/dot-menu.vue.d.ts

@@ -1,9 +1,9 @@
 type Props = {
     icon?: string;
 };
-declare var __VLS_26: {};
+declare var __VLS_27: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_26) => any;
+    default?: (props: typeof __VLS_27) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/types/components/form/index.d.ts

@@ -2,9 +2,10 @@ import FormField from './form-field.vue';
 import FormLayout from './form-layout.vue';
 import FormSection from './form-section.vue';
 import InputSelect from './input-select.vue';
+import InputSlider from './input-slider.vue';
 import InputTextArea from './input-text-area.vue';
 import InputText from './input-text.vue';
 import Input from './input.vue';
 import Select from './select.vue';
 import TextArea from './textarea.vue';
-export { FormField, FormLayout, FormSection, Input, InputSelect, InputText, InputTextArea, Select, TextArea };
+export { InputSlider, FormField, FormLayout, FormSection, Input, InputSelect, InputText, InputTextArea, Select, TextArea };

package/dist/types/components/form/input-select.vue.d.ts

@@ -1,6 +1,6 @@
 import { FormFieldProps } from '@/model/FormFieldProps';
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<(FormFieldProps & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(FormFieldProps & {
         options: {
             label: string;
             value: string | number;
@@ -10,12 +10,26 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
         onBlur?: ((value: FocusEvent) => any) | undefined;
         onFocus?: ((value: FocusEvent) => any) | undefined;
-    }> & import("vue").PublicProps & (typeof globalThis extends {
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
+    slots: {
+        selected?: (props: {
+            option: {
+                label: string;
+                value: string | number;
+            };
+        }) => any;
+    } & {
+        option?: (props: {
+            option: {
+                label: string;
+                value: string | number;
+            };
+        }) => any;
+    };
     emit: {
         (e: "update:modelValue", value: string | number): void;
         (e: "input", value: string | number): void;

package/dist/types/components/form/input-text.vue.d.ts

@@ -1,10 +1,13 @@
 import { FormFieldProps } from '@/model/FormFieldProps';
-declare const __VLS_export: import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+type Props = FormFieldProps & {
+    type: 'text' | 'password' | 'email' | 'number';
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     input: (value: string | number) => any;
     "update:modelValue": (value: string | number) => any;
     blur: (value: FocusEvent) => any;
     focus: (value: FocusEvent) => any;
-}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onInput?: ((value: string | number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
     onBlur?: ((value: FocusEvent) => any) | undefined;

package/dist/types/components/form/input.vue.d.ts

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     icon?: string;
-    type?: string;
+    type?: 'text' | 'password' | 'email' | 'number';
     placeholder?: string;
     disabled?: boolean;
     clearable?: boolean;

package/dist/types/components/form/select.vue.d.ts

@@ -1,5 +1,5 @@
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<({
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         options: T[];
         placeholder?: string;
         disabled?: boolean;
@@ -12,7 +12,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         modelValue?: T | unknown;
     }) & {
         "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
-    }> & import("vue").PublicProps & (typeof globalThis extends {
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{

package/dist/types/config.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Vue-UI Library Configuration
+ * Global defaults for component behavior
+ */
+export type LabelPosition = 'inline' | 'outline';
+export interface VueUIConfig {
+    form: {
+        labelPosition: LabelPosition;
+    };
+}
+/**
+ * Configure vue-ui library defaults
+ */
+export declare function configureVueUI(config: Partial<VueUIConfig>): void;
+/**
+ * Get current configuration (merged with defaults)
+ */
+export declare function getVueUIConfig(): VueUIConfig;
+/**
+ * Reset configuration to defaults
+ */
+export declare function resetVueUIConfig(): void;

package/dist/types/directives/compact.directive.d.ts

@@ -0,0 +1,14 @@
+import type { Directive } from 'vue';
+/**
+ * Direktive zum Setzen der `.compact` Klasse
+ * Macht alle Form-Elemente und Buttons innerhalb des Elements kompakter (32px statt 40px)
+ *
+ * @example
+ * ```vue
+ * <div v-compact>
+ *   <InputText label="Name" />
+ *   <VjButton>Submit</VjButton>
+ * </div>
+ * ```
+ */
+export declare const compactDirective: Directive;

package/dist/types/directives/index.d.ts

@@ -1 +1,3 @@
+export { compactDirective } from './compact.directive';
 export { vFocusFirst } from './focus.directive';
+export { vResize } from './resize.directive';

package/dist/types/directives/resize.directive.d.ts

@@ -0,0 +1,16 @@
+import { Directive } from 'vue';
+type Breakpoints = Record<number, string>;
+type ResizeCallback = (width: number, height: number, element: Element) => void;
+type ResizeDirectiveValue = ResizeCallback | {
+    onResize?: ResizeCallback;
+    breakpoints?: Breakpoints;
+    immediate?: boolean;
+};
+/**
+ * Vue directive: v-resize
+ * Usage:
+ * - v-resize="onResize"
+ * - v-resize="{ onResize, breakpoints: { 512: 'xs', 768: 'md' }, immediate: true }"
+ */
+export declare const vResize: Directive<HTMLElement, ResizeDirectiveValue>;
+export default vResize;

package/dist/types/model/FormFieldProps.d.ts

@@ -1,3 +1,4 @@
+import type { LabelPosition } from '../config';
 export type FormFieldProps = {
     modelValue: string | number | undefined;
     label: string;
@@ -8,4 +9,5 @@ export type FormFieldProps = {
     newLine?: boolean;
     spanRow?: boolean;
     error?: string;
+    labelPosition?: LabelPosition;
 };

package/dist/types/public-api.d.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue';
 export * from './components';
+export * from './config';
 export * from './directives';
 export * from './model';
 export * from './provider';

package/dist/types/services/flow.d.ts

@@ -0,0 +1,16 @@
+/**
+ * const value = await flow.run(method, default).onError((e) => console.error(e));
+ */
+export declare const useFlow: () => {
+    readonly run: <T>(fn: () => Promise<T>, defaultValue?: T) => {
+        inner: () => Promise<T>;
+        defaultValue?: T | undefined;
+        handlers: Array<(err: unknown) => void>;
+        onError(fn: (err: unknown) => void): /*elided*/ any;
+        exec(): Promise<T | undefined>;
+        then<TResult1 = T | undefined, TResult2 = never>(onfulfilled?: ((value: T | undefined) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: unknown) => TResult2 | PromiseLike<TResult2>) | null | undefined): Promise<TResult1 | TResult2>;
+    };
+    readonly running: import("vue").Ref<boolean, boolean>;
+    readonly error: import("vue").Ref<unknown, unknown>;
+    readonly clearError: () => void;
+};

package/dist/types/services/index.d.ts

@@ -1,3 +1,5 @@
 export * from './aside.service';
 export * from './debounce';
+export * from './flow';
 export * from './dialog.service';
+export * from './resizeObserver.service';

package/dist/types/services/resizeObserver.service.d.ts

@@ -0,0 +1,19 @@
+type ResizeCallback = (width: number, height: number, element: Element) => void;
+type Breakpoints = Record<number, string>;
+declare class ResizeObserverService {
+    private static _instance;
+    private observer;
+    private targets;
+    private constructor();
+    static get instance(): ResizeObserverService;
+    private init;
+    private handleWindowResize;
+    private handleEntry;
+    observe(el: Element, callback?: ResizeCallback, options?: {
+        breakpoints?: Breakpoints;
+        immediate?: boolean;
+    }): void;
+    unobserve(el: Element, callback?: ResizeCallback): void;
+}
+declare const _default: ResizeObserverService;
+export default _default;

package/dist/types/stories/components/compact.stories.d.ts

@@ -0,0 +1,47 @@
+import type { StoryObj } from '@storybook/vue3';
+declare const meta: {
+    title: string;
+    component: import("vue").DefineComponent<import("../..").FormFieldProps & {
+        type: "text" | "password" | "email" | "number";
+    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+        input: (value: string | number) => any;
+        "update:modelValue": (value: string | number) => any;
+        blur: (value: FocusEvent) => any;
+        focus: (value: FocusEvent) => any;
+    }, string, import("vue").PublicProps, Readonly<import("../..").FormFieldProps & {
+        type: "text" | "password" | "email" | "number";
+    }> & Readonly<{
+        onInput?: ((value: string | number) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+        onBlur?: ((value: FocusEvent) => any) | undefined;
+        onFocus?: ((value: FocusEvent) => any) | undefined;
+    }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Vergleich zwischen normaler Größe und compact Mode
+ * Normal: ~40px Höhe, Compact: ~32px Höhe
+ */
+export declare const Comparison: Story;
+/**
+ * Vergleich mit Outline Label Position
+ * Normal: ~40px Höhe, Compact: ~32px Höhe
+ */
+export declare const ComparisonOutline: Story;
+/**
+ * Verwendung mit v-compact Direktive
+ * Die Direktive setzt automatisch die .compact Klasse
+ */
+export declare const WithDirective: Story;
+/**
+ * Verwendung mit CSS-Klasse
+ * Direkte Verwendung der .compact Klasse
+ */
+export declare const WithClass: Story;
+/**
+ * Nested Compact - Compact innerhalb von Normal
+ * Zeigt, dass compact nur auf Kindelemente wirkt
+ */
+export declare const Nested: Story;

package/dist/types/stories/components/form-field.stories.d.ts

@@ -1,12 +1,16 @@
 import type { StoryObj } from '@storybook/vue3';
 declare const meta: {
     title: string;
-    component: import("vue").DefineComponent<import("../..").FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    component: import("vue").DefineComponent<import("../..").FormFieldProps & {
+        type: "text" | "password" | "email" | "number";
+    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
         input: (value: string | number) => any;
         "update:modelValue": (value: string | number) => any;
         blur: (value: FocusEvent) => any;
         focus: (value: FocusEvent) => any;
-    }, string, import("vue").PublicProps, Readonly<import("../..").FormFieldProps> & Readonly<{
+    }, string, import("vue").PublicProps, Readonly<import("../..").FormFieldProps & {
+        type: "text" | "password" | "email" | "number";
+    }> & Readonly<{
         onInput?: ((value: string | number) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
         onBlur?: ((value: FocusEvent) => any) | undefined;
@@ -26,3 +30,23 @@ export declare const SelectField: Story;
 export declare const SelectFieldWithValue: Story;
 export declare const SelectFieldDisabled: Story;
 export declare const MixedFields: Story;
+/**
+ * Label Position: Outline
+ * The label is positioned above the input field (static).
+ */
+export declare const LabelPositionOutline: Story;
+/**
+ * Label Position: Inline (default)
+ * The label floats inside the input field.
+ */
+export declare const LabelPositionInline: Story;
+/**
+ * Label Position: Comparison
+ * Side-by-side comparison of inline vs outline
+ */
+export declare const LabelPositionComparison: Story;
+/**
+ * Global Config: Outline
+ * Configure all form fields to use outline labels by default
+ */
+export declare const GlobalConfigOutline: Story;

package/dist/types/stories/components/input.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: import("vue").DefineComponent<{
         icon?: string;
-        type?: string;
+        type?: "text" | "password" | "email" | "number";
         placeholder?: string;
         disabled?: boolean;
         clearable?: boolean;
@@ -17,7 +17,7 @@ declare const meta: {
         focus: (event: FocusEvent) => any;
     }, string, import("vue").PublicProps, Readonly<{
         icon?: string;
-        type?: string;
+        type?: "text" | "password" | "email" | "number";
         placeholder?: string;
         disabled?: boolean;
         clearable?: boolean;