@prefabs.tech/vue3-layout 0.31.0 → 0.32.0

package/dist/vue3-layout.css

@@ -1 +1 @@
-.layout.basic{--layout-basic-padding-h: 1em;display:grid;grid-template-areas:"header" "main" "footer";gap:var(--layout-basic-gap);grid-template-rows:auto 1fr auto;height:100dvh;min-height:100dvh;overflow:hidden}.layout.basic[aria-expanded=true]{grid-template-areas:"header" "main" "footer"}.layout.basic>:is(footer,header,main){margin:0 auto;max-width:var(--layout-basic-max-width);width:100%}.layout.basic>footer{grid-area:footer}.layout.basic>header{grid-area:header}.layout.basic[aria-expanded=true]>header>nav nav.locale-switcher{--locale-switcher-width: 100%}.layout.basic[aria-expanded=true]>header .locale-switcher .truncated>svg{transform:rotate(-180deg)}.layout.basic[aria-expanded=true]>header .locale-switcher.expanded .truncated>svg{transform:rotate(0)}.layout.basic nav.user-menu-dropdown>ul.dropdown,.layout.basic nav.locale-switcher>ul.dropdown{width:100%}.layout.basic nav.locale-switcher>.locale-trigger{--locale-switcher-padding-h: var(--layout-nav-item-padding-h, 1rem);--locale-switcher-padding-v: var(--layout-nav-item-padding-v, .625rem)}.layout.basic>main{max-width:100%;min-width:100%;grid-area:main;overflow-y:auto}@media screen and (min-width:576px){.layout.basic nav.user-menu-dropdown>ul.dropdown,.layout.basic nav.locale-switcher>ul.dropdown{width:max-content}.layout.basic[aria-expanded=true]>header>nav nav.locale-switcher{--locale-switcher-width: 10rem}.layout.basic nav.locale-switcher>.locale-trigger{--locale-switcher-padding-h: 1rem;--locale-switcher-padding-v: var(--layout-nav-item-padding-v, .625rem)}}.layout>footer{--_layout-footer-bg-color: #ffffff;--_layout-footer-border: var( --layout-footer-border, 1px solid var(--border-color, #e5e7eb) );--_layout-footer-font-size: var(--layout-footer-font-size, 1rem);--_layout-footer-gap: .5rem;--_layout-footer-padding-h: var(--layout-header-padding-h, 1rem);--_layout-footer-padding-v: var(--layout-header-padding-v, 1rem);align-items:center;background-color:var(--_layout-footer-bg-color);border-top:var(--_layout-footer-border);display:flex;flex-direction:column;font-size:var(--_layout-footer-font-size);gap:var(--_layout-footer-gap);justify-content:center;padding:var(--_layout-footer-padding-v) var(--_layout-footer-padding-h)}@media screen and (min-width:576px){.layout>footer{flex-direction:row;justify-content:space-between}}.layout>header{--_layout-header-bg: var(--layout-header-bg, transparent);--_layout-header-sidebar-bg: var(--layout-header-sidebar-bg, #fff);--_layout-header-border: var( --layout-header-border, 1px solid var(--border-color, #e5e7eb) );--_layout-header-color: var(--dz-layout-header-color, #2c2c2c);--_layout-header-gap: var(--layout-header-gap, 1rem);--_layout-header-logo-max-width: var(--layout-header-logo-max-width, 8rem);--_layout-header-padding-h: var(--layout-header-padding-h, 1rem);--_layout-header-padding-v: var(--layout-header-padding-v, 1rem);align-items:center;background:var(--_layout-header-bg);border-bottom:var(--_layout-header-border);color:var(--_layout-header-color);display:flex;flex-direction:row-reverse;gap:.25rem;justify-content:space-between;padding:var(--_layout-header-padding-v) var(--_layout-header-padding-h);position:relative;width:100%;z-index:100}.layout>header>nav{--_padding-v: 1rem;background:var(--_layout-header-sidebar-bg);justify-content:flex-end;max-height:100dvh;left:0;padding-block:var(--_padding-v);position:absolute;top:calc(100% + 1px);transform:translate(-100%);transition:transform var(--transition-duration, .15s) ease-in-out;width:100%;z-index:999}.layout>header>nav[data-expanded=true]{transform:translate(0)}.layout>header:not(:has(.logo)):not(:has(.main-menu)){display:flex;justify-content:end}.layout header:not(:has(.logo)):not(:has(.main-menu)) .toggle{--_justify-self: left;--_padding-left: 1rem;padding-left:var(--_padding-left);width:100%}.layout>header .logo{grid-area:logo}.layout>header>.toggle{--_background-color: var(--dz-secondary-color);align-content:center;border-radius:50%;cursor:pointer;grid-area:toggle;height:2.875rem;justify-items:center;margin-left:-.75rem;width:2.875rem}.layout>header>.toggle:hover{background-color:color-mix(in srgb,var(--_background-color) 10%,white)}.layout>header .main-menu{flex:1}@media screen and (min-width:576px){.layout>header{flex-direction:row;gap:var(--_layout-header-gap);position:relative}.layout>header>nav{align-items:center;display:flex;background:var(--_layout-header-bg);gap:var(--_layout-header-gap);flex-direction:row;height:auto!important;position:unset;max-width:none;padding:0;transform:none;transition:none}.layout>header>nav[data-expanded=false]{display:flex;justify-content:flex-end}}:root{--layout-logo-max-width: 8rem;--layout-sidebar-bg: white;--layout-sidebar-border: 1px solid var(--border-color, #e5e7eb);--layout-sidebar-collapsed-width: 0;--layout-sidebar-color: var(--color, #374151);--layout-sidebar-logo-max-width: var(--layout-logo-max-width);--layout-sidebar-padding-h: 1.5rem;--layout-sidebar-padding-v: .75rem;--layout-sidebar-separator-color: var(--border-color, #e5e7eb);--layout-sidebar-width: 16rem;--layout-nav-item-padding-h: 2rem;--layout-nav-item-padding-v: .5rem;--layout-nav-menu-padding-h: 0;--layout-nav-menu-padding-v: 1rem;--layout-nav-menu-separator-color: var(--border-color, #e5e7eb);--layout-main-bg: #ffffff;--layout-main-padding-h: 1.5rem;--layout-main-padding-v: 1.5rem;--layout-header-bg: transparent;--layout-header-border: 1px solid var(--border-color, #e5e7eb);--layout-header-color: var(--color, #374151);--layout-header-gap: 1rem;--layout-header-logo-max-width: var(--layout-logo-max-width);--layout-header-max-width: 1920px;--layout-header-padding-h: var(--layout-main-padding-h, 1rem);--layout-header-padding-v: .5rem}@media screen and (min-width:576px){:root{--layout-main-padding-h: 2rem;--layout-main-padding-v: 1.25rem;--layout-sidebar-padding-v: .5rem}}.layout .logo{--_layout-logo-max-width: var(--layout-logo-max-width, 150px)}.layout .logo img{max-width:var(--_layout-logo-max-width)}.layout .logo>a{color:var(--color, #545454);text-decoration:none}.layout .logo .logo-default{align-items:center;display:flex;font-weight:500;gap:.5rem;text-transform:capitalize}.layout .logo .logo-default>span:first-child{align-items:center;background:#2d2d2d40;border-radius:50%;display:flex;flex-shrink:0;height:48px;justify-content:center;width:48px}.layout .logo .logo-default>span:not(:first-child){max-width:150px;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}@media screen and (min-width:576px){.layout .logo .logo-default>span:not(:first-child){max-width:200px}}.nav-menu-item>.link.active{background:var(--_active-bg);color:var(--_active-color);text-decoration:none}.nav-menu-item>.link{--_active-bg: var(--nav-item-active-bg, #eff6ff);--_active-color: var(--nav-item-active-color, #2c2c2c);--_border-radius: var(--nav-item-border-radius, 0);--_color: var(--nav-item-color, #2c2c2c);--_disabled-color: var(--nav-item-disabled-color, #6d7b92);--_hover-color: var(--nav-item-hover-color, #2c2c2c);--_hover-bg: var(--nav-item-hover-bg, #f0f2f7ad);--_padding-h: var(--nav-item-padding-h, 1rem);--_padding-v: var(--nav-item-padding-v, .5rem);--_transition-duration: var(--transition-duration, .15s);align-items:baseline;border-radius:var(--_border-radius);color:var(--_color);cursor:pointer;display:flex;gap:.75rem;height:var(--_height);justify-content:space-between;padding:var(--_padding-v) var(--_padding-h);text-decoration:none;transition:background var(--_transition-duration) linear,font-weight var(--_transition-duration) linear,color var(--_transition-duration) linear;width:100%}.nav-menu-item>.link:not(.active):hover{background:var(--_hover-bg);color:var(--_hover-color);text-decoration:none}.nav-menu-item>.link:has(.icon-only){font-size:.9rem}.nav-menu-item>.link>span.item-name{flex:1}.nav-menu-item .toggle-menu>svg{transition:transform .3s ease}.nav-menu-item .toggle-menu>svg.up-chevron{transform:rotate(180deg)}.sub-menu-item{--_gap: var(--nav-menu-gap, .25rem);display:flex;flex-direction:column;gap:var(--_gap);margin-left:1rem;max-height:100dvh;overflow:hidden;transition:max-height .5s ease-in-out}.sub-menu-item.fade-enter-active,.sub-menu-item.fade-leave-active{transition:max-height .5s ease-in-out}.sub-menu-item.fade-enter-from,.sub-menu-item.fade-leave-to{max-height:0}.sub-menu-item .link{--_submenu-padding-left: var(--nav-menu-padding-left, 2rem);--_submenu-padding-right: var(--nav-menu-padding-right, 2rem);padding-left:var(--_submenu-padding-left);padding-right:var(--_submenu-padding-right)}.toggle-menu{--_width: 1rem;width:var(--_width)}.nav-menu>.menu{--_border-color: var(--border-color, #dee2e6);--_padding-h: var(--padding-h, 0);--_padding-v: var(--padding-v, 1rem);border-bottom:1px solid var(--_border-color);display:flex;flex-direction:column;gap:.375rem;padding-block:var(--_padding-v);padding-left:var(--_padding-h)}.no-sidebar{--_bg-color: var(--sidebar-bg-color, #007aff);--_border-radius: 2rem;--_width: 2rem;background-color:var(--_bg-color);border-radius:0 var(--_border-radius) var(--_border-radius) 0;cursor:pointer;margin-top:1rem;padding-block:.25rem;width:var(--_width)}.no-sidebar>img{--_width: var(--sidebar-toggle-icon-width, 1.5rem);width:var(--_width)}.sidebar{--_bg-color: var(--sidebar-bg-color, #fff);--_border: var( --layout-sidebar-border, 1px solid var(--border-color, #e5e7eb) );--_color: var(--sidebar-color, #2c2c2c);--_height: var(--sidebar-height, auto);--_position: var(--sidebar-position, fixed);--_transition-duration: var(--transition-duration, .15s);--_width: var(--sidebar-width, 16rem);background-color:var(--_bg-color);border-right:var(--_border);color:var(--_color);display:flex;flex-direction:column;height:var(--_height);overflow-y:auto;overflow-x:hidden;transition:width var(--_transition-duration) ease-in;width:var(--_width)}.sidebar .sidebar-menu-wrapper{display:flex;flex:1;flex-direction:column}.sidebar .sidebar-menu-wrapper>ul:has(.nav-menu-item){flex:1}.sidebar>.footer{--_bg-color: var(--sidebar-bg-color, #fff);--_border-color: var(--sidebar-border-color, #dee2e6);--_font-size: var(--sidebar-font-size, 1rem);--_gap: var(--footer-gap, 1rem);--_justify-content: var(--sidebar-justify-content, center);--_padding-h: var(--layout-footer-padding-h, 1rem);--_padding-v: var(--layout-footer-padding-v, 1rem);align-items:center;background-color:var(--_bg-color);border-top:1px solid var(--_border-color);box-shadow:0 0 0 100vmax var(--_bg-color);clip-path:inset(0 -100vmax);display:flex;flex-direction:column;font-size:var(--_font-size);gap:var(--_gap);justify-content:var(--_justify-content);padding:var(--_padding-v) var(--_padding-h);text-align:center;width:100%;z-index:2}.sidebar>.header{--_border-color: var(--sidebar-border-color, #e5e7eb);--_padding-h: var(--layout-header-padding-h, 1rem);--_padding-v: var(--layout-header-padding-v, 1rem);align-items:center;border-bottom:1px solid var(--_border-color);display:flex;justify-content:space-between;padding:var(--_padding-v) var(--_padding-h);z-index:100}.sidebar>.header>.logo{width:100%}.sidebar>.header>.toggle{cursor:pointer;width:var(--sidebar-toggle-icon-width, 2rem)}.sidebar-toggle-enter-active{transition:opacity .3s ease-in-out}.sidebar-toggle-enter-from{opacity:0}.sidebar:has(.extend){--_width: var(--sidebar-collapsed-width, 6rem);overflow:visible;width:var(--_width)}.sidebar:has(.extend)>.header>.logo{width:max-content}@media screen and (min-width:576px){.sidebar .sidebar-menu-wrapper{flex:1}}.sticky-collapsible .content{background-color:#fff;border-top:1px solid var(--border-color, #e5e7eb);width:100%}@media screen and (min-width:576px){.sticky-collapsible{background:transparent;bottom:0;left:0;overflow:hidden;position:absolute;right:0;width:100%;z-index:1}.sticky-collapsible.fixed{position:fixed}.sticky-collapsible .content{padding:var(--collapsible-footer-padding-v, 1rem) var(--collapsible-footer-padding-h, 1rem);transform:translateY(100%);transition:transform .3s ease-in-out}.sticky-collapsible:hover .content{transform:translateY(0)}}.layout.sidebar-header-layout{display:grid;grid-template-rows:auto 1fr;grid-template-areas:"header" "main";height:100dvh;transition:all .25s ease-in-out}.layout.sidebar-header-layout>.layout-sidebar{--_width: 100%;--_layout-sidebar-collapsed-width: var(--layout-sidebar-collapsed-width, 0);grid-area:header;transition:width .3s ease-in-out;z-index:101}.layout.sidebar-header-layout>.layout-sidebar>.sidebar-menu-wrapper,.layout.sidebar-header-layout>.layout-sidebar>.footer{transition:transform .3s ease,max-height .3s ease}.layout.sidebar-header-layout[aria-expanded=false]>.layout-sidebar>.sidebar-menu-wrapper,.layout.sidebar-header-layout[aria-expanded=false]>.layout-sidebar>.footer{max-height:0;transform:translate(-100%)}.layout.sidebar-header-layout[aria-expanded=false]>.layout-sidebar>.footer{display:none}.layout.sidebar-header-layout[aria-expanded=true]>.layout-sidebar>.sidebar-menu-wrapper,.layout.sidebar-header-layout[aria-expanded=true]>.layout-sidebar>.footer{transform:translate(0)}.layout.sidebar-header-layout[aria-expanded=true]>.layout-sidebar{--_width: 100%;height:100dvh;position:absolute}.layout.sidebar-header-layout>header{--header-padding-h: 1rem;display:none;grid-area:header;position:sticky;row-gap:0;top:0;z-index:101}.layout.sidebar-header-layout>header>nav{display:none}.layout.sidebar-header-layout>main{grid-area:main;overflow-y:auto;padding:var(--layout-default-padding-v, 1.5rem) var(--layout-default-padding-h, 2rem);transition:all .3s ease-in-out;z-index:100}.layout.sidebar-header-layout>main:has(.modal .modal-wrapper){z-index:999}.layout.sidebar-header-layout footer{align-items:center;display:flex;flex-wrap:wrap;font-size:.875rem;gap:.5rem;justify-content:space-between;width:100%}.sidebar-header-layout .copyright a:after{content:""}.sidebar-header-layout .sidebar-menu-wrapper .locales{border-top:1px solid var(--layout-border-color, #dee2e6a6);padding-block:.5rem;width:100%}.sidebar-header-layout .sidebar-menu-wrapper .locales>.locale-trigger{--locale-switcher-padding-h: var(--layout-nav-item-padding-h, 1rem);--locale-switcher-padding-v: var(--layout-nav-item-padding-v, .625rem)}.sidebar-header-layout .sidebar-menu-wrapper .locales.expanded,.sidebar-header-layout .sidebar-menu-wrapper .locales:hover{--locale-switcher-hover-color: var(--nav-item-hover-bg, #f0f2f7ad)}.sidebar-header-layout .sidebar-menu-wrapper .locales ul.dropdown{--locale-switcher-bg-color: var(--sidebar-bg-color, #fff);left:0;right:0}.sidebar-header-layout .sidebar-menu-wrapper:has(.nav-menu-item) .locales ul.dropdown{--locale-switcher-border: none;border-top:1px solid var(--border-color, #e5e7eb);top:unset;bottom:100%}.sidebar-header-layout .sidebar-menu-wrapper .locales ul.dropdown .badge{--locale-switcher-badge-bg-color: #60a7f3}.sidebar-header-layout>.no-locale-switcher-header nav.user-menu-dropdown>ul.dropdown{inset:0 0 auto auto}.sidebar-header-layout .sidebar-menu-wrapper .user-menu{padding-block:1rem}@media screen and (min-width:576px){.layout.sidebar-header-layout{grid-template-columns:auto 1fr;grid-template-areas:"header header" "sidebar main";overflow:hidden}.layout.sidebar-header-layout>header{display:flex}.layout.sidebar-header-layout>header>nav{display:flex}.layout.sidebar-header-layout[aria-expanded=true]>.layout-sidebar{--_width: var(--sidebar-width, 16rem);height:auto;position:relative}.layout.sidebar-header-layout[aria-expanded=false]>.layout-sidebar{--_width: var(--_layout-sidebar-collapsed-width)}.layout.sidebar-header-layout>.layout-sidebar{grid-area:sidebar;position:relative}}.layout.sidebar-only{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:"main";min-height:100dvh;transition:all .25s ease-in-out}.layout.sidebar-only footer{--_padding-h: var(--sidebar-padding-h, 1rem);--_padding-v: var(--sidebar-padding-v, 1.5rem);align-items:center;display:flex;flex-wrap:wrap;font-size:.875rem;justify-content:space-between;padding:0 var(--_padding-h);width:100%}.layout.sidebar-only .copyright a:after{content:""}.layout.sidebar-only:has(.extend) .locales .dropdown{right:-7rem}.layout.sidebar-only .locales{border-top:1px solid var(--layout-border-color, #dee2e6a6);width:100%}.layout.sidebar-only .sidebar-menu-wrapper .locales>.locale-trigger{--locale-switcher-padding-v: 1rem;height:var(--sidebar-menu-height, 3rem)}.layout.sidebar-only .locales.expanded,.layout.sidebar-only .locales:hover{--locale-switcher-hover-color: #0870e5}.layout.sidebar-only .locales .truncated>img{transition:transform .3s ease}.layout.sidebar-only .locales.expanded .truncated>img{transform:rotate(180deg)}.layout.sidebar-only .locales ul.dropdown{--locale-switcher-bg-color: #007aff;--locale-switcher-border: none;left:0;right:0;top:unset;bottom:100%;border-top:1px solid #0870e5}.layout.sidebar-only .locales ul.dropdown .badge{--locale-switcher-badge-bg-color: #60a7f3}.layout.sidebar-only:has(.extend){grid-template-areas:"sidebar main";grid-template-columns:var(--sidebar-collapsed-width, 6rem) 1fr}.layout.sidebar-only:has(.no-sidebar){grid-template-areas:"main";grid-template-columns:1fr}.layout.sidebar-only>.no-sidebar{position:fixed;top:0}.layout.sidebar-only>.layout-sidebar{grid-area:sidebar;transition:width .3s ease-in-out;z-index:100}.layout.sidebar-only>main{grid-area:main;transition:all .3s ease-in-out}.layout-sidebar{transition:width .3s ease-in-out}main{padding:var(--layout-default-padding-v, 2.5rem) var(--layout-default-padding-h, 2rem);z-index:99}@media screen and (min-width:1024px){.layout.sidebar-only{grid-template-columns:var(--sidebar-width, 16rem) 1fr;grid-template-areas:"sidebar main"}}
+.layout{--_default-padding-h: 1rem;--_default-padding-v: 1.5rem;--_layout-main-bg: var(--layout-main-bg, #ffffff);--_layout-main-padding-h: var( --layout-main-padding-h, var(--_default-padding-h) );--_layout-main-padding-v: var( --layout-main-padding-v, var(--_default-padding-v) );width:100%}.layout>main{background:var(--_layout-main-bg);padding:var(--_layout-main-padding-v) var(--_layout-main-padding-h)}@media screen and (min-width:576px){.layout{--_default-padding-h: 2rem;--_default-padding-v: 2.5rem}}.layout.basic{--layout-basic-padding-h: 1em;display:grid;grid-template-areas:"header" "main" "footer";gap:var(--layout-basic-gap);grid-template-rows:auto 1fr auto;height:100dvh;min-height:100dvh;overflow:hidden}.layout.basic[aria-expanded=true]{grid-template-areas:"header" "main" "footer"}.layout.basic>:is(footer,header,main){margin:0 auto;max-width:var(--layout-basic-max-width);width:100%}.layout.basic>footer{grid-area:footer}.layout.basic>header{grid-area:header}.layout.basic[aria-expanded=true]>header>nav nav.locale-switcher{--locale-switcher-width: 100%}.layout.basic[aria-expanded=true]>header .locale-switcher .truncated>svg{transform:rotate(-180deg)}.layout.basic[aria-expanded=true]>header .locale-switcher.expanded .truncated>svg{transform:rotate(0)}.layout.basic nav.user-menu-dropdown>ul.dropdown,.layout.basic nav.locale-switcher>ul.dropdown{width:100%}.layout.basic nav.locale-switcher>.locale-trigger{--locale-switcher-padding-h: var(--layout-nav-item-padding-h, 1rem);--locale-switcher-padding-v: var(--layout-nav-item-padding-v, .625rem)}.layout.basic>main{max-width:100%;min-width:100%;grid-area:main;overflow-y:auto}@media screen and (min-width:576px){.layout.basic nav.user-menu-dropdown>ul.dropdown,.layout.basic nav.locale-switcher>ul.dropdown{width:max-content}.layout.basic[aria-expanded=true]>header>nav nav.locale-switcher{--locale-switcher-width: 10rem}.layout.basic nav.locale-switcher>.locale-trigger{--locale-switcher-padding-h: 1rem;--locale-switcher-padding-v: var(--layout-nav-item-padding-v, .625rem)}}.layout>footer{--_layout-footer-bg-color: #ffffff;--_layout-footer-border: var( --layout-footer-border, 1px solid var(--border-color, #e5e7eb) );--_layout-footer-font-size: var(--layout-footer-font-size, 1rem);--_layout-footer-gap: .5rem;--_layout-footer-padding-h: var(--layout-header-padding-h, 1rem);--_layout-footer-padding-v: var(--layout-header-padding-v, 1rem);align-items:center;background-color:var(--_layout-footer-bg-color);border-top:var(--_layout-footer-border);display:flex;flex-direction:column;font-size:var(--_layout-footer-font-size);gap:var(--_layout-footer-gap);justify-content:center;padding:var(--_layout-footer-padding-v) var(--_layout-footer-padding-h)}@media screen and (min-width:576px){.layout>footer{flex-direction:row;justify-content:space-between}}.layout>header{--_layout-header-bg: var(--layout-header-bg, transparent);--_layout-header-sidebar-bg: var(--layout-header-sidebar-bg, #fff);--_layout-header-border: var( --layout-header-border, 1px solid var(--border-color, #e5e7eb) );--_layout-header-color: var(--dz-layout-header-color, #2c2c2c);--_layout-header-gap: var(--layout-header-gap, 1rem);--_layout-header-logo-max-width: var(--layout-header-logo-max-width, 8rem);--_layout-header-padding-h: var(--layout-header-padding-h, 1rem);--_layout-header-padding-v: var(--layout-header-padding-v, 1rem);align-items:center;background:var(--_layout-header-bg);border-bottom:var(--_layout-header-border);color:var(--_layout-header-color);display:flex;flex-direction:row-reverse;gap:.25rem;justify-content:space-between;padding:var(--_layout-header-padding-v) var(--_layout-header-padding-h);position:relative;width:100%;z-index:100}.layout>header>nav{--_padding-v: 1rem;background:var(--_layout-header-sidebar-bg);justify-content:flex-end;max-height:100dvh;left:0;padding-block:var(--_padding-v);position:absolute;top:calc(100% + 1px);transform:translate(-100%);transition:transform var(--transition-duration, .15s) ease-in-out;width:100%;z-index:999}.layout>header>nav[data-expanded=true]{transform:translate(0)}.layout>header:not(:has(.logo)):not(:has(.main-menu)){display:flex;justify-content:end}.layout header:not(:has(.logo)):not(:has(.main-menu)) .toggle{--_justify-self: left;--_padding-left: 1rem;padding-left:var(--_padding-left);width:100%}.layout>header .logo{grid-area:logo}.layout>header>.toggle{--_background-color: var(--dz-secondary-color);align-content:center;border-radius:50%;cursor:pointer;grid-area:toggle;height:2.875rem;justify-items:center;margin-left:-.875rem;width:3.875rem}.layout>header>.toggle:hover{background-color:color-mix(in srgb,var(--_background-color) 10%,white)}.layout>header .main-menu{flex:1}@media screen and (min-width:576px){.layout>header{flex-direction:row;gap:var(--_layout-header-gap);position:relative}.layout>header>nav{align-items:center;display:flex;background:var(--_layout-header-bg);gap:var(--_layout-header-gap);flex-direction:row;height:auto!important;position:unset;max-width:none;padding:0;transform:none;transition:none}.layout>header>nav[data-expanded=false]{display:flex;justify-content:flex-end}}:root{--layout-logo-max-width: 8rem;--layout-sidebar-bg: white;--layout-sidebar-border: 1px solid var(--border-color, #e5e7eb);--layout-sidebar-collapsed-width: 0;--layout-sidebar-color: var(--color, #374151);--layout-sidebar-logo-max-width: var(--layout-logo-max-width);--layout-sidebar-padding-h: 1.5rem;--layout-sidebar-padding-v: .75rem;--layout-sidebar-separator-color: var(--border-color, #e5e7eb);--layout-sidebar-width: 16rem;--layout-nav-item-padding-h: 2rem;--layout-nav-item-padding-v: .5rem;--layout-nav-menu-padding-h: 0;--layout-nav-menu-padding-v: 1rem;--layout-nav-menu-separator-color: var(--border-color, #e5e7eb);--layout-main-bg: #ffffff;--layout-main-padding-h: 1.5rem;--layout-main-padding-v: 1.5rem;--layout-header-bg: transparent;--layout-header-border: 1px solid var(--border-color, #e5e7eb);--layout-header-color: var(--color, #374151);--layout-header-gap: 1rem;--layout-header-logo-max-width: var(--layout-logo-max-width);--layout-header-max-width: 1920px;--layout-header-padding-h: var(--layout-main-padding-h, 1rem);--layout-header-padding-v: .5rem}@media screen and (min-width:576px){:root{--layout-main-padding-h: 2rem;--layout-main-padding-v: 1.25rem;--layout-sidebar-padding-v: .5rem}}.layout .logo{--_layout-logo-max-width: var(--layout-logo-max-width, 150px)}.layout .logo img{max-width:var(--_layout-logo-max-width)}.layout .logo>a{color:var(--color, #545454);text-decoration:none}.layout .logo .logo-default{align-items:center;display:flex;font-weight:500;gap:.5rem;text-transform:capitalize}.layout .logo .logo-default>span:first-child{align-items:center;background:#2d2d2d40;border-radius:50%;display:flex;flex-shrink:0;height:48px;justify-content:center;width:48px}.layout .logo .logo-default>span:not(:first-child){max-width:150px;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}@media screen and (min-width:576px){.layout .logo .logo-default>span:not(:first-child){max-width:200px}}.nav-menu-item>.link.active{background:var(--_active-bg);color:var(--_active-color);text-decoration:none}.nav-menu-item>.link{--_active-bg: var(--nav-item-active-bg, #eff6ff);--_active-color: var(--nav-item-active-color, #2c2c2c);--_border-radius: var(--nav-item-border-radius, 0);--_color: var(--nav-item-color, #2c2c2c);--_disabled-color: var(--nav-item-disabled-color, #6d7b92);--_hover-color: var(--nav-item-hover-color, #2c2c2c);--_hover-bg: var(--nav-item-hover-bg, #f0f2f7ad);--_padding-h: var(--nav-item-padding-h, 1rem);--_padding-v: var(--nav-item-padding-v, .5rem);--_transition-duration: var(--transition-duration, .15s);align-items:baseline;border-radius:var(--_border-radius);color:var(--_color);cursor:pointer;display:flex;gap:.75rem;height:var(--_height);justify-content:space-between;padding:var(--_padding-v) var(--_padding-h);text-decoration:none;transition:background var(--_transition-duration) linear,font-weight var(--_transition-duration) linear,color var(--_transition-duration) linear;width:100%}.nav-menu-item>.link:not(.active):hover{background:var(--_hover-bg);color:var(--_hover-color);text-decoration:none}.nav-menu-item>.link:has(.icon-only){font-size:.9rem}.nav-menu-item>.link>span.item-name{flex:1}.nav-menu-item .toggle-menu>svg{transition:transform .3s ease}.nav-menu-item .toggle-menu>svg.up-chevron{transform:rotate(180deg)}.sub-menu-item{--_gap: var(--nav-menu-gap, .25rem);display:flex;flex-direction:column;gap:var(--_gap);margin-left:1rem;max-height:100dvh;overflow:hidden;transition:max-height .5s ease-in-out}.sub-menu-item.fade-enter-active,.sub-menu-item.fade-leave-active{transition:max-height .5s ease-in-out}.sub-menu-item.fade-enter-from,.sub-menu-item.fade-leave-to{max-height:0}.sub-menu-item .link{--_submenu-padding-left: var(--nav-menu-padding-left, 2rem);--_submenu-padding-right: var(--nav-menu-padding-right, 2rem);padding-left:var(--_submenu-padding-left);padding-right:var(--_submenu-padding-right)}.toggle-menu{--_width: 1rem;width:var(--_width)}.nav-menu>.menu{--_border-color: var(--border-color, #dee2e6);--_padding-h: var(--padding-h, 0);--_padding-v: var(--padding-v, 1rem);border-bottom:1px solid var(--_border-color);display:flex;flex-direction:column;gap:.375rem;padding-block:var(--_padding-v);padding-left:var(--_padding-h)}.no-sidebar{--_bg-color: var(--sidebar-bg-color, #007aff);--_border-radius: 2rem;--_width: 2rem;background-color:var(--_bg-color);border-radius:0 var(--_border-radius) var(--_border-radius) 0;cursor:pointer;margin-top:1rem;padding-block:.25rem;width:var(--_width)}.no-sidebar>img{--_width: var(--sidebar-toggle-icon-width, 1.5rem);width:var(--_width)}.sidebar{--_bg-color: var(--sidebar-bg-color, #fff);--_border: var( --layout-sidebar-border, 1px solid var(--border-color, #e5e7eb) );--_color: var(--sidebar-color, #2c2c2c);--_height: var(--sidebar-height, auto);--_position: var(--sidebar-position, fixed);--_transition-duration: var(--transition-duration, .15s);--_width: var(--sidebar-width, 16rem);background-color:var(--_bg-color);border-right:var(--_border);color:var(--_color);display:flex;flex-direction:column;height:var(--_height);overflow-y:auto;overflow-x:hidden;transition:width var(--_transition-duration) ease-in;width:var(--_width)}.sidebar .sidebar-menu-wrapper{display:flex;flex:1;flex-direction:column}.sidebar .sidebar-menu-wrapper>ul:has(.nav-menu-item){flex:1}.sidebar>.footer{--_bg-color: var(--sidebar-bg-color, #fff);--_border-color: var(--sidebar-border-color, #dee2e6);--_font-size: var(--sidebar-font-size, 1rem);--_gap: var(--footer-gap, 1rem);--_justify-content: var(--sidebar-justify-content, center);--_padding-h: var(--layout-footer-padding-h, 1rem);--_padding-v: var(--layout-footer-padding-v, 1rem);align-items:center;background-color:var(--_bg-color);border-top:1px solid var(--_border-color);box-shadow:0 0 0 100vmax var(--_bg-color);clip-path:inset(0 -100vmax);display:flex;flex-direction:column;font-size:var(--_font-size);gap:var(--_gap);justify-content:var(--_justify-content);padding:var(--_padding-v) var(--_padding-h);text-align:center;width:100%;z-index:2}.sidebar>.header{--_border-color: var(--sidebar-border-color, #e5e7eb);--_padding-h: var(--layout-header-padding-h, 1rem);--_padding-v: var(--layout-header-padding-v, 1rem);align-items:center;border-bottom:1px solid var(--_border-color);display:flex;justify-content:space-between;padding:var(--_padding-v) var(--_padding-h);z-index:100}.sidebar>.header>.logo{width:100%}.sidebar>.header>.toggle{cursor:pointer;width:var(--sidebar-toggle-icon-width, 2rem)}.sidebar-toggle-enter-active{transition:opacity .3s ease-in-out}.sidebar-toggle-enter-from{opacity:0}.sidebar:has(.extend){--_width: var(--sidebar-collapsed-width, 6rem);overflow:visible;width:var(--_width)}.sidebar:has(.extend)>.header>.logo{width:max-content}@media screen and (min-width:576px){.sidebar .sidebar-menu-wrapper{flex:1}}.sticky-collapsible .content{background-color:#fff;border-top:1px solid var(--border-color, #e5e7eb);width:100%}@media screen and (min-width:576px){.sticky-collapsible{background:transparent;bottom:0;left:0;overflow:hidden;position:absolute;right:0;width:100%;z-index:1}.sticky-collapsible.fixed{position:fixed}.sticky-collapsible .content{padding:var(--collapsible-footer-padding-v, 1rem) var(--collapsible-footer-padding-h, 1rem);transform:translateY(100%);transition:transform .3s ease-in-out}.sticky-collapsible:hover .content{transform:translateY(0)}}.layout.sidebar-header-layout{display:grid;grid-template-rows:auto 1fr;grid-template-areas:"header" "main";height:100dvh;transition:all .25s ease-in-out}.layout.sidebar-header-layout>.layout-sidebar{--_width: 100%;--_layout-sidebar-collapsed-width: var(--layout-sidebar-collapsed-width, 0);grid-area:header;transition:width .3s ease-in-out;z-index:101}.layout.sidebar-header-layout>.layout-sidebar>.sidebar-menu-wrapper,.layout.sidebar-header-layout>.layout-sidebar>.footer{transition:transform .3s ease,max-height .3s ease}.layout.sidebar-header-layout[aria-expanded=false]>.layout-sidebar>.sidebar-menu-wrapper,.layout.sidebar-header-layout[aria-expanded=false]>.layout-sidebar>.footer{max-height:0;transform:translate(-100%)}.layout.sidebar-header-layout[aria-expanded=false]>.layout-sidebar>.footer{display:none}.layout.sidebar-header-layout[aria-expanded=true]>.layout-sidebar>.sidebar-menu-wrapper,.layout.sidebar-header-layout[aria-expanded=true]>.layout-sidebar>.footer{transform:translate(0)}.layout.sidebar-header-layout[aria-expanded=true]>.layout-sidebar{--_width: 100%;height:100dvh;position:absolute}.layout.sidebar-header-layout>header{--header-padding-h: 1rem;display:none;grid-area:header;position:sticky;row-gap:0;top:0;z-index:101}.layout.sidebar-header-layout>header>nav{display:none}.layout.sidebar-header-layout>main{grid-area:main;overflow-y:auto;transition:all .3s ease-in-out;z-index:100}.layout.sidebar-header-layout>main:has(.modal .modal-wrapper){z-index:999}.layout.sidebar-header-layout footer{align-items:center;display:flex;flex-wrap:wrap;font-size:.875rem;gap:.5rem;justify-content:space-between;width:100%}.sidebar-header-layout .copyright a:after{content:""}.sidebar-header-layout .sidebar-menu-wrapper .locales{border-top:1px solid var(--layout-border-color, #dee2e6a6);padding-block:.5rem;width:100%}.sidebar-header-layout .sidebar-menu-wrapper .locales>.locale-trigger{--locale-switcher-padding-h: var(--layout-nav-item-padding-h, 1rem);--locale-switcher-padding-v: var(--layout-nav-item-padding-v, .625rem)}.sidebar-header-layout .sidebar-menu-wrapper .locales.expanded,.sidebar-header-layout .sidebar-menu-wrapper .locales:hover{--locale-switcher-hover-color: var(--nav-item-hover-bg, #f0f2f7ad)}.sidebar-header-layout .sidebar-menu-wrapper .locales ul.dropdown{--locale-switcher-bg-color: var(--sidebar-bg-color, #fff);left:0;right:0}.sidebar-header-layout .sidebar-menu-wrapper:has(.nav-menu-item) .locales ul.dropdown{--locale-switcher-border: none;border-top:1px solid var(--border-color, #e5e7eb);top:unset;bottom:100%}.sidebar-header-layout .sidebar-menu-wrapper .locales ul.dropdown .badge{--locale-switcher-badge-bg-color: #60a7f3}.sidebar-header-layout>.no-locale-switcher-header nav.user-menu-dropdown>ul.dropdown{inset:0 0 auto auto}.sidebar-header-layout .sidebar-menu-wrapper .user-menu{padding-block:1rem}@media screen and (min-width:576px){.layout.sidebar-header-layout{grid-template-columns:auto 1fr;grid-template-areas:"header header" "sidebar main";overflow:hidden}.layout.sidebar-header-layout>header{display:flex}.layout.sidebar-header-layout>header>nav{display:flex}.layout.sidebar-header-layout[aria-expanded=true]>.layout-sidebar{--_width: var(--sidebar-width, 16rem);height:auto;position:relative}.layout.sidebar-header-layout[aria-expanded=false]>.layout-sidebar{--_width: var(--_layout-sidebar-collapsed-width)}.layout.sidebar-header-layout>.layout-sidebar{grid-area:sidebar;position:relative}}.layout.sidebar-only{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:"main";min-height:100dvh;transition:all .25s ease-in-out}.layout.sidebar-only footer{--_padding-h: var(--sidebar-padding-h, 1rem);--_padding-v: var(--sidebar-padding-v, 1.5rem);align-items:center;display:flex;flex-wrap:wrap;font-size:.875rem;justify-content:space-between;padding:0 var(--_padding-h);width:100%}.layout.sidebar-only .copyright a:after{content:""}.layout.sidebar-only:has(.extend) .locales .dropdown{right:-7rem}.layout.sidebar-only .locales{border-top:1px solid var(--layout-border-color, #dee2e6a6);width:100%}.layout.sidebar-only .sidebar-menu-wrapper .locales>.locale-trigger{--locale-switcher-padding-v: 1rem;height:var(--sidebar-menu-height, 3rem)}.layout.sidebar-only .locales.expanded,.layout.sidebar-only .locales:hover{--locale-switcher-hover-color: #0870e5}.layout.sidebar-only .locales .truncated>img{transition:transform .3s ease}.layout.sidebar-only .locales.expanded .truncated>img{transform:rotate(180deg)}.layout.sidebar-only .locales ul.dropdown{--locale-switcher-bg-color: #007aff;--locale-switcher-border: none;left:0;right:0;top:unset;bottom:100%;border-top:1px solid #0870e5}.layout.sidebar-only .locales ul.dropdown .badge{--locale-switcher-badge-bg-color: #60a7f3}.layout.sidebar-only:has(.extend){grid-template-areas:"sidebar main";grid-template-columns:var(--sidebar-collapsed-width, 6rem) 1fr}.layout.sidebar-only:has(.no-sidebar){grid-template-areas:"main";grid-template-columns:1fr}.layout.sidebar-only>.no-sidebar{position:fixed;top:0}.layout.sidebar-only>.layout-sidebar{grid-area:sidebar;transition:width .3s ease-in-out;z-index:100}.layout.sidebar-only>main{grid-area:main;transition:all .3s ease-in-out}.layout-sidebar{transition:width .3s ease-in-out}main{z-index:99}@media screen and (min-width:1024px){.layout.sidebar-only{grid-template-columns:var(--sidebar-width, 16rem) 1fr;grid-template-areas:"sidebar main"}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prefabs.tech/vue3-layout",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "Vue3 Layout Plugin",
   "type": "module",
   "exports": {
@@ -20,9 +20,9 @@
   "devDependencies": {
     "@prefabs.tech/eslint-config": "0.4.0",
     "@prefabs.tech/tsconfig": "0.4.0",
-    "@prefabs.tech/vue3-config": "0.31.0",
-    "@prefabs.tech/vue3-i18n": "0.31.0",
-    "@prefabs.tech/vue3-ui": "0.31.0",
+    "@prefabs.tech/vue3-config": "0.32.0",
+    "@prefabs.tech/vue3-i18n": "0.32.0",
+    "@prefabs.tech/vue3-ui": "0.32.0",
     "@iconify/vue": "4.3.0",
     "@types/node": "24.10.1",
     "@vitejs/plugin-vue": "6.0.4",
@@ -40,9 +40,9 @@
     "vue-tsc": "1.2.0"
   },
   "peerDependencies": {
-    "@prefabs.tech/vue3-config": "0.31.0",
-    "@prefabs.tech/vue3-i18n": "0.31.0",
-    "@prefabs.tech/vue3-ui": "0.31.0",
+    "@prefabs.tech/vue3-config": "0.32.0",
+    "@prefabs.tech/vue3-i18n": "0.32.0",
+    "@prefabs.tech/vue3-ui": "0.32.0",
     "@vueuse/core": ">=9.4.0",
     "vue": ">=3.2",
     "vue-router": ">=4.0"