@ibiz-template/vue3-components 0.7.41-alpha.97 → 0.7.41-alpha.99

package/es/control/toolbar/toolbar.css

@@ -1 +1 @@
-@charset "UTF-8";.ibiz-control-toolbar{--ibiz-control-toolbar-item-color:var(--ibiz-color-primary-text);--ibiz-control-toolbar-item-bg-color:var(--ibiz-color-primary);--ibiz-control-toolbar-item-margin:0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-item-disabled-button:rgba(var(--ibiz-grey-4), 0.5);--ibiz-control-toolbar-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-icon-max-height:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-separator-color:var(--ibiz-color-fill-2);--ibiz-control-toolbar-menu-height:32px;--ibiz-control-toolbar-text-margin:0 0 0 var(--ibiz-spacing-extra-tight);display:flex;align-items:center}.ibiz-control-toolbar__item{display:flex;align-items:center;margin:var(--ibiz-control-toolbar-item-margin);overflow:hidden}.ibiz-control-toolbar__item .el-button{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-control-toolbar-item-padding)}.ibiz-control-toolbar__item .el-button.is-disabled{background-color:var(--ibiz-control-toolbar-item-disabled-button)}.ibiz-control-toolbar__item .el-button>span{display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-counter{margin-left:var(--ibiz-spacing-super-tight)}.ibiz-control-toolbar__item.is-loading .el-button .ibiz-icon{display:none}.ibiz-control-toolbar__item-separator+.ibiz-control-toolbar__item-separator,.ibiz-control-toolbar__item-separator:first-child{display:none}.ibiz-control-toolbar__item-separator{color:var(--ibiz-control-toolbar-separator-color)}.ibiz-control-toolbar__menu.el-menu{height:var(--ibiz-control-toolbar-menu-height);margin:var(--ibiz-control-toolbar-item-margin);border:none}.ibiz-control-toolbar__menu .el-sub-menu.is-disabled .el-sub-menu__title{opacity:1}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title{display:flex;align-items:center;justify-content:center;padding:0;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-control-toolbar-item-color);background-color:var(--ibiz-control-toolbar-item-bg-color);border-bottom:none;border-radius:var(--ibiz-border-radius-small)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-sub-menu__icon-arrow{display:none}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span{display:flex;align-items:center;justify-content:center;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-counter{margin-left:var(--ibiz-spacing-super-tight)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title>span{display:flex;align-items:center;justify-content:center;line-height:1}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu.is-active .el-sub-menu__title{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper{--ibiz-control-toolbar-item-color:var(--ibiz-color-primary-text);--ibiz-control-toolbar-item-bg-color:var(--ibiz-color-primary);--ibiz-control-toolbar-item-margin:0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-item-disabled-button:rgba(var(--ibiz-grey-4), 0.5);--ibiz-control-toolbar-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-icon-max-height:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-separator-color:var(--ibiz-color-fill-2);--ibiz-control-toolbar-menu-height:32px;--ibiz-control-toolbar-text-margin:0 0 0 var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-control-toolbar-submenu-popper .el-menu .el-sub-menu.is-disabled .el-sub-menu__title{opacity:1}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu .el-sub-menu__title{padding:0 10px;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu .el-sub-menu__title:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu.is-active .el-sub-menu__title{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu-rawitem{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu__groupdetails .el-sub-menu__title .el-menu-item{padding:0}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-counter{margin-left:var(--ibiz-spacing-super-tight)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item.is-active{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .el-button{justify-content:flex-start;width:100%;padding:0;--el-button-active-bg-color:transparent;--el-button-hover-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent}.ibiz-control-toolbar-actions{display:flex;margin:var(--ibiz-control-toolbar-item-margin);white-space:normal;visibility:visible}.ibiz-control-toolbar-actions__extract-mode-itemx .el-button-group{display:flex;white-space:normal}.ibiz-control-toolbar-actions__extract-mode-itemx .el-button-group>.el-button{padding:var(--ibiz-spacing-none)}.ibiz-control-toolbar-actions__extract-mode-itemx .el-button-group>.el-button:nth-child(2):focus-visible{outline:0;outline-offset:0}.ibiz-control-toolbar-actions__item-deuiaction{display:flex;align-items:center;margin:var(--ibiz-control-toolbar-item-margin);overflow:hidden}.ibiz-control-toolbar-actions__item-deuiaction:first-child{margin-left:0}.ibiz-control-toolbar-actions__item-deuiaction:last-child{margin-right:0}.ibiz-control-toolbar-actions .el-button{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-control-toolbar-item-padding);pointer-events:auto}.ibiz-control-toolbar-actions .el-button.is-disabled{background-color:var(--ibiz-control-toolbar-item-disabled-button)}.ibiz-control-toolbar-actions .el-button>span{display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-counter{margin-left:var(--ibiz-spacing-super-tight)}.ibiz-control-toolbar-actions-dropdown-popper{--el-popover-padding:var(--ibiz-spacing-none);min-width:200px;--ibiz-control-toolbar-actions-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-control-toolbar-actions-dropdown-item-height:36px}.ibiz-control-toolbar-actions-dropdown-popper__dropdown-item{height:var(--ibiz-control-toolbar-actions-dropdown-item-height)}.ibiz-control-toolbar-actions-dropdown-popper.is-disabled{display:none}.ibiz-control-toolbar-actions-dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{padding:var(--ibiz-spacing-none)}.ibiz-control-toolbar-actions-dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item.is-disabled{background-color:transparent;opacity:.25}.ibiz-control-toolbar-actions-dropdown-popper .el-button{--el-button-active-bg-color:transparent;--el-button-hover-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent;display:block;width:100%;padding:var(--ibiz-control-toolbar-actions-popover-button-padding);margin:var(--ibiz-spacing-none);color:var(--ibiz-color-primary-text);text-align:left;background-color:transparent;border-radius:0}.ibiz-control-toolbar-actions-dropdown-popper .el-button:hover{color:var(--ibiz-color-primary-text);background-color:transparent}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-counter{margin-left:var(--ibiz-spacing-super-tight)}.ibiz-control-toolbar-actions-popper{--ibiz-control-toolbar-actions-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-control-toolbar-actions-dropdown-item-height:36px}.ibiz-control-toolbar-actions-popper__reference-btn{display:flex;align-items:center}.ibiz-control-toolbar-actions-popper__reference-btn--chevron{flex-shrink:0}.ibiz-control-toolbar-actions-popper__wrapper{padding:var(--ibiz-spacing-extra-tight) 0;background-color:var(--ibiz-color-primary)}.ibiz-control-toolbar-actions-popper__item{display:flex;align-items:center;height:var(--ibiz-control-toolbar-actions-dropdown-item-height);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-control-toolbar-actions-popper__item:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar-actions-popper.el-popover.el-popper{position:fixed!important;width:auto!important;min-width:200px}
+.ibiz-control-toolbar{--ibiz-control-toolbar-font-size:var(--ibiz-font-size-regular);--ibiz-control-toolbar-item-font-size:var(--ibiz-control-toolbar-font-size);--ibiz-control-toolbar-item-color:var(--ibiz-color-primary-text);--ibiz-control-toolbar-item-bg-color:var(--ibiz-color-primary);--ibiz-control-toolbar-item-margin:0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-item-disabled-button:rgba(var(--ibiz-grey-4), 0.5);--ibiz-control-toolbar-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-toolbar-item-icon-font-size:var(--ibiz-control-toolbar-font-size);--ibiz-control-toolbar-item-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-item-icon-max-height:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-item-icon-gap:var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-item-counter-gap:var(--ibiz-spacing-super-tight);--ibiz-control-toolbar-divider-color:var(--ibiz-color-fill-2);--ibiz-control-toolbar-menu-height:32px;--ibiz-control-toolbar-menu-margin:0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-submenu-font-size:var(--ibiz-control-toolbar-font-size);--ibiz-control-toolbar-submenu-color:var(--ibiz-color-primary-text);--ibiz-control-toolbar-submenu-bg-color:var(--ibiz-color-primary);--ibiz-control-toolbar-submenu-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-toolbar-submenu-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-toolbar-submenu-active-color:var(--ibiz-color-primary-text);--ibiz-control-toolbar-submenu-padding:0 10px;--ibiz-control-toolbar-actions-color:var(--ibiz-color-primary-text);--ibiz-control-toolbar-actions-bg-color:var(--ibiz-color-primary);--ibiz-control-toolbar-actions-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-toolbar-actions-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-toolbar-actions-margin:0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-actions-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-control-toolbar-actions-dropdown-item-height:36px;--ibiz-control-toolbar-actions-wrapper-padding:var(--ibiz-spacing-extra-tight) 0;display:flex;align-items:center}.ibiz-control-toolbar__item{display:flex;align-items:center;margin:var(--ibiz-control-toolbar-item-margin);overflow:hidden}.ibiz-control-toolbar__item .el-button{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-control-toolbar-item-padding)}.ibiz-control-toolbar__item .el-button.is-disabled{background-color:var(--ibiz-control-toolbar-item-disabled-button)}.ibiz-control-toolbar__item .el-button>span{display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-item-icon-max-width);height:var(--ibiz-control-toolbar-item-icon-max-height)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-control-toolbar-item-icon-font-size)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin-left:var(--ibiz-control-toolbar-item-icon-gap)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-counter{margin-left:var(--ibiz-control-toolbar-item-counter-gap)}.ibiz-control-toolbar__item.is-loading .el-button .ibiz-icon{display:none}.ibiz-control-toolbar__item-separator+.ibiz-control-toolbar__item-separator,.ibiz-control-toolbar__item-separator:first-child{display:none}.ibiz-control-toolbar__item-separator{color:var(--ibiz-control-toolbar-divider-color)}.ibiz-control-toolbar__menu.el-menu{height:var(--ibiz-control-toolbar-menu-height);margin:var(--ibiz-control-toolbar-menu-margin);border:none}.ibiz-control-toolbar__menu .el-sub-menu.is-disabled .el-sub-menu__title{opacity:1}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title{display:flex;align-items:center;justify-content:center;padding:0;font-size:var(--ibiz-control-toolbar-item-font-size);color:var(--ibiz-control-toolbar-item-color);background-color:var(--ibiz-control-toolbar-item-bg-color);border-bottom:none;border-radius:var(--ibiz-control-toolbar-item-border-radius)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-sub-menu__icon-arrow{display:none}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span{display:flex;align-items:center;justify-content:center;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-item-icon-max-width);height:var(--ibiz-control-toolbar-item-icon-max-height)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-control-toolbar-item-icon-font-size)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin-left:var(--ibiz-control-toolbar-item-icon-gap)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-counter{margin-left:var(--ibiz-control-toolbar-item-counter-gap)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title>span{display:flex;align-items:center;justify-content:center;line-height:1}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title:hover{color:var(--ibiz-control-toolbar-submenu-hover-color);background-color:var(--ibiz-control-toolbar-submenu-hover-bg-color)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu.is-active .el-sub-menu__title{color:var(--ibiz-control-toolbar-submenu-active-color)}.ibiz-control-toolbar-submenu-popper{--ibiz-control-toolbar-font-size:var(--ibiz-font-size-regular);--ibiz-control-toolbar-popup-color:var(--ibiz-color-primary-text);--ibiz-control-toolbar-popup-bg-color:var(--ibiz-color-primary);--ibiz-control-toolbar-submenu-font-size:var(--ibiz-control-toolbar-font-size);--ibiz-control-toolbar-submenu-color:var(--ibiz-color-primary-text);--ibiz-control-toolbar-submenu-bg-color:var(--ibiz-color-primary);--ibiz-control-toolbar-submenu-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-toolbar-submenu-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-toolbar-submenu-active-color:var(--ibiz-color-primary-text);--ibiz-control-toolbar-submenu-padding:0 10px;--ibiz-control-toolbar-menu-item-color:var(--ibiz-color-primary-text);--ibiz-control-toolbar-menu-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-toolbar-menu-item-hover-bg-color:var(--ibiz-color-primary-hover);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-control-toolbar-submenu-popper .el-menu .el-sub-menu.is-disabled .el-sub-menu__title{opacity:1}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu .el-sub-menu__title{padding:var(--ibiz-control-toolbar-submenu-padding);font-size:var(--ibiz-control-toolbar-submenu-font-size);color:var(--ibiz-control-toolbar-submenu-color);background-color:var(--ibiz-control-toolbar-submenu-bg-color)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu .el-sub-menu__title:hover{color:var(--ibiz-control-toolbar-submenu-hover-color);background-color:var(--ibiz-control-toolbar-submenu-hover-bg-color)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu.is-active .el-sub-menu__title{color:var(--ibiz-control-toolbar-submenu-active-color)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu-rawitem{color:var(--ibiz-control-toolbar-submenu-color)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu__groupdetails .el-sub-menu__title .el-menu-item{padding:0}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-item-icon-max-width);height:var(--ibiz-control-toolbar-item-icon-max-height)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon i{font-size:var(--ibiz-control-toolbar-item-icon-font-size)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin-left:var(--ibiz-control-toolbar-item-icon-gap)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-counter{margin-left:var(--ibiz-control-toolbar-item-counter-gap)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item{color:var(--ibiz-control-toolbar-menu-item-color)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item.is-active{color:var(--ibiz-control-toolbar-menu-item-color)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item:hover{color:var(--ibiz-control-toolbar-menu-item-hover-color);background-color:var(--ibiz-control-toolbar-menu-item-hover-bg-color)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .el-button{justify-content:flex-start;width:100%;padding:0;--el-button-active-bg-color:transparent;--el-button-hover-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent}.ibiz-control-toolbar-actions{display:flex;margin:var(--ibiz-control-toolbar-actions-margin);white-space:normal;visibility:visible}.ibiz-control-toolbar-actions__extract-mode-itemx .el-button-group{display:flex;white-space:normal}.ibiz-control-toolbar-actions__extract-mode-itemx .el-button-group>.el-button{padding:var(--ibiz-spacing-none)}.ibiz-control-toolbar-actions__extract-mode-itemx .el-button-group>.el-button:nth-child(2):focus-visible{outline:0;outline-offset:0}.ibiz-control-toolbar-actions__item-deuiaction{display:flex;align-items:center;margin:var(--ibiz-control-toolbar-item-margin);overflow:hidden}.ibiz-control-toolbar-actions__item-deuiaction:first-child{margin-left:0}.ibiz-control-toolbar-actions__item-deuiaction:last-child{margin-right:0}.ibiz-control-toolbar-actions .el-button{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-control-toolbar-item-padding);pointer-events:auto}.ibiz-control-toolbar-actions .el-button.is-disabled{background-color:var(--ibiz-control-toolbar-item-disabled-button)}.ibiz-control-toolbar-actions .el-button>span{display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-item-icon-max-width);height:var(--ibiz-control-toolbar-item-icon-max-height)}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-control-toolbar-item-icon-font-size)}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin-left:var(--ibiz-control-toolbar-item-icon-gap)}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-counter{margin-left:var(--ibiz-control-toolbar-item-counter-gap)}.ibiz-control-toolbar-actions-dropdown-popper{--el-popover-padding:var(--ibiz-spacing-none);min-width:200px;--ibiz-control-toolbar-actions-color:var(--ibiz-color-primary-text);--ibiz-control-toolbar-actions-bg-color:var(--ibiz-color-primary);--ibiz-control-toolbar-actions-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-toolbar-actions-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-toolbar-actions-margin:0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-actions-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-control-toolbar-actions-dropdown-item-height:36px;--ibiz-control-toolbar-actions-wrapper-padding:var(--ibiz-spacing-extra-tight) 0}.ibiz-control-toolbar-actions-dropdown-popper__dropdown-item{height:var(--ibiz-control-toolbar-actions-dropdown-item-height)}.ibiz-control-toolbar-actions-dropdown-popper.is-disabled{display:none}.ibiz-control-toolbar-actions-dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{padding:var(--ibiz-spacing-none)}.ibiz-control-toolbar-actions-dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item.is-disabled{background-color:transparent;opacity:.25}.ibiz-control-toolbar-actions-dropdown-popper .el-button{--el-button-active-bg-color:transparent;--el-button-hover-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent;display:block;width:100%;padding:var(--ibiz-control-toolbar-actions-popover-button-padding);margin:var(--ibiz-spacing-none);color:var(--ibiz-control-toolbar-actions-color);text-align:left;background-color:transparent;border-radius:0}.ibiz-control-toolbar-actions-dropdown-popper .el-button:hover{color:var(--ibiz-control-toolbar-actions-color);background-color:transparent}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-item-icon-max-width);height:var(--ibiz-control-toolbar-item-icon-max-height)}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-control-toolbar-item-icon-font-size)}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin-left:var(--ibiz-control-toolbar-item-icon-gap)}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-counter{margin-left:var(--ibiz-control-toolbar-item-counter-gap)}.ibiz-control-toolbar-actions-popper{--ibiz-control-toolbar-actions-color:var(--ibiz-color-primary-text);--ibiz-control-toolbar-actions-bg-color:var(--ibiz-color-primary);--ibiz-control-toolbar-actions-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-toolbar-actions-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-toolbar-actions-margin:0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-actions-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-control-toolbar-actions-dropdown-item-height:36px;--ibiz-control-toolbar-actions-wrapper-padding:var(--ibiz-spacing-extra-tight) 0}.ibiz-control-toolbar-actions-popper__reference-btn{display:flex;align-items:center}.ibiz-control-toolbar-actions-popper__reference-btn--chevron{flex-shrink:0}.ibiz-control-toolbar-actions-popper__wrapper{padding:var(--ibiz-control-toolbar-actions-wrapper-padding);background-color:var(--ibiz-control-toolbar-actions-bg-color)}.ibiz-control-toolbar-actions-popper__item{display:flex;align-items:center;height:var(--ibiz-control-toolbar-actions-dropdown-item-height);color:var(--ibiz-control-toolbar-actions-color);background-color:var(--ibiz-control-toolbar-actions-bg-color)}.ibiz-control-toolbar-actions-popper__item:hover{color:var(--ibiz-control-toolbar-actions-hover-color);background-color:var(--ibiz-control-toolbar-actions-hover-bg-color)}.ibiz-control-toolbar-actions-popper.el-popover.el-popper{position:fixed!important;width:auto!important;min-width:200px}

package/es/control/toolbar/toolbar.mjs

@@ -1,5 +1,5 @@
-import { isVNode, createVNode, resolveComponent, defineComponent, ref, h, createTextVNode } from 'vue';
-import { useNamespace, useControlController } from '@ibiz-template/vue3-util';
+import { isVNode, defineComponent, createVNode, resolveComponent, ref, h, createTextVNode } from 'vue';
+import { useControlController, useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import { ToolbarController } from '@ibiz-template/runtime';
 import { showTitle } from '@ibiz-template/core';
 import '../../util/index.mjs';
@@ -10,35 +10,6 @@ import { convertBtnType } from '../../util/button-util/button-util.mjs';
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-const btnContent = (item, state) => {
-  var _a, _b;
-  const counterNum = state && item.counterId ? state.counterData[item.counterId] : void 0;
-  const tempItem = item;
-  const caption = ((_a = tempItem.refUIActionGroup) == null ? void 0 : _a.name) || ((_b = tempItem.refUIActionGroup) == null ? void 0 : _b.id) || item.caption;
-  const image = item.sysImage;
-  const result = [];
-  const ns = useNamespace("toolbar-item");
-  if (item.showIcon && image) {
-    result.push(createVNode("span", {
-      "class": ns.b("icon")
-    }, [createVNode(resolveComponent("iBizIcon"), {
-      "icon": image
-    }, null)]));
-  }
-  if (item.showCaption && caption) {
-    result.push(createVNode("span", {
-      "class": ns.b("text")
-    }, [caption]));
-  }
-  if (counterNum) {
-    result.push(createVNode(resolveComponent("iBizBadge"), {
-      "class": ns.b("counter"),
-      "value": counterNum,
-      "counterMode": item.counterMode
-    }, null));
-  }
-  return result;
-};
 const calcCssName = (item) => {
   var _a;
   return (_a = item == null ? void 0 : item.sysCss) == null ? void 0 : _a.cssName;
@@ -98,6 +69,10 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
     const c = useControlController((...args) => new ToolbarController(...args));
     const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const ns2 = useNamespace("control-".concat(c.model.controlType.toLowerCase(), "-actions"));
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(c);
     const btnSize = ref("default");
     const toolbarStyle = (_a = c.model.toolbarStyle) == null ? void 0 : _a.toLowerCase();
     const isRefUIActionGroup = (detail) => {
@@ -122,12 +97,45 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
         emit("click", item);
       }
     };
+    const btnContent = (item, state) => {
+      var _a2, _b;
+      const counterNum = state && item.counterId ? state.counterData[item.counterId] : void 0;
+      const tempItem = item;
+      const caption = ((_a2 = tempItem.refUIActionGroup) == null ? void 0 : _a2.name) || ((_b = tempItem.refUIActionGroup) == null ? void 0 : _b.id) || item.caption;
+      const image = item.sysImage;
+      const result = [];
+      const ns3 = useNamespace("toolbar-item");
+      if (item.showIcon && image) {
+        result.push(createVNode("span", {
+          "class": [ns3.b("icon"), semanticClass("item.icon", item)],
+          "style": semanticStyle("item.icon", item)
+        }, [createVNode(resolveComponent("iBizIcon"), {
+          "icon": image
+        }, null)]));
+      }
+      if (item.showCaption && caption) {
+        result.push(createVNode("span", {
+          "class": [ns3.b("text"), semanticClass("item.content", item)],
+          "style": semanticStyle("item.content", item)
+        }, [caption]));
+      }
+      if (counterNum) {
+        result.push(createVNode(resolveComponent("iBizBadge"), {
+          "class": [ns3.b("counter"), semanticClass("item.counter", item)],
+          "style": semanticStyle("item.counter", item),
+          "value": counterNum,
+          "counterMode": item.counterMode
+        }, null));
+      }
+      return result;
+    };
     const renderExtraButtons = (extraButtons) => {
       return extraButtons.map((button) => {
         let _slot;
         return createVNode("div", {
           "key": button.id,
-          "class": [ns.e("item")]
+          "class": [ns.e("item"), semanticClass("item", button)],
+          "style": semanticStyle("item", button)
         }, [createVNode(resolveComponent("el-button"), {
           "title": showTitle(button.tooltip),
           "size": btnSize.value,
@@ -152,7 +160,8 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
         const component = resolveComponent(provider.component);
         return h(component, {
           key: detail.id,
-          class: [ns.e("item")],
+          class: [ns.e("item"), semanticClass("item", detail)],
+          style: semanticStyle("item", detail),
           item,
           controller: c
         });
@@ -160,7 +169,8 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
       const buttonType = (_b = detail.buttonStyle) == null ? void 0 : _b.toLowerCase();
       if (actionId === "exportexcel" || actionId === "gridview_exportaction") {
         return createVNode(resolveComponent("i-biz-export-excel"), {
-          "class": [ns.e("menu-exportexcel"), ns.em("item", buttonType), calcCssName(detail)],
+          "class": [ns.e("menu-exportexcel"), ns.em("item", buttonType), calcCssName(detail), semanticClass("item", detail)],
+          "style": semanticStyle("item", detail),
           "mode": "menu",
           "item": detail,
           "btnContent": (barItem) => btnContent(barItem, c.state),
@@ -172,7 +182,8 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
         }, null);
       }
       return createVNode(resolveComponent("el-menu-item"), {
-        "class": [ns.is("loading", c.state.buttonsState[detail.id].loading), ns.em("item", buttonType), calcCssName(detail)],
+        "class": [ns.is("loading", c.state.buttonsState[detail.id].loading), ns.em("item", buttonType), calcCssName(detail), semanticClass("menu.item", detail)],
+        "style": semanticStyle("menu.item", detail),
         "index": "menuitem".concat(detail.id),
         "disabled": c.state.buttonsState[detail.id].disabled,
         "title": showTitle(detail.caption)
@@ -211,7 +222,8 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
         const disabled = c.state.buttonsState[detail.id].disabled;
         const content = isRefUIActionGroup(detail) ? renderActionGroupItems(detail, false, true) : renderActionButton(detail);
         return createVNode(resolveComponent("el-dropdown-item"), {
-          "class": [ns2.be("dropdown-popper", "dropdown-item"), ns2.is("disabled", !!disabled), ns.em("item", convertBtnType(detail.buttonStyle))]
+          "class": [ns2.be("dropdown-popper", "dropdown-item"), ns2.is("disabled", !!disabled), ns.em("item", convertBtnType(detail.buttonStyle)), semanticClass("item", detail)],
+          "style": semanticStyle("item", detail)
         }, _isSlot(content) ? content : {
           default: () => [content]
         });
@@ -234,11 +246,12 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
             return ((_a2 = c.state.buttonsState[item2.id]) == null ? void 0 : _a2.disabled) === false;
           }) === -1;
           return createVNode(resolveComponent("el-sub-menu"), {
-            "class": [ns.b("submenu"), ns.be("submenu", "groupdetails"), ns.em("item", groupButtonStyle.toLowerCase()), calcCssName(item)],
+            "class": [ns.b("submenu"), ns.be("submenu", "groupdetails"), ns.em("item", groupButtonStyle.toLowerCase()), calcCssName(item), semanticClass("submenu", item)],
+            "style": semanticStyle("submenu", item),
             "index": item.id,
             "disabled": pdisabled,
             "title": showTitle(item.tooltip),
-            "popper-class": [ns.b("submenu-popper"), ns.em("submenu-popper", "groupdetails"), ns.bm("submenu-popper", toolbarStyle), ns.em("submenu-popper", groupButtonStyle.toLowerCase()), ns.bm("submenu-popper", calcCssName(item)), calcCssName(item)]
+            "popper-class": [ns.b("submenu-popper"), ns.em("submenu-popper", "groupdetails"), ns.bm("submenu-popper", toolbarStyle), ns.em("submenu-popper", groupButtonStyle.toLowerCase()), ns.bm("submenu-popper", calcCssName(item)), calcCssName(item), semanticClass("popup", item)]
           }, {
             default: () => {
               return uiactionGroupDetails.map((detail) => {
@@ -252,7 +265,7 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
         }
         if (isSubPopover) {
           return createVNode(resolveComponent("el-popover"), {
-            "popper-class": [ns2.b("popper"), ns2.b("dropdown-popper"), ns2.bm("dropdown-popper", toolbarStyle), ns2.em("dropdown-popper", groupButtonStyle.toLowerCase()), ns2.bm("dropdown-popper", calcCssName(item))],
+            "popper-class": [ns2.b("popper"), ns2.b("dropdown-popper"), ns2.bm("dropdown-popper", toolbarStyle), ns2.em("dropdown-popper", groupButtonStyle.toLowerCase()), ns2.bm("dropdown-popper", calcCssName(item)), semanticClass("popup", item)],
             "placement": "right-start",
             "teleported": false,
             "popper-options": {
@@ -289,13 +302,14 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
             }, [uiactionGroupDetails.map((detail) => {
               const content = isRefUIActionGroup(detail) ? renderActionGroupItems(detail, false, true) : renderActionButton(detail);
               return createVNode("div", {
-                "class": ns2.be("popper", "item")
+                "class": [ns2.be("popper", "item"), semanticClass("item", detail)],
+                "style": semanticStyle("item", detail)
               }, [content]);
             })])
           });
         }
         return createVNode(resolveComponent("el-dropdown"), {
-          "popper-class": [ns2.b("dropdown-popper"), ns2.bm("dropdown-popper", toolbarStyle), ns2.em("dropdown-popper", groupButtonStyle.toLowerCase()), ns2.bm("dropdown-popper", calcCssName(item))]
+          "popper-class": [ns2.b("dropdown-popper"), ns2.bm("dropdown-popper", toolbarStyle), ns2.em("dropdown-popper", groupButtonStyle.toLowerCase()), ns2.bm("dropdown-popper", calcCssName(item)), semanticClass("popup", item)]
         }, {
           default: () => renderActionButton(item),
           dropdown: () => {
@@ -338,11 +352,12 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
           if (isEmbed) {
             groupButtonStyle = firstItem.buttonStyle || "";
             return createVNode(resolveComponent("el-sub-menu"), {
-              "class": [ns.b("submenu"), ns.be("submenu", "groupdetails"), ns.em("item", groupButtonStyle.toLowerCase()), calcCssName(firstItem)],
+              "class": [ns.b("submenu"), ns.be("submenu", "groupdetails"), ns.em("item", groupButtonStyle.toLowerCase()), calcCssName(firstItem), semanticClass("submenu", firstItem)],
+              "style": semanticStyle("submenu", firstItem),
               "index": firstItem.id,
               "disabled": c.state.buttonsState[firstItem.id].disabled,
               "title": showTitle(firstItem.tooltip),
-              "popper-class": [ns.b("submenu-popper"), ns.be("submenu-popper", "groupdetails"), ns.bm("submenu-popper", toolbarStyle), ns.em("submenu-popper", groupButtonStyle.toLowerCase()), ns.bm("submenu-popper", calcCssName(firstItem)), calcCssName(firstItem)]
+              "popper-class": [ns.b("submenu-popper"), ns.be("submenu-popper", "groupdetails"), ns.bm("submenu-popper", toolbarStyle), ns.em("submenu-popper", groupButtonStyle.toLowerCase()), ns.bm("submenu-popper", calcCssName(firstItem)), calcCssName(firstItem), semanticClass("popup", firstItem)]
             }, {
               default: () => {
                 return remainders.map((detail) => {
@@ -357,7 +372,7 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
           return createVNode(resolveComponent("el-dropdown"), {
             "split-button": enableDropdown,
             "type": convertBtnType(groupButtonStyle),
-            "popper-class": [ns2.b("dropdown-popper"), ns2.bm("dropdown-popper", toolbarStyle), ns2.em("dropdown-popper", groupButtonStyle.toLowerCase()), ns2.bm("dropdown-popper", calcCssName(item))]
+            "popper-class": [ns2.b("dropdown-popper"), ns2.bm("dropdown-popper", toolbarStyle), ns2.em("dropdown-popper", groupButtonStyle.toLowerCase()), ns2.bm("dropdown-popper", calcCssName(item)), semanticClass("popup", item)]
           }, {
             default: () => {
               if (isRefUIActionGroup(firstItem))
@@ -391,7 +406,8 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
         return uiactionGroupDetails.map((detail) => {
           const itemContent = isRefUIActionGroup(detail) ? renderActionGroupItems(detail, isEmbed) : renderActionButton(detail);
           return createVNode("div", {
-            "class": [ns2.e("item-deuiaction"), ns.em("item", convertBtnType(detail.buttonStyle))]
+            "class": [ns2.e("item-deuiaction"), ns.em("item", convertBtnType(detail.buttonStyle)), semanticClass("item", detail)],
+            "style": semanticStyle("item", detail)
           }, [itemContent]);
         });
       }
@@ -438,11 +454,12 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
       }
       const groupButtonStyle = item.buttonStyle || "";
       return createVNode(resolveComponent("el-sub-menu"), {
-        "class": [ns.b("submenu"), ns.em("item", groupButtonStyle.toLowerCase()), calcCssName(item)],
+        "class": [ns.b("submenu"), ns.em("item", groupButtonStyle.toLowerCase()), calcCssName(item), semanticClass("submenu", item)],
+        "style": semanticStyle("submenu", item),
         "index": item.id,
         "disabled": pdisabled,
         "title": showTitle(item.tooltip),
-        "popper-class": [ns.b("submenu-popper"), ns.bm("submenu-popper", toolbarStyle), ns.em("submenu-popper", groupButtonStyle.toLowerCase()), ns.bm("submenu-popper", calcCssName(item)), calcCssName(item)]
+        "popper-class": [ns.b("submenu-popper"), ns.bm("submenu-popper", toolbarStyle), ns.em("submenu-popper", groupButtonStyle.toLowerCase()), ns.bm("submenu-popper", calcCssName(item)), calcCssName(item), semanticClass("popup", item)]
       }, {
         default: () => {
           return detoolbarItems.map((item2) => {
@@ -457,7 +474,8 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
               const component = resolveComponent(provider.component);
               return h(component, {
                 key: item2.id,
-                class: [ns.e("item")],
+                class: [ns.e("item"), semanticClass("item", item2)],
+                style: semanticStyle("item", item2),
                 item,
                 controller: c
               });
@@ -468,7 +486,9 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
             if (item2.itemType === "RAWITEM") {
               return createVNode(resolveComponent("el-menu-item"), {
                 "index": "menuitem".concat(item2.id),
-                "title": showTitle(item2.tooltip)
+                "title": showTitle(item2.tooltip),
+                "class": semanticClass("rawitem", item2),
+                "style": semanticStyle("rawitem", item2)
               }, {
                 default: () => [createVNode(resolveComponent("iBizRawItem"), {
                   "rawItem": item2,
@@ -483,7 +503,8 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
               const buttonType = (_b = item2.buttonStyle) == null ? void 0 : _b.toLowerCase();
               if (actionId === "exportexcel" || actionId === "gridview_exportaction") {
                 return createVNode(resolveComponent("i-biz-export-excel"), {
-                  "class": [ns.e("menu-exportexcel"), ns.em("item", buttonType), calcCssName(item2)],
+                  "class": [ns.e("menu-exportexcel"), ns.em("item", buttonType), calcCssName(item2), semanticClass("item", item2)],
+                  "style": semanticStyle("item", item2),
                   "mode": "menu",
                   "item": item2,
                   "btnContent": (barItem) => btnContent(barItem, c.state),
@@ -495,7 +516,8 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
                 }, null);
               }
               return createVNode(resolveComponent("el-menu-item"), {
-                "class": [ns.is("loading", c.state.buttonsState[item2.id].loading), ns.em("item", buttonType), calcCssName(item2)],
+                "class": [ns.is("loading", c.state.buttonsState[item2.id].loading), ns.em("item", buttonType), calcCssName(item2), semanticClass("menu.item", item2)],
+                "style": semanticStyle("menu.item", item2),
                 "index": "menuitem".concat(item2.id),
                 "disabled": c.state.buttonsState[item2.id].disabled,
                 "title": showTitle(item2.tooltip),
@@ -538,7 +560,8 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
         const component = resolveComponent(provider.component);
         return h(component, {
           key: itemId,
-          class: [ns.e("item")],
+          class: [ns.e("item"), semanticClass("item", item)],
+          style: semanticStyle("item", item),
           item,
           controller: c
         });
@@ -549,13 +572,15 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
         }
         return createVNode("div", {
           "key": itemId,
-          "class": [ns.e("item"), ns.e("item-separator")]
+          "class": [ns.e("item"), ns.e("item-separator"), semanticClass("divider", item)],
+          "style": semanticStyle("divider", item)
         }, [createTextVNode("|")]);
       }
       if (item.itemType === "RAWITEM") {
         return createVNode("div", {
           "key": itemId,
-          "class": [ns.e("item"), ns.e("item-rawitem")]
+          "class": [ns.e("item"), ns.e("item-rawitem"), semanticClass("rawitem", item)],
+          "style": semanticStyle("rawitem", item)
         }, [createVNode(resolveComponent("iBizRawItem"), {
           "rawItem": item,
           "content": item.rawItem.content,
@@ -568,7 +593,8 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
         const buttonStyle = item.buttonStyle;
         if (actionId === "exportexcel" || actionId === "gridview_exportaction") {
           return createVNode(resolveComponent("i-biz-export-excel"), {
-            "class": [ns.e("item"), ns.e("item-deuiaction"), ns.em("item", buttonStyle == null ? void 0 : buttonStyle.toLowerCase()), calcCssName(item)],
+            "class": [ns.e("item"), ns.e("item-deuiaction"), ns.em("item", buttonStyle == null ? void 0 : buttonStyle.toLowerCase()), calcCssName(item), semanticClass("item", item)],
+            "style": semanticStyle("item", item),
             "item": item,
             "btnContent": (barItem) => btnContent(barItem, c.state),
             "size": btnSize.value,
@@ -581,7 +607,8 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
         if (actionId === "shortcut") {
           return createVNode(resolveComponent("i-biz-short-cut-button"), {
             "key": itemId,
-            "class": [ns.e("item"), ns.e("item-deuiaction"), ns.em("item", buttonStyle == null ? void 0 : buttonStyle.toLowerCase()), calcCssName(item)],
+            "class": [ns.e("item"), ns.e("item-deuiaction"), ns.em("item", buttonStyle == null ? void 0 : buttonStyle.toLowerCase()), calcCssName(item), semanticClass("item", item)],
+            "style": semanticStyle("item", item),
             "item": item,
             "controller": c,
             "size": btnSize.value,
@@ -590,7 +617,8 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
         }
         return createVNode("div", {
           "key": itemId,
-          "class": [ns.e("item"), ns.e("item-deuiaction"), ns.em("item", buttonStyle == null ? void 0 : buttonStyle.toLowerCase()), calcCssName(item), ns.is("loading", c.state.buttonsState[itemId].loading)]
+          "class": [ns.e("item"), ns.e("item-deuiaction"), ns.em("item", buttonStyle == null ? void 0 : buttonStyle.toLowerCase()), calcCssName(item), ns.is("loading", c.state.buttonsState[itemId].loading), semanticClass("item", item)],
+          "style": semanticStyle("item", item)
         }, [createVNode(resolveComponent("el-button"), {
           "size": btnSize.value,
           "title": showTitle(item.tooltip),
@@ -609,12 +637,14 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
         if (groupItem.groupExtractMode && groupItem.uiactionGroup) {
           const extractName = "extract-mode-".concat(((_b = groupItem.groupExtractMode) == null ? void 0 : _b.toLowerCase()) || "item");
           return createVNode("div", {
-            "class": [ns2.b(), ns2.e(extractName), ns2.em("item", groupButtonStyle.toLowerCase()), calcCssName(item)]
+            "class": [ns2.b(), ns2.e(extractName), ns2.em("item", groupButtonStyle.toLowerCase()), calcCssName(item), semanticClass("actions", item)],
+            "style": semanticStyle("actions", item)
           }, [renderActionGroup(item)]);
         }
         return createVNode(resolveComponent("el-menu"), {
           "mode": "horizontal",
-          "class": [ns.e("menu"), ns.em("menu", groupButtonStyle.toLowerCase()), calcCssName(item)],
+          "class": [ns.e("menu"), ns.em("menu", groupButtonStyle.toLowerCase()), calcCssName(item), semanticClass("menu", item)],
+          "style": semanticStyle("menu", item),
           "ellipsis": false,
           "menu-trigger": "hover"
         }, _isSlot(_slot9 = renderSubmenu(item)) ? _slot9 : {
@@ -630,7 +660,9 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
       toolbarStyle,
       handleClick,
       renderExtraButtons,
-      renderToolbarItem
+      renderToolbarItem,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -657,7 +689,8 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
     }
     return createVNode(resolveComponent("iBizControlBase"), {
       "controller": this.c,
-      "class": [this.ns.m(state.viewMode.toLowerCase()), this.ns.m(this.toolbarStyle)]
+      "class": [this.ns.m(state.viewMode.toLowerCase()), this.ns.m(this.toolbarStyle), this.semanticClass("root")],
+      "style": this.semanticStyle("root")
     }, _isSlot(content) ? content : {
       default: () => [content]
     });

package/es/control/tree/tree.css

@@ -1 +1 @@
-.ibiz-control-treeview{--ibiz-control-treeview-text-color:var(--ibiz-color-text-0);--ibiz-control-treeview-bg-color:transparent;--ibiz-control-treeview-disabled-color:var(--ibiz-color-disabled-text);--ibiz-control-treeview-padding:var(--ibiz-spacing-tight) 0;--ibiz-control-treeview-row-hover-color:var(--ibiz-color-text-0);--ibiz-control-treeview-row-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-treeview-row-select-color:var(--ibiz-color-text-0);--ibiz-control-treeview-row-select-bg-color:var(--ibiz-color-primary-light-default);--ibiz-control-treeview-font-size:var(--ibiz-font-size-regular);--ibiz-control-treeview-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-treeview-node-icon-height:var(--ibiz-width-icon-medium);--ibiz-control-treeview-node-icon-width:var(--ibiz-width-icon-medium);--ibiz-control-treeview-node-icon-margin-right:var(--ibiz-spacing-tight);--ibiz-control-treeview-node-height:26px;--ibiz-control-treeview-context-menu-width:30px;--ibiz-control-treeview-context-menu-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-control-treeview-context-menu-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-control-treeview-context-menu-item-height:40px;--ibiz-control-treeview-context-menu-border-radius:var(--ibiz-spacing-none);--ibiz-control-treeview-context-menu-bg-color:var(--ibiz-color-bg-3);--ibiz-control-treeview-context-menu-hover-color:var(--ibiz-color-fill-0);--ibiz-control-treeview-context-menu-text-color:var(--ibiz-color-text-2);--ibiz-control-treeview-quick-search-padding:0 var(--ibiz-spacing-base) var(--ibiz-spacing-tight);--ibiz-control-treeview-tree-padding:0 var(--ibiz-spacing-base);position:relative;height:100%;padding:var(--ibiz-control-treeview-padding)}.ibiz-control-treeview__nav-icon{position:absolute;top:14px;right:10px;color:var(--ibiz-color-primary);cursor:pointer}.ibiz-control-treeview .el-tree-node.is-load-more{pointer-events:none}.ibiz-control-treeview .el-tree-node.is-load-more .el-checkbox,.ibiz-control-treeview .el-tree-node.is-load-more .el-icon{display:none}.ibiz-control-treeview .el-tree-node.is-load-more .ibiz-control-treeview-node{justify-content:center;color:var(--ibiz-color-primary);pointer-events:all}.ibiz-control-treeview-node{display:flex;flex-grow:1;flex-shrink:1;align-items:center;min-width:1px;height:100%}.ibiz-control-treeview-node .ibiz-context-menu{display:flex;flex-shrink:0}.ibiz-control-treeview-node .ibiz-context-menu__item--level-200{display:none}.ibiz-control-treeview-node:hover .ibiz-context-menu__item--level-200{display:block}.ibiz-control-treeview-node__icon{display:flex;flex-shrink:0;align-items:center;width:var(--ibiz-control-treeview-node-icon-width);height:var(--ibiz-control-treeview-node-icon-height);margin-right:var(--ibiz-control-treeview-node-icon-margin-right)}.ibiz-control-treeview-node__icon>svg{width:100%;height:100%}.ibiz-control-treeview-node__label{flex-grow:1;flex-shrink:1;min-width:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-treeview-node:hover .ibiz-control-treeview-context-menu-trigger{display:inline-block}.ibiz-control-treeview-node--disabled{color:var(--ibiz-control-treeview-disabled-color);cursor:not-allowed}.ibiz-control-treeview-node__buttons--hover .ibiz-context-menu__item{display:none}.ibiz-control-treeview-node:hover .ibiz-control-treeview-node__buttons--hover .ibiz-context-menu__item{display:block}.ibiz-control-treeview-new-node{display:flex;align-items:center;justify-content:center;padding-right:var(--ibiz-spacing-base);padding-left:calc(1em + 12px);font-size:var(--ibiz-control-treeview-font-size)}.ibiz-control-treeview-context-menu-trigger{display:none;flex-shrink:0;width:var(--ibiz-control-treeview-context-menu-width);text-align:center;cursor:pointer}.ibiz-control-treeview-context-menu-trigger__caption-icon{vertical-align:middle}.ibiz-control-treeview-context-menu{--ibiz-control-treeview-context-menu-width:30px;--ibiz-control-treeview-context-menu-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-control-treeview-context-menu-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-control-treeview-context-menu-item-height:40px;--ibiz-control-treeview-context-menu-border-radius:var(--ibiz-spacing-none);--ibiz-control-treeview-context-menu-bg-color:var(--ibiz-color-bg-3);--ibiz-control-treeview-context-menu-hover-color:var(--ibiz-color-fill-0);--ibiz-control-treeview-context-menu-text-color:var(--ibiz-color-text-2)}.ibiz-control-treeview-context-menu.mx-context-menu{padding:var(--ibiz-control-treeview-context-menu-padding);background-color:var(--ibiz-control-treeview-context-menu-bg-color);border-radius:var(--ibiz-control-treeview-context-menu-border-radius);--mx-menu-text:var(--ibiz-control-treeview-context-menu-text-color)}.ibiz-control-treeview-context-menu.mx-context-menu .mx-context-menu-item{height:var(--ibiz-control-treeview-context-menu-item-height);padding:var(--ibiz-control-treeview-context-menu-item-padding);cursor:pointer}.ibiz-control-treeview-context-menu.mx-context-menu .mx-context-menu-item:hover{color:var(--ibiz-control-treeview-context-menu-text-color);background-color:var(--ibiz-control-treeview-context-menu-hover-color)}.ibiz-control-treeview-quick-search{padding:var(--ibiz-control-treeview-quick-search-padding)}.ibiz-control-treeview-tree.el-tree{--el-tree-text-color:var(--ibiz-control-treeview-text-color);--el-tree-node-content-height:var(--ibiz-control-treeview-node-height)}.ibiz-control-treeview-tree.el-tree .el-tree-node__content:hover{color:var(--ibiz-control-treeview-row-hover-color);background-color:var(--ibiz-control-treeview-row-hover-bg-color)}.ibiz-control-treeview-tree.el-tree{padding:var(--ibiz-control-treeview-tree-padding);background-color:var(--ibiz-control-treeview-bg-color)}.ibiz-control-treeview-tree.el-tree .el-tree-node__content:has(.ibiz-control-treeview-new-node) .ibiz-control-treeview-new-node{width:100%;padding-right:0;padding-left:0}.ibiz-control-treeview-tree.el-tree.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{color:var(--ibiz-control-treeview-row-select-color);background-color:var(--ibiz-control-treeview-row-select-bg-color)}.ibiz-control-treeview-editing-node{--el-input-height:var(--ibiz-control-treeview-node-height)}
+.ibiz-control-treeview{--ibiz-control-treeview-font-size:var(--ibiz-font-size-regular);--ibiz-control-treeview-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-treeview-text-color:var(--ibiz-color-text-0);--ibiz-control-treeview-padding:var(--ibiz-spacing-tight) 0;--ibiz-control-treeview-bg-color:transparent;--ibiz-control-treeview-disabled-color:var(--ibiz-color-disabled-text);--ibiz-control-treeview-row-hover-color:var(--ibiz-color-text-0);--ibiz-control-treeview-row-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-treeview-row-select-color:var(--ibiz-color-text-0);--ibiz-control-treeview-row-select-bg-color:var(--ibiz-color-primary-light-default);--ibiz-control-treeview-item-font-size:var(--ibiz-control-treeview-font-size);--ibiz-control-treeview-item-hover-color:var(--ibiz-color-text-0);--ibiz-control-treeview-item-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-treeview-item-select-color:var(--ibiz-color-text-0);--ibiz-control-treeview-item-select-bg-color:var(--ibiz-color-primary-light-default);--ibiz-control-treeview-item-font-weight:var(--ibiz-control-treeview-font-weight);--ibiz-control-treeview-item-icon-height:var(--ibiz-width-icon-medium);--ibiz-control-treeview-item-icon-width:var(--ibiz-width-icon-medium);--ibiz-control-treeview-item-icon-margin-right:var(--ibiz-spacing-tight);--ibiz-control-treeview-item-height:26px;--ibiz-control-treeview-item-disabled-color:var(--ibiz-color-disabled-text);--ibiz-control-treeview-item-new-node-padding:0 var(--ibiz-spacing-base) 0 calc(1em + var(--ibiz-spacing-base-tight));--ibiz-control-treeview-item-menu-width:30px;--ibiz-control-treeview-item-menu-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-control-treeview-item-menu-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-control-treeview-item-menu-item-height:40px;--ibiz-control-treeview-item-menu-border-radius:var(--ibiz-spacing-none);--ibiz-control-treeview-item-menu-bg-color:var(--ibiz-color-bg-3);--ibiz-control-treeview-item-menu-hover-color:var(--ibiz-color-fill-0);--ibiz-control-treeview-item-menu-text-color:var(--ibiz-color-text-2);--ibiz-control-treeview-search-padding:0 var(--ibiz-spacing-base) var(--ibiz-spacing-tight);--ibiz-control-treeview-content-padding:0 var(--ibiz-spacing-base);--ibiz-control-treeview-content-bg-color:var(--ibiz-color-bg-3);--ibiz-control-treeview-more-color:var(--ibiz-color-primary);position:relative;height:100%;padding:var(--ibiz-control-treeview-padding)}.ibiz-control-treeview__nav-icon{position:absolute;top:14px;right:10px;color:var(--ibiz-color-primary);cursor:pointer}.ibiz-control-treeview .el-tree-node.is-load-more{pointer-events:none}.ibiz-control-treeview .el-tree-node.is-load-more .el-checkbox,.ibiz-control-treeview .el-tree-node.is-load-more .el-icon{display:none}.ibiz-control-treeview .el-tree-node.is-load-more .ibiz-control-treeview-node{justify-content:center;color:var(--ibiz-control-treeview-more-color);pointer-events:all}.ibiz-control-treeview-node{display:flex;flex-grow:1;flex-shrink:1;align-items:center;min-width:1px;height:100%}.ibiz-control-treeview-node .ibiz-context-menu{display:flex;flex-shrink:0}.ibiz-control-treeview-node .ibiz-context-menu__item--level-200{display:none}.ibiz-control-treeview-node:hover .ibiz-context-menu__item--level-200{display:block}.ibiz-control-treeview-node__icon{display:flex;flex-shrink:0;align-items:center;width:var(--ibiz-control-treeview-item-icon-width);height:var(--ibiz-control-treeview-item-icon-height);margin-right:var(--ibiz-control-treeview-item-icon-margin-right)}.ibiz-control-treeview-node__icon>svg{width:100%;height:100%}.ibiz-control-treeview-node__label{flex-grow:1;flex-shrink:1;min-width:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-treeview-node:hover .ibiz-control-treeview-context-menu-trigger{display:inline-block}.ibiz-control-treeview-node--disabled{color:var(--ibiz-control-treeview-item-disabled-color);cursor:not-allowed}.ibiz-control-treeview-node__buttons--hover .ibiz-context-menu__item{display:none}.ibiz-control-treeview-node:hover .ibiz-control-treeview-node__buttons--hover .ibiz-context-menu__item{display:block}.ibiz-control-treeview-new-node{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-control-treeview-item-new-node-padding);font-size:var(--ibiz-control-treeview-item-font-size)}.ibiz-control-treeview-context-menu-trigger{display:none;flex-shrink:0;width:var(--ibiz-control-treeview-item-menu-width);text-align:center;cursor:pointer}.ibiz-control-treeview-context-menu-trigger__caption-icon{vertical-align:middle}.ibiz-control-treeview-context-menu{--ibiz-control-treeview-item-menu-width:30px;--ibiz-control-treeview-item-menu-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-control-treeview-item-menu-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-control-treeview-item-menu-item-height:40px;--ibiz-control-treeview-item-menu-border-radius:var(--ibiz-spacing-none);--ibiz-control-treeview-item-menu-bg-color:var(--ibiz-color-bg-3);--ibiz-control-treeview-item-menu-hover-color:var(--ibiz-color-fill-0);--ibiz-control-treeview-item-menu-text-color:var(--ibiz-color-text-2)}.ibiz-control-treeview-context-menu.mx-context-menu{padding:var(--ibiz-control-treeview-item-menu-padding);background-color:var(--ibiz-control-treeview-item-menu-bg-color);border-radius:var(--ibiz-control-treeview-item-menu-border-radius);--mx-menu-text:var(--ibiz-control-treeview-item-menu-text-color)}.ibiz-control-treeview-context-menu.mx-context-menu .mx-context-menu-item{height:var(--ibiz-control-treeview-item-menu-item-height);padding:var(--ibiz-control-treeview-item-menu-item-padding);cursor:pointer}.ibiz-control-treeview-context-menu.mx-context-menu .mx-context-menu-item:hover{color:var(--ibiz-control-treeview-item-menu-text-color);background-color:var(--ibiz-control-treeview-item-menu-hover-color)}.ibiz-control-treeview-quick-search{padding:var(--ibiz-control-treeview-search-padding)}.ibiz-control-treeview-tree.el-tree{--el-tree-text-color:var(--ibiz-control-treeview-text-color);--el-tree-node-content-height:var(--ibiz-control-treeview-item-height)}.ibiz-control-treeview-tree.el-tree .el-tree-node__content:hover{color:var(--ibiz-control-treeview-item-hover-color);background-color:var(--ibiz-control-treeview-item-hover-bg-color)}.ibiz-control-treeview-tree.el-tree{padding:var(--ibiz-control-treeview-content-padding);background-color:var(--ibiz-control-treeview-content-bg-color)}.ibiz-control-treeview-tree.el-tree .el-tree-node__content:has(.ibiz-control-treeview-new-node) .ibiz-control-treeview-new-node{width:100%;padding-right:0;padding-left:0}.ibiz-control-treeview-tree.el-tree.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{color:var(--ibiz-control-treeview-item-select-color);background-color:var(--ibiz-control-treeview-item-select-bg-color)}.ibiz-control-treeview-editing-node{--el-input-height:var(--ibiz-control-treeview-item-height)}

package/es/control/tree/tree.mjs

@@ -1,5 +1,5 @@
 import { isVNode, defineComponent, createVNode, resolveComponent, mergeProps, withDirectives, resolveDirective, ref, watch, nextTick, computed, onMounted, onUnmounted } from 'vue';
-import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import { useControlController, useSemanticNode, useNamespace } from '@ibiz-template/vue3-util';
 import { createUUID } from 'qx-util';
 import { cloneDeep, debounce } from 'lodash-es';
 import { TreeController, AppDataEntity, PanelItemEventName } from '@ibiz-template/runtime';
@@ -106,6 +106,10 @@ const TreeControl = /* @__PURE__ */ defineComponent({
   setup(props) {
     const c = useControlController((...args) => new TreeController(...args));
     useAppTreeBase(c, props);
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(c);
     const cascadeSelect = ref(false);
     const menuShowMode = ref("default");
     c.evt.on("onCreated", () => {
@@ -583,7 +587,8 @@ const TreeControl = /* @__PURE__ */ defineComponent({
         return null;
       }
       return createVNode(resolveComponent("iBizContextMenuControl"), {
-        "class": ns.bem("node", "buttons", menuShowMode.value),
+        "class": [ns.bem("node", "buttons", menuShowMode.value), semanticClass("item.menu", nodeData)],
+        "style": semanticStyle("item.menu", nodeData),
         "modelData": nodeModel.decontextMenu,
         "groupLevelKeys": [50, 100],
         "nodeModel": nodeModel,
@@ -668,7 +673,8 @@ const TreeControl = /* @__PURE__ */ defineComponent({
         const value = c.state.counterData[counterId];
         return createVNode(resolveComponent("iBizBadge"), {
           "value": value,
-          "class": ns.e("counter"),
+          "class": [ns.e("counter"), semanticClass("item.counter"), nodeData],
+          "style": semanticStyle("item.counter", nodeData),
           "counterMode": nodeModel.counterMode
         }, null);
       }
@@ -764,7 +770,9 @@ const TreeControl = /* @__PURE__ */ defineComponent({
       onNodeTextEditBlur,
       renderNewNode,
       handleEditKeyDown,
-      handleLoadMore
+      handleLoadMore,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -775,7 +783,8 @@ const TreeControl = /* @__PURE__ */ defineComponent({
         }
         return createVNode(resolveComponent("el-input"), {
           "model-value": this.c.state.query,
-          "class": this.ns.b("quick-search"),
+          "class": [this.ns.b("quick-search"), this.semanticClass("search")],
+          "style": this.semanticStyle("search"),
           "placeholder": this.c.state.placeHolder,
           "onInput": this.onInput
         }, {
@@ -793,7 +802,8 @@ const TreeControl = /* @__PURE__ */ defineComponent({
       if (this.c.state.isLoaded && this.treeRefreshKey) {
         return [createVNode(resolveComponent("el-tree"), mergeProps({
           "ref": "treeRef",
-          "class": this.ns.b("tree"),
+          "class": [this.ns.b("tree"), this.semanticClass("content")],
+          "style": this.semanticStyle("content"),
           "key": this.treeRefreshKey,
           "node-key": "_id",
           "highlight-current": true,
@@ -809,7 +819,7 @@ const TreeControl = /* @__PURE__ */ defineComponent({
             disabled: "_disableSelect",
             class: (data) => {
               if (data == null ? void 0 : data._load_more) {
-                return this.ns.is("load-more", true);
+                return [this.ns.is("load-more", true), this.semanticClass("more")];
               }
               return "";
             }
@@ -875,17 +885,21 @@ const TreeControl = /* @__PURE__ */ defineComponent({
               }, null);
             } else {
               content = [nodeData._icon ? createVNode(resolveComponent("iBizIcon"), {
-                "class": this.ns.be("node", "icon"),
+                "class": [this.ns.be("node", "icon"), this.semanticClass("item.icon", data)],
+                "style": this.semanticStyle("item.icon", data),
                 "icon": nodeData._icon
               }, null) : null, nodeData._textHtml ? createVNode("span", {
-                "class": this.ns.be("node", "label"),
+                "class": [this.ns.be("node", "label"), this.semanticClass("item.content", data)],
+                "style": this.semanticStyle("item.content", data),
                 "innerHTML": nodeData._textHtml
               }, null) : createVNode("span", {
-                "class": this.ns.be("node", "label")
+                "class": [this.ns.be("node", "label"), this.semanticClass("item.content", data)],
+                "style": this.semanticStyle("item.content", data)
               }, [nodeData._text])];
             }
             return createVNode("div", {
-              "class": [this.ns.b("node"), nodeData._disableSelect ? this.ns.bm("node", "disabled") : "", (_b = nodeModel.sysCss) == null ? void 0 : _b.cssName],
+              "class": [this.ns.b("node"), this.semanticClass("item", data), nodeData._disableSelect ? this.ns.bm("node", "disabled") : "", (_b = nodeModel.sysCss) == null ? void 0 : _b.cssName],
+              "style": this.semanticStyle("item", data),
               "title": nodeData._text,
               "onDblclick": (evt) => this.onNodeDbClick(nodeData, evt),
               "onClick": (evt) => this.onNodeClick(nodeData, data, evt),
@@ -911,6 +925,8 @@ const TreeControl = /* @__PURE__ */ defineComponent({
       default: () => [withDirectives(createVNode(resolveComponent("iBizControlBase"), {
         "ref": "treeviewRef",
         "controller": this.c,
+        "class": this.semanticClass("root"),
+        "style": this.semanticClass("root"),
         "element-loading-text": this.c.state.loadingText
       }, _isSlot(slots) ? slots : {
         default: () => [slots]