@graupl/navigation-shelf 1.0.0-beta.25 → 1.0.0-beta.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/component/navigation-shelf.css +1 -1
- package/dist/css/component/navigation-shelf.css.map +1 -1
- package/dist/css/component.css +1 -1
- package/dist/css/component.css.map +1 -1
- package/dist/css/navigation-shelf.css +1 -1
- package/dist/css/navigation-shelf.css.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.navigation-shelf{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)));display:var(--graupl-navigation-shelf-display,var(--graupl-navigation-shelf-closed-display,grid));z-index:var(--graupl-navigation-shelf-z-index,2);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)))[footer-end content-end header-end];width:var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)));transform:var(--graupl-navigation-shelf-transform,var(--graupl-navigation-shelf-closed-transform, ));transition:var(--graupl-navigation-shelf-transition,width var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),transform var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),opacity var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),display var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))allow-discrete);border-width:var(--graupl-navigation-shelf-border-width,var(--graupl-navigation-shelf-border-top-width,0)var(--graupl-navigation-shelf-border-right-width,0)var(--graupl-navigation-shelf-border-bottom-width,0)var(--graupl-navigation-shelf-border-left-width,0));border-style:var(--graupl-navigation-shelf-border-style,var(--graupl-navigation-shelf-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-navigation-shelf-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-navigation-shelf-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-navigation-shelf-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-color:var(--graupl-navigation-shelf-border-color,var(--graupl-navigation-shelf-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));opacity:var(--graupl-navigation-shelf-opacity,var(--graupl-navigation-shelf-closed-opacity,1));background:var(--graupl-navigation-shelf-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-navigation-shelf-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));isolation:isolate;grid-template-rows:[header-start]auto[header-end content-start]1fr[content-end footer-start]auto[footer-end];position:fixed;top:0;bottom:0;overflow-x:hidden}@starting-style{.navigation-shelf{display:var(--graupl-navigation-shelf-starting-display,var(--graupl-navigation-shelf-display,var(--graupl-navigation-shelf-closed-display,grid)));width:var(--graupl-navigation-shelf-starting-width,var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))));transform:var(--graupl-navigation-shelf-starting-transform,var(--graupl-navigation-shelf-transform,var(--graupl-navigation-shelf-closed-transform, )));opacity:var(--graupl-navigation-shelf-starting-opacity,var(--graupl-navigation-shelf-opacity,var(--graupl-navigation-shelf-closed-opacity,1)))}}.navigation-shelf.initializing{--graupl-navigation-shelf-transition:--graupl-navigation-shelf-transition-initializing,none}@media (prefers-reduced-motion:reduce){.navigation-shelf{--graupl-navigation-shelf-transition:var(--graupl-navigation-shelf-transition-reduced-motion,opacity var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),display var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))allow-discrete)}}.navigation-shelf,.navigation-shelf.left-side{--graupl-navigation-shelf-side-toggle-content:var(--graupl-navigation-shelf-side-toggle-shelf-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"));left:0;right:auto}.navigation-shelf.locked,.navigation-shelf.left-side.locked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-unlock-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"))}.navigation-shelf.unlocked,.navigation-shelf.left-side.unlocked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-lock-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"))}.navigation-shelf.right-side{--graupl-navigation-shelf-side-toggle-content:var(--graupl-navigation-shelf-side-toggle-shelf-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"));left:auto;right:0}.navigation-shelf.right-side.locked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-unlock-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M300-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"))}.navigation-shelf.right-side.unlocked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-lock-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M460-320v-320L300-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"))}.navigation-shelf.hoverable{--graupl-navigation-shelf-hover-toggle-content:var(--graupl-navigation-shelf-hover-toggle-disable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M468-240q-96-5-162-74t-66-166q0-100 70-170t170-70q97 0 166 66t74 162l-84-25q-13-54-56-88.5T480-640q-66 0-113 47t-47 113q0 57 34.5 100t88.5 56l25 84ZM821-60 650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E"))}.navigation-shelf.not-hoverable{--graupl-navigation-shelf-hover-toggle-content:var(--graupl-navigation-shelf-hover-toggle-enable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E"))}.navigation-shelf.hide{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem));display:var(--graupl-navigation-shelf-closed-display,grid);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))[footer-end content-end header-end];width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem));transform:var(--graupl-navigation-shelf-closed-transform, );opacity:var(--graupl-navigation-shelf-closed-opacity,1)}.navigation-shelf.transitioning{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem));display:var(--graupl-navigation-shelf-transitioning-display,grid);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem))[footer-end content-end header-end];width:var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem));transform:var(--graupl-navigation-shelf-transitioning-transform, );opacity:var(--graupl-navigation-shelf-transitioning-opacity,1)}.navigation-shelf.show{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch));display:var(--graupl-navigation-shelf-open-display,grid);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-max-width,36ch)[footer-end content-end header-end];width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch));transform:var(--graupl-navigation-shelf-open-transform, );opacity:var(--graupl-navigation-shelf-open-opacity,1)}.navigation-shelf .navigation-shelf-header{grid-area:header}.navigation-shelf .navigation-shelf-content{grid-area:content}.navigation-shelf .navigation-shelf-footer{grid-area:footer}.navigation-shelf .navigation-shelf-side-toggle{--graupl-icon:var(--graupl-navigation-shelf-side-toggle-content,var(--graupl-navigation-shelf-side-toggle-shelf-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-side-toggle-spacer,0)}.navigation-shelf .navigation-shelf-side-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-lock-toggle{--graupl-icon:var(--graupl-navigation-shelf-lock-toggle-content,var(--graupl-navigation-shelf-lock-toggle-lock-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-lock-toggle-spacer,0)}.navigation-shelf .navigation-shelf-lock-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-hover-toggle{--graupl-icon:var(--graupl-navigation-shelf-hover-toggle-content,var(--graupl-navigation-shelf-hover-toggle-enable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-hover-toggle-spacer,0)}.navigation-shelf .navigation-shelf-hover-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}
|
|
1
|
+
.navigation-shelf{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)));display:var(--graupl-navigation-shelf-display,var(--graupl-navigation-shelf-closed-display,grid));z-index:var(--graupl-navigation-shelf-z-index,2);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)))[footer-end content-end header-end];width:var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)));transform:var(--graupl-navigation-shelf-transform,var(--graupl-navigation-shelf-closed-transform, ));transition:var(--graupl-navigation-shelf-transition,width var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),transform var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),opacity var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),display var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))allow-discrete);border-width:var(--graupl-navigation-shelf-border-width,var(--graupl-navigation-shelf-border-top-width,0)var(--graupl-navigation-shelf-border-right-width,0)var(--graupl-navigation-shelf-border-bottom-width,0)var(--graupl-navigation-shelf-border-left-width,0));border-style:var(--graupl-navigation-shelf-border-style,var(--graupl-navigation-shelf-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-navigation-shelf-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-navigation-shelf-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-navigation-shelf-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-color:var(--graupl-navigation-shelf-border-color,var(--graupl-navigation-shelf-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));opacity:var(--graupl-navigation-shelf-opacity,var(--graupl-navigation-shelf-closed-opacity,1));background:var(--graupl-navigation-shelf-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-navigation-shelf-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));isolation:isolate;grid-template-rows:[header-start]auto[header-end content-start]1fr[content-end footer-start]auto[footer-end];position:fixed;top:0;bottom:0;overflow-x:hidden}@starting-style{.navigation-shelf{display:var(--graupl-navigation-shelf-starting-display,var(--graupl-navigation-shelf-display,var(--graupl-navigation-shelf-closed-display,grid)));width:var(--graupl-navigation-shelf-starting-width,var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))));transform:var(--graupl-navigation-shelf-starting-transform,var(--graupl-navigation-shelf-transform,var(--graupl-navigation-shelf-closed-transform, )));opacity:var(--graupl-navigation-shelf-starting-opacity,var(--graupl-navigation-shelf-opacity,var(--graupl-navigation-shelf-closed-opacity,1)))}}.navigation-shelf.initializing{--graupl-navigation-shelf-transition:--graupl-navigation-shelf-transition-initializing,none}@media (prefers-reduced-motion:reduce){.navigation-shelf{--graupl-navigation-shelf-transition:var(--graupl-navigation-shelf-transition-reduced-motion,opacity var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),display var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))allow-discrete)}}.navigation-shelf,.navigation-shelf.left-side{--graupl-navigation-shelf-side-toggle-content:var(--graupl-navigation-shelf-side-toggle-shelf-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"));left:0;right:auto}.navigation-shelf.locked,.navigation-shelf.left-side.locked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-unlock-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"))}.navigation-shelf.unlocked,.navigation-shelf.left-side.unlocked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-lock-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"))}.navigation-shelf.right-side{--graupl-navigation-shelf-side-toggle-content:var(--graupl-navigation-shelf-side-toggle-shelf-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"));left:auto;right:0}.navigation-shelf.right-side.locked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-unlock-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M300-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"))}.navigation-shelf.right-side.unlocked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-lock-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M460-320v-320L300-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"))}.navigation-shelf.hoverable{--graupl-navigation-shelf-hover-toggle-content:var(--graupl-navigation-shelf-hover-toggle-disable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M468-240q-96-5-162-74t-66-166q0-100 70-170t170-70q97 0 166 66t74 162l-84-25q-13-54-56-88.5T480-640q-66 0-113 47t-47 113q0 57 34.5 100t88.5 56l25 84ZM821-60 650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E"))}.navigation-shelf.not-hoverable{--graupl-navigation-shelf-hover-toggle-content:var(--graupl-navigation-shelf-hover-toggle-enable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E"))}.navigation-shelf.hide{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem));display:var(--graupl-navigation-shelf-closed-display,grid);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))[footer-end content-end header-end];width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem));transform:var(--graupl-navigation-shelf-closed-transform, );opacity:var(--graupl-navigation-shelf-closed-opacity,1)}.navigation-shelf.transitioning{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem));display:var(--graupl-navigation-shelf-transitioning-display,grid);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem))[footer-end content-end header-end];width:var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem));transform:var(--graupl-navigation-shelf-transitioning-transform, );opacity:var(--graupl-navigation-shelf-transitioning-opacity,1)}.navigation-shelf.show{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch));display:var(--graupl-navigation-shelf-open-display,grid);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-max-width,36ch)[footer-end content-end header-end];width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch));transform:var(--graupl-navigation-shelf-open-transform, );opacity:var(--graupl-navigation-shelf-open-opacity,1)}.navigation-shelf .navigation-shelf-header{grid-area:header}.navigation-shelf .navigation-shelf-content{grid-area:content}.navigation-shelf .navigation-shelf-footer{grid-area:footer}.navigation-shelf .navigation-shelf-side-toggle{--graupl-icon:var(--graupl-navigation-shelf-side-toggle-content,var(--graupl-navigation-shelf-side-toggle-shelf-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-side-toggle-spacer,0)}.navigation-shelf .navigation-shelf-side-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-side-toggle.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.navigation-shelf .navigation-shelf-side-toggle.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.navigation-shelf .navigation-shelf-side-toggle.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.navigation-shelf .navigation-shelf-side-toggle:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.navigation-shelf .navigation-shelf-lock-toggle{--graupl-icon:var(--graupl-navigation-shelf-lock-toggle-content,var(--graupl-navigation-shelf-lock-toggle-lock-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-lock-toggle-spacer,0)}.navigation-shelf .navigation-shelf-lock-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-lock-toggle.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.navigation-shelf .navigation-shelf-lock-toggle.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.navigation-shelf .navigation-shelf-lock-toggle.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.navigation-shelf .navigation-shelf-lock-toggle:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.navigation-shelf .navigation-shelf-hover-toggle{--graupl-icon:var(--graupl-navigation-shelf-hover-toggle-content,var(--graupl-navigation-shelf-hover-toggle-enable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-hover-toggle-spacer,0)}.navigation-shelf .navigation-shelf-hover-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-hover-toggle.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.navigation-shelf .navigation-shelf-hover-toggle.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.navigation-shelf .navigation-shelf-hover-toggle.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.navigation-shelf .navigation-shelf-hover-toggle:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}
|
|
2
2
|
/*# sourceMappingURL=navigation-shelf.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACYA,kkGAsBE,gBAtBF,goBA8BE,2HE/BA,uCFCF,0XAwCE,ygBAWE,oiBAQA,qiBASF,ufAUE,0gBAQA,2gBASF,mgBAQA,+mBAQA,0mBAWA,6pBAWA,8iBAWA,4DAKA,8DAKA,4DAKA,qlBGnJE,8tBHyKF,2mBGzKE,8tBH+LF,6tBG/LE","sources":["dist/css/component/navigation-shelf.css","var/www/html/packages/navigation-shelf/src/scss/component/navigation-shelf/_index.scss","var/www/html/packages/navigation-shelf/src/scss/component/navigation-shelf/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_animation.scss","var/www/html/node_modules/@graupl/icons/src/scss/component/icon/_mixins.scss","var/www/html/node_modules/@graupl/icons/src/scss/component/icon/_variables.scss"],"sourcesContent":[".navigation-shelf {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)));\n display: var(--graupl-navigation-shelf-display, var(--graupl-navigation-shelf-closed-display, grid));\n position: fixed;\n z-index: var(--graupl-navigation-shelf-z-index, 2);\n top: 0;\n bottom: 0;\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem))) [footer-end content-end header-end];\n grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];\n width: var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)));\n overflow-x: hidden;\n transform: var(--graupl-navigation-shelf-transform, var(--graupl-navigation-shelf-closed-transform, ));\n transition: var(--graupl-navigation-shelf-transition, width var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), transform var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), opacity var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), display var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) allow-discrete);\n border-width: var(--graupl-navigation-shelf-border-width, var(--graupl-navigation-shelf-border-top-width, 0) var(--graupl-navigation-shelf-border-right-width, 0) var(--graupl-navigation-shelf-border-bottom-width, 0) var(--graupl-navigation-shelf-border-left-width, 0));\n border-style: var(--graupl-navigation-shelf-border-style, var(--graupl-navigation-shelf-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-color: var(--graupl-navigation-shelf-border-color, var(--graupl-navigation-shelf-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n opacity: var(--graupl-navigation-shelf-opacity, var(--graupl-navigation-shelf-closed-opacity, 1));\n background: var(--graupl-navigation-shelf-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-navigation-shelf-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n isolation: isolate;\n}\n@starting-style {\n .navigation-shelf {\n display: var(--graupl-navigation-shelf-starting-display, var(--graupl-navigation-shelf-display, var(--graupl-navigation-shelf-closed-display, grid)));\n width: var(--graupl-navigation-shelf-starting-width, var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem))));\n transform: var(--graupl-navigation-shelf-starting-transform, var(--graupl-navigation-shelf-transform, var(--graupl-navigation-shelf-closed-transform, )));\n opacity: var(--graupl-navigation-shelf-starting-opacity, var(--graupl-navigation-shelf-opacity, var(--graupl-navigation-shelf-closed-opacity, 1)));\n }\n}\n.navigation-shelf.initializing {\n --graupl-navigation-shelf-transition: --graupl-navigation-shelf-transition-initializing, none;\n}\n@media (prefers-reduced-motion: reduce) {\n .navigation-shelf {\n --graupl-navigation-shelf-transition: var(--graupl-navigation-shelf-transition-reduced-motion, opacity var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), display var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) allow-discrete);\n }\n}\n.navigation-shelf, .navigation-shelf.left-side {\n --graupl-navigation-shelf-side-toggle-content: var(\n --graupl-navigation-shelf-side-toggle-shelf-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n right: auto;\n left: 0;\n}\n.navigation-shelf.locked, .navigation-shelf.left-side.locked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-unlock-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.unlocked, .navigation-shelf.left-side.unlocked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-lock-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.right-side {\n --graupl-navigation-shelf-side-toggle-content: var(\n --graupl-navigation-shelf-side-toggle-shelf-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n right: 0;\n left: auto;\n}\n.navigation-shelf.right-side.locked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-unlock-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M300-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.right-side.unlocked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-lock-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M460-320v-320L300-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.hoverable {\n --graupl-navigation-shelf-hover-toggle-content: var(\n --graupl-navigation-shelf-hover-toggle-disable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M468-240q-96-5-162-74t-66-166q0-100 70-170t170-70q97 0 166 66t74 162l-84-25q-13-54-56-88.5T480-640q-66 0-113 47t-47 113q0 57 34.5 100t88.5 56l25 84ZM821-60 650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.not-hoverable {\n --graupl-navigation-shelf-hover-toggle-content: var(\n --graupl-navigation-shelf-hover-toggle-enable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.hide {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n display: var(--graupl-navigation-shelf-closed-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n transform: var(--graupl-navigation-shelf-closed-transform, );\n opacity: var(--graupl-navigation-shelf-closed-opacity, 1);\n}\n.navigation-shelf.transitioning {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n display: var(--graupl-navigation-shelf-transitioning-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n transform: var(--graupl-navigation-shelf-transitioning-transform, );\n opacity: var(--graupl-navigation-shelf-transitioning-opacity, 1);\n}\n.navigation-shelf.show {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch));\n display: var(--graupl-navigation-shelf-open-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-max-width, 36ch) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch));\n transform: var(--graupl-navigation-shelf-open-transform, );\n opacity: var(--graupl-navigation-shelf-open-opacity, 1);\n}\n.navigation-shelf .navigation-shelf-header {\n grid-area: header;\n}\n.navigation-shelf .navigation-shelf-content {\n grid-area: content;\n}\n.navigation-shelf .navigation-shelf-footer {\n grid-area: footer;\n}\n.navigation-shelf .navigation-shelf-side-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-side-toggle-content,\n var(\n --graupl-navigation-shelf-side-toggle-shelf-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-side-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-side-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n margin-inline-end: var(--graupl-icon-spacer, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n}\n.navigation-shelf .navigation-shelf-side-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-lock-toggle-content,\n var(\n --graupl-navigation-shelf-lock-toggle-lock-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-lock-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-lock-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n margin-inline-end: var(--graupl-icon-spacer, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-hover-toggle-content,\n var(\n --graupl-navigation-shelf-hover-toggle-enable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-hover-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-hover-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n margin-inline-end: var(--graupl-icon-spacer, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}","@use \"pkg:@graupl/icons/src/component/icon/mixins\" as icon-mixins;\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/mixins/animation\";\n@use \"defaults\";\n@use \"variables\" as *;\n@use \"sass:map\";\n\n@if defaults.$show-warnings and root-defaults.$show-warnings {\n @warn \"The `@graupl/navigation-shelf` component is under active development and is highly experimental. It is not recommended for production use at this time.\";\n}\n\n// `.navigation-shelf`\n#{defaults.$navigation-shelf-selector-base}#{defaults.$navigation-shelf-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-width};\n\n display: $navigation-shelf-display;\n position: fixed;\n z-index: $navigation-shelf-z-index;\n top: 0;\n bottom: 0;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-width [footer-end content-end header-end];\n grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];\n width: $navigation-shelf-width;\n overflow-x: hidden;\n transform: $navigation-shelf-transform;\n transition: $navigation-shelf-transition;\n border-width: $navigation-shelf-border-width;\n border-style: $navigation-shelf-border-style;\n border-color: $navigation-shelf-border-color;\n opacity: $navigation-shelf-opacity;\n background: $navigation-shelf-background;\n color: $navigation-shelf-color;\n isolation: isolate;\n\n @starting-style {\n display: $navigation-shelf-starting-display;\n width: $navigation-shelf-starting-width;\n transform: $navigation-shelf-starting-transform;\n opacity: $navigation-shelf-starting-opacity;\n }\n\n // &.initializing\n &#{defaults.$navigation-shelf-initializing-selector-base}#{defaults.$navigation-shelf-initializing-selector} {\n --#{root-defaults.$prefix}navigation-shelf-transition: #{$navigation-shelf-transition-initializing};\n }\n\n @include animation.off {\n --#{root-defaults.$prefix}navigation-shelf-transition: #{$navigation-shelf-transition-reduced-motion};\n }\n\n // `&,`\n // `&.left-side`\n &,\n &#{defaults.$navigation-shelf-side-selector-base}#{defaults.$navigation-shelf-left-side-selector}#{defaults.$navigation-shelf-side-selector-suffix} {\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-right\")}\n );\n\n right: auto;\n left: 0;\n\n // `&.locked`\n &#{defaults.$navigation-shelf-locked-selector-base}#{defaults.$navigation-shelf-locked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-unlock-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"unlock-right\")}\n );\n }\n\n // `&.unlocked`\n &#{defaults.$navigation-shelf-unlocked-selector-base}#{defaults.$navigation-shelf-unlocked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-right\")}\n );\n }\n }\n\n // `&.right-side`\n &#{defaults.$navigation-shelf-side-selector-base}#{defaults.$navigation-shelf-right-side-selector}#{defaults.$navigation-shelf-side-selector-suffix} {\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-left\")}\n );\n\n right: 0;\n left: auto;\n\n // `&.locked`\n &#{defaults.$navigation-shelf-locked-selector-base}#{defaults.$navigation-shelf-locked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-unlock-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"unlock-left\")}\n );\n }\n\n // `&.unlocked`\n &#{defaults.$navigation-shelf-unlocked-selector-base}#{defaults.$navigation-shelf-unlocked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-left\")}\n );\n }\n }\n\n // `&.hoverable`\n &#{defaults.$navigation-shelf-hoverable-selector-base}#{defaults.$navigation-shelf-hoverable-selector} {\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-disable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"disable-hover\")}\n );\n }\n\n // `&.not-hoverable`\n &#{defaults.$navigation-shelf-not-hoverable-selector-base}#{defaults.$navigation-shelf-not-hoverable-selector} {\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-enable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"enable-hover\")}\n );\n }\n\n // `&.hide`\n &#{defaults.$navigation-shelf-closed-selector-base}#{defaults.$navigation-shelf-closed-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-closed-width};\n\n display: $navigation-shelf-closed-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-closed-width [footer-end content-end header-end];\n width: $navigation-shelf-closed-width;\n transform: $navigation-shelf-closed-transform;\n opacity: $navigation-shelf-closed-opacity;\n }\n\n // `&.transitioning`\n &#{defaults.$navigation-shelf-transitioning-selector-base}#{defaults.$navigation-shelf-transitioning-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-transitioning-width};\n\n display: $navigation-shelf-transitioning-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-transitioning-width [footer-end content-end header-end];\n width: $navigation-shelf-transitioning-width;\n transform: $navigation-shelf-transitioning-transform;\n opacity: $navigation-shelf-transitioning-opacity;\n }\n\n // `&.show`\n &#{defaults.$navigation-shelf-open-selector-base}#{defaults.$navigation-shelf-open-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-open-width};\n\n display: $navigation-shelf-open-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-max-width [footer-end content-end header-end];\n width: $navigation-shelf-open-width;\n transform: $navigation-shelf-open-transform;\n opacity: $navigation-shelf-open-opacity;\n }\n\n // `.navigation-shelf-header`\n #{defaults.$navigation-shelf-header-selector-base}#{defaults.$navigation-shelf-header-selector} {\n grid-area: header;\n }\n\n // `.navigation-shelf-content`\n #{defaults.$navigation-shelf-content-selector-base}#{defaults.$navigation-shelf-content-selector} {\n grid-area: content;\n }\n\n // `.navigation-shelf-footer`\n #{defaults.$navigation-shelf-footer-selector-base}#{defaults.$navigation-shelf-footer-selector} {\n grid-area: footer;\n }\n\n // `.navigation-shelf-side-toggle`\n #{defaults.$navigation-shelf-side-toggle-selector-base}#{defaults.$navigation-shelf-side-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-right\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-side-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-side-toggle-pseudo-element}\n );\n }\n\n // `.navigation-shelf-lock-toggle`\n #{defaults.$navigation-shelf-lock-toggle-selector-base}#{defaults.$navigation-shelf-lock-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-right\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-lock-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-lock-toggle-pseudo-element}\n );\n }\n\n // `.navigation-shelf-hover-toggle`\n #{defaults.$navigation-shelf-hover-toggle-selector-base}#{defaults.$navigation-shelf-hover-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-enable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"enable-hover\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-hover-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-hover-toggle-pseudo-element}\n );\n }\n}\n","// @graupl/navigation-shelf navigation shelf component variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/variables\" as root-variables;\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"sass:map\";\n\n// Navigation shelf properties.\n$navigation-shelf-background: var(\n --#{root-defaults.$prefix}navigation-shelf-background,\n #{color.$background}\n);\n$navigation-shelf-color: var(\n --#{root-defaults.$prefix}navigation-shelf-color,\n #{color.$color}\n);\n$navigation-shelf-z-index: var(\n --#{root-defaults.$prefix}navigation-shelf-z-index,\n #{defaults.$navigation-shelf-z-index}\n);\n\n// Border properties.\n$navigation-shelf-border-top-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-top-style,\n #{root-variables.$border-top-style}\n);\n$navigation-shelf-border-right-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-right-style,\n #{root-variables.$border-right-style}\n);\n$navigation-shelf-border-bottom-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n$navigation-shelf-border-left-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-left-style,\n #{root-variables.$border-left-style}\n);\n$navigation-shelf-border-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-style,\n #{$navigation-shelf-border-top-style} #{$navigation-shelf-border-right-style}\n #{$navigation-shelf-border-bottom-style}\n #{$navigation-shelf-border-left-style}\n);\n$navigation-shelf-border-top-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-top-width,\n 0\n);\n$navigation-shelf-border-right-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-right-width,\n 0\n);\n$navigation-shelf-border-bottom-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-bottom-width,\n 0\n);\n$navigation-shelf-border-left-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-left-width,\n 0\n);\n$navigation-shelf-border-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-width,\n #{$navigation-shelf-border-top-width} #{$navigation-shelf-border-right-width}\n #{$navigation-shelf-border-bottom-width}\n #{$navigation-shelf-border-left-width}\n);\n$navigation-shelf-border-color: var(\n --#{root-defaults.$prefix}navigation-shelf-border-color,\n #{$navigation-shelf-color}\n);\n\n// Transform properties.\n$navigation-shelf-closed-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-transform,\n null\n);\n$navigation-shelf-open-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-open-transform,\n null\n);\n$navigation-shelf-transitioning-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-transform,\n null\n);\n$navigation-shelf-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-transform,\n #{$navigation-shelf-closed-transform}\n);\n$navigation-shelf-starting-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-transform,\n #{$navigation-shelf-transform}\n);\n\n// Width properties.\n$navigation-shelf-min-width: var(\n --#{root-defaults.$prefix}navigation-shelf-min-width,\n #{defaults.$navigation-shelf-min-width}\n);\n$navigation-shelf-max-width: var(\n --#{root-defaults.$prefix}navigation-shelf-max-width,\n #{defaults.$navigation-shelf-max-width}\n);\n$navigation-shelf-closed-width: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-width,\n #{$navigation-shelf-min-width}\n);\n$navigation-shelf-open-width: var(\n --#{root-defaults.$prefix}navigation-shelf-open-width,\n #{$navigation-shelf-max-width}\n);\n$navigation-shelf-transitioning-width: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-width,\n #{$navigation-shelf-min-width}\n);\n$navigation-shelf-width: var(\n --#{root-defaults.$prefix}navigation-shelf-width,\n #{$navigation-shelf-closed-width}\n);\n$navigation-shelf-starting-width: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-width,\n #{$navigation-shelf-width}\n);\n$navigation-shelf-current-width: var(\n --#{root-defaults.$prefix}navigation-shelf-current-width,\n #{$navigation-shelf-width}\n);\n\n// Display properties.\n$navigation-shelf-closed-display: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-display,\n grid\n);\n$navigation-shelf-open-display: var(\n --#{root-defaults.$prefix}navigation-shelf-open-display,\n grid\n);\n$navigation-shelf-transitioning-display: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-display,\n grid\n);\n$navigation-shelf-display: var(\n --#{root-defaults.$prefix}navigation-shelf-display,\n #{$navigation-shelf-closed-display}\n);\n$navigation-shelf-starting-display: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-display,\n #{$navigation-shelf-display}\n);\n\n// Opacity properties.\n$navigation-shelf-closed-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-opacity,\n 1\n);\n$navigation-shelf-open-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-open-opacity,\n 1\n);\n$navigation-shelf-transitioning-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-opacity,\n 1\n);\n$navigation-shelf-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-opacity,\n #{$navigation-shelf-closed-opacity}\n);\n$navigation-shelf-starting-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-opacity,\n #{$navigation-shelf-opacity}\n);\n\n// Transition properties.\n$navigation-shelf-transition-duration: var(\n --#{root-defaults.$prefix}navigation-shelf-transition-duration,\n #{map.get(root-variables.$transition-durations, fast)}\n);\n$navigation-shelf-transition: var(\n --#{root-defaults.$prefix}navigation-shelf-transition,\n width #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n transform #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n opacity #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n display #{$navigation-shelf-transition-duration} allow-discrete\n);\n$navigation-shelf-transition-initializing: (\n --#{root-defaults.$prefix}navigation-shelf-transition-initializing,\n none\n);\n$navigation-shelf-transition-reduced-motion: var(\n --#{root-defaults.$prefix}navigation-shelf-transition-reduced-motion,\n opacity #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n display #{$navigation-shelf-transition-duration} allow-discrete\n);\n","// @graupl/core animation media query mixins.\n\n// A media query for targeting users who have not requested reduced motion.\n@mixin on {\n @media (prefers-reduced-motion: no-preference) {\n @content;\n }\n}\n\n// A media query for targeting users who have requested reduced motion.\n@mixin off {\n @media (prefers-reduced-motion: reduce) {\n @content;\n }\n}\n","// @graupl/icons icon mixins.\n\n@use \"variables\" as *;\n\n@mixin _component() {\n display: $icon-display;\n width: $icon-width;\n height: $icon-height;\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: $icon;\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n}\n\n@mixin _theme() {\n background-color: $icon-color;\n}\n\n@mixin apply-component($target: \"self\") {\n @if $target == \"before\" {\n &::before {\n @include _component;\n\n content: \"\";\n margin-inline-end: $icon-spacer;\n }\n } @else if $target == \"after\" {\n &::after {\n @include _component;\n\n content: \"\";\n margin-inline-start: $icon-spacer;\n }\n } @else {\n @include _component;\n\n margin-inline: $icon-spacer $icon-spacer;\n }\n}\n\n@mixin apply-theme($target: \"self\") {\n @if $target == \"before\" {\n &::before {\n @include _theme;\n }\n } @else if $target == \"after\" {\n &::after {\n @include _theme;\n }\n } @else {\n @include _theme;\n }\n}\n\n@mixin apply($target: \"self\") {\n @include apply-component($target);\n @include apply-theme($target);\n}\n","// @graupl/icons icon componet variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"pkg:@graupl/core/src/variables\" as root-variables;\n@use \"sass:map\";\n\n$icon-display: var(\n --#{root-defaults.$prefix}icon-display,\n #{defaults.$icon-display}\n);\n$icon-size: var(--#{root-defaults.$prefix}icon-size, #{defaults.$icon-size});\n$icon-width: var(--#{root-defaults.$prefix}icon-width, #{$icon-size});\n$icon-height: var(--#{root-defaults.$prefix}icon-height, #{$icon-size});\n$icon-color: var(--#{root-defaults.$prefix}icon-color, #{color.$color});\n$icon: var(--#{root-defaults.$prefix}icon, none);\n$icon-spacer: var(\n --#{root-defaults.$prefix}icon-spacer,\n #{map.get(root-variables.$spacers, 2)}\n);\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACYA,kkGAsBE,gBAtBF,goBA8BE,2HE/BA,uCFCF,0XAwCE,ygBAWE,oiBAQA,qiBASF,ufAUE,0gBAQA,2gBASF,mgBAQA,+mBAQA,0mBAWA,6pBAWA,8iBAWA,4DAKA,8DAKA,4DAKA,qlBG1JA,4aEuBE,gMAAA,wMAAA,iMFOF,kQHkJA,2mBGhLA,4aEuBE,gMAAA,wMAAA,iMFOF,kQHwKA,6tBGtMA,6aEuBE,iMAAA,yMAAA,kMFOF","sources":["dist/css/component/navigation-shelf.css","var/www/html/packages/navigation-shelf/src/scss/component/navigation-shelf/_index.scss","var/www/html/packages/navigation-shelf/src/scss/component/navigation-shelf/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_animation.scss","var/www/html/node_modules/@graupl/icons/src/scss/component/icon/_mixins.scss","var/www/html/node_modules/@graupl/icons/src/scss/component/icon/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_theme.scss"],"sourcesContent":[".navigation-shelf {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)));\n display: var(--graupl-navigation-shelf-display, var(--graupl-navigation-shelf-closed-display, grid));\n position: fixed;\n z-index: var(--graupl-navigation-shelf-z-index, 2);\n top: 0;\n bottom: 0;\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem))) [footer-end content-end header-end];\n grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];\n width: var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)));\n overflow-x: hidden;\n transform: var(--graupl-navigation-shelf-transform, var(--graupl-navigation-shelf-closed-transform, ));\n transition: var(--graupl-navigation-shelf-transition, width var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), transform var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), opacity var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), display var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) allow-discrete);\n border-width: var(--graupl-navigation-shelf-border-width, var(--graupl-navigation-shelf-border-top-width, 0) var(--graupl-navigation-shelf-border-right-width, 0) var(--graupl-navigation-shelf-border-bottom-width, 0) var(--graupl-navigation-shelf-border-left-width, 0));\n border-style: var(--graupl-navigation-shelf-border-style, var(--graupl-navigation-shelf-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-color: var(--graupl-navigation-shelf-border-color, var(--graupl-navigation-shelf-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n opacity: var(--graupl-navigation-shelf-opacity, var(--graupl-navigation-shelf-closed-opacity, 1));\n background: var(--graupl-navigation-shelf-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-navigation-shelf-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n isolation: isolate;\n}\n@starting-style {\n .navigation-shelf {\n display: var(--graupl-navigation-shelf-starting-display, var(--graupl-navigation-shelf-display, var(--graupl-navigation-shelf-closed-display, grid)));\n width: var(--graupl-navigation-shelf-starting-width, var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem))));\n transform: var(--graupl-navigation-shelf-starting-transform, var(--graupl-navigation-shelf-transform, var(--graupl-navigation-shelf-closed-transform, )));\n opacity: var(--graupl-navigation-shelf-starting-opacity, var(--graupl-navigation-shelf-opacity, var(--graupl-navigation-shelf-closed-opacity, 1)));\n }\n}\n.navigation-shelf.initializing {\n --graupl-navigation-shelf-transition: --graupl-navigation-shelf-transition-initializing, none;\n}\n@media (prefers-reduced-motion: reduce) {\n .navigation-shelf {\n --graupl-navigation-shelf-transition: var(--graupl-navigation-shelf-transition-reduced-motion, opacity var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), display var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) allow-discrete);\n }\n}\n.navigation-shelf, .navigation-shelf.left-side {\n --graupl-navigation-shelf-side-toggle-content: var(\n --graupl-navigation-shelf-side-toggle-shelf-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n right: auto;\n left: 0;\n}\n.navigation-shelf.locked, .navigation-shelf.left-side.locked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-unlock-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.unlocked, .navigation-shelf.left-side.unlocked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-lock-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.right-side {\n --graupl-navigation-shelf-side-toggle-content: var(\n --graupl-navigation-shelf-side-toggle-shelf-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n right: 0;\n left: auto;\n}\n.navigation-shelf.right-side.locked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-unlock-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M300-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.right-side.unlocked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-lock-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M460-320v-320L300-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.hoverable {\n --graupl-navigation-shelf-hover-toggle-content: var(\n --graupl-navigation-shelf-hover-toggle-disable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M468-240q-96-5-162-74t-66-166q0-100 70-170t170-70q97 0 166 66t74 162l-84-25q-13-54-56-88.5T480-640q-66 0-113 47t-47 113q0 57 34.5 100t88.5 56l25 84ZM821-60 650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.not-hoverable {\n --graupl-navigation-shelf-hover-toggle-content: var(\n --graupl-navigation-shelf-hover-toggle-enable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.hide {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n display: var(--graupl-navigation-shelf-closed-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n transform: var(--graupl-navigation-shelf-closed-transform, );\n opacity: var(--graupl-navigation-shelf-closed-opacity, 1);\n}\n.navigation-shelf.transitioning {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n display: var(--graupl-navigation-shelf-transitioning-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n transform: var(--graupl-navigation-shelf-transitioning-transform, );\n opacity: var(--graupl-navigation-shelf-transitioning-opacity, 1);\n}\n.navigation-shelf.show {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch));\n display: var(--graupl-navigation-shelf-open-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-max-width, 36ch) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch));\n transform: var(--graupl-navigation-shelf-open-transform, );\n opacity: var(--graupl-navigation-shelf-open-opacity, 1);\n}\n.navigation-shelf .navigation-shelf-header {\n grid-area: header;\n}\n.navigation-shelf .navigation-shelf-content {\n grid-area: content;\n}\n.navigation-shelf .navigation-shelf-footer {\n grid-area: footer;\n}\n.navigation-shelf .navigation-shelf-side-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-side-toggle-content,\n var(\n --graupl-navigation-shelf-side-toggle-shelf-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-side-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-side-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n}\n.navigation-shelf .navigation-shelf-side-toggle.primary {\n --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n}\n.navigation-shelf .navigation-shelf-side-toggle.secondary {\n --graupl-icon-color: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n}\n.navigation-shelf .navigation-shelf-side-toggle.tertiary {\n --graupl-icon-color: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n}\n.navigation-shelf .navigation-shelf-side-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-lock-toggle-content,\n var(\n --graupl-navigation-shelf-lock-toggle-lock-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-lock-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-lock-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n}\n.navigation-shelf .navigation-shelf-lock-toggle.primary {\n --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle.secondary {\n --graupl-icon-color: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle.tertiary {\n --graupl-icon-color: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-hover-toggle-content,\n var(\n --graupl-navigation-shelf-hover-toggle-enable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-hover-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-hover-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n}\n.navigation-shelf .navigation-shelf-hover-toggle.primary {\n --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle.secondary {\n --graupl-icon-color: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle.tertiary {\n --graupl-icon-color: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}","@use \"pkg:@graupl/icons/src/component/icon/mixins\" as icon-mixins;\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/mixins/animation\";\n@use \"defaults\";\n@use \"variables\" as *;\n@use \"sass:map\";\n\n@if defaults.$show-warnings and root-defaults.$show-warnings {\n @warn \"The `@graupl/navigation-shelf` component is under active development and is highly experimental. It is not recommended for production use at this time.\";\n}\n\n// `.navigation-shelf`\n#{defaults.$navigation-shelf-selector-base}#{defaults.$navigation-shelf-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-width};\n\n display: $navigation-shelf-display;\n position: fixed;\n z-index: $navigation-shelf-z-index;\n top: 0;\n bottom: 0;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-width [footer-end content-end header-end];\n grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];\n width: $navigation-shelf-width;\n overflow-x: hidden;\n transform: $navigation-shelf-transform;\n transition: $navigation-shelf-transition;\n border-width: $navigation-shelf-border-width;\n border-style: $navigation-shelf-border-style;\n border-color: $navigation-shelf-border-color;\n opacity: $navigation-shelf-opacity;\n background: $navigation-shelf-background;\n color: $navigation-shelf-color;\n isolation: isolate;\n\n @starting-style {\n display: $navigation-shelf-starting-display;\n width: $navigation-shelf-starting-width;\n transform: $navigation-shelf-starting-transform;\n opacity: $navigation-shelf-starting-opacity;\n }\n\n // &.initializing\n &#{defaults.$navigation-shelf-initializing-selector-base}#{defaults.$navigation-shelf-initializing-selector} {\n --#{root-defaults.$prefix}navigation-shelf-transition: #{$navigation-shelf-transition-initializing};\n }\n\n @include animation.off {\n --#{root-defaults.$prefix}navigation-shelf-transition: #{$navigation-shelf-transition-reduced-motion};\n }\n\n // `&,`\n // `&.left-side`\n &,\n &#{defaults.$navigation-shelf-side-selector-base}#{defaults.$navigation-shelf-left-side-selector}#{defaults.$navigation-shelf-side-selector-suffix} {\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-right\")}\n );\n\n right: auto;\n left: 0;\n\n // `&.locked`\n &#{defaults.$navigation-shelf-locked-selector-base}#{defaults.$navigation-shelf-locked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-unlock-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"unlock-right\")}\n );\n }\n\n // `&.unlocked`\n &#{defaults.$navigation-shelf-unlocked-selector-base}#{defaults.$navigation-shelf-unlocked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-right\")}\n );\n }\n }\n\n // `&.right-side`\n &#{defaults.$navigation-shelf-side-selector-base}#{defaults.$navigation-shelf-right-side-selector}#{defaults.$navigation-shelf-side-selector-suffix} {\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-left\")}\n );\n\n right: 0;\n left: auto;\n\n // `&.locked`\n &#{defaults.$navigation-shelf-locked-selector-base}#{defaults.$navigation-shelf-locked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-unlock-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"unlock-left\")}\n );\n }\n\n // `&.unlocked`\n &#{defaults.$navigation-shelf-unlocked-selector-base}#{defaults.$navigation-shelf-unlocked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-left\")}\n );\n }\n }\n\n // `&.hoverable`\n &#{defaults.$navigation-shelf-hoverable-selector-base}#{defaults.$navigation-shelf-hoverable-selector} {\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-disable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"disable-hover\")}\n );\n }\n\n // `&.not-hoverable`\n &#{defaults.$navigation-shelf-not-hoverable-selector-base}#{defaults.$navigation-shelf-not-hoverable-selector} {\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-enable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"enable-hover\")}\n );\n }\n\n // `&.hide`\n &#{defaults.$navigation-shelf-closed-selector-base}#{defaults.$navigation-shelf-closed-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-closed-width};\n\n display: $navigation-shelf-closed-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-closed-width [footer-end content-end header-end];\n width: $navigation-shelf-closed-width;\n transform: $navigation-shelf-closed-transform;\n opacity: $navigation-shelf-closed-opacity;\n }\n\n // `&.transitioning`\n &#{defaults.$navigation-shelf-transitioning-selector-base}#{defaults.$navigation-shelf-transitioning-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-transitioning-width};\n\n display: $navigation-shelf-transitioning-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-transitioning-width [footer-end content-end header-end];\n width: $navigation-shelf-transitioning-width;\n transform: $navigation-shelf-transitioning-transform;\n opacity: $navigation-shelf-transitioning-opacity;\n }\n\n // `&.show`\n &#{defaults.$navigation-shelf-open-selector-base}#{defaults.$navigation-shelf-open-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-open-width};\n\n display: $navigation-shelf-open-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-max-width [footer-end content-end header-end];\n width: $navigation-shelf-open-width;\n transform: $navigation-shelf-open-transform;\n opacity: $navigation-shelf-open-opacity;\n }\n\n // `.navigation-shelf-header`\n #{defaults.$navigation-shelf-header-selector-base}#{defaults.$navigation-shelf-header-selector} {\n grid-area: header;\n }\n\n // `.navigation-shelf-content`\n #{defaults.$navigation-shelf-content-selector-base}#{defaults.$navigation-shelf-content-selector} {\n grid-area: content;\n }\n\n // `.navigation-shelf-footer`\n #{defaults.$navigation-shelf-footer-selector-base}#{defaults.$navigation-shelf-footer-selector} {\n grid-area: footer;\n }\n\n // `.navigation-shelf-side-toggle`\n #{defaults.$navigation-shelf-side-toggle-selector-base}#{defaults.$navigation-shelf-side-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-right\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-side-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-side-toggle-pseudo-element}\n );\n }\n\n // `.navigation-shelf-lock-toggle`\n #{defaults.$navigation-shelf-lock-toggle-selector-base}#{defaults.$navigation-shelf-lock-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-right\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-lock-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-lock-toggle-pseudo-element}\n );\n }\n\n // `.navigation-shelf-hover-toggle`\n #{defaults.$navigation-shelf-hover-toggle-selector-base}#{defaults.$navigation-shelf-hover-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-enable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"enable-hover\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-hover-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-hover-toggle-pseudo-element}\n );\n }\n}\n","// @graupl/navigation-shelf navigation shelf component variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/variables\" as root-variables;\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"sass:map\";\n\n// Navigation shelf properties.\n$navigation-shelf-background: var(\n --#{root-defaults.$prefix}navigation-shelf-background,\n #{color.$background}\n);\n$navigation-shelf-color: var(\n --#{root-defaults.$prefix}navigation-shelf-color,\n #{color.$color}\n);\n$navigation-shelf-z-index: var(\n --#{root-defaults.$prefix}navigation-shelf-z-index,\n #{defaults.$navigation-shelf-z-index}\n);\n\n// Border properties.\n$navigation-shelf-border-top-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-top-style,\n #{root-variables.$border-top-style}\n);\n$navigation-shelf-border-right-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-right-style,\n #{root-variables.$border-right-style}\n);\n$navigation-shelf-border-bottom-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n$navigation-shelf-border-left-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-left-style,\n #{root-variables.$border-left-style}\n);\n$navigation-shelf-border-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-style,\n #{$navigation-shelf-border-top-style} #{$navigation-shelf-border-right-style}\n #{$navigation-shelf-border-bottom-style}\n #{$navigation-shelf-border-left-style}\n);\n$navigation-shelf-border-top-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-top-width,\n 0\n);\n$navigation-shelf-border-right-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-right-width,\n 0\n);\n$navigation-shelf-border-bottom-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-bottom-width,\n 0\n);\n$navigation-shelf-border-left-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-left-width,\n 0\n);\n$navigation-shelf-border-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-width,\n #{$navigation-shelf-border-top-width} #{$navigation-shelf-border-right-width}\n #{$navigation-shelf-border-bottom-width}\n #{$navigation-shelf-border-left-width}\n);\n$navigation-shelf-border-color: var(\n --#{root-defaults.$prefix}navigation-shelf-border-color,\n #{$navigation-shelf-color}\n);\n\n// Transform properties.\n$navigation-shelf-closed-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-transform,\n null\n);\n$navigation-shelf-open-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-open-transform,\n null\n);\n$navigation-shelf-transitioning-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-transform,\n null\n);\n$navigation-shelf-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-transform,\n #{$navigation-shelf-closed-transform}\n);\n$navigation-shelf-starting-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-transform,\n #{$navigation-shelf-transform}\n);\n\n// Width properties.\n$navigation-shelf-min-width: var(\n --#{root-defaults.$prefix}navigation-shelf-min-width,\n #{defaults.$navigation-shelf-min-width}\n);\n$navigation-shelf-max-width: var(\n --#{root-defaults.$prefix}navigation-shelf-max-width,\n #{defaults.$navigation-shelf-max-width}\n);\n$navigation-shelf-closed-width: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-width,\n #{$navigation-shelf-min-width}\n);\n$navigation-shelf-open-width: var(\n --#{root-defaults.$prefix}navigation-shelf-open-width,\n #{$navigation-shelf-max-width}\n);\n$navigation-shelf-transitioning-width: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-width,\n #{$navigation-shelf-min-width}\n);\n$navigation-shelf-width: var(\n --#{root-defaults.$prefix}navigation-shelf-width,\n #{$navigation-shelf-closed-width}\n);\n$navigation-shelf-starting-width: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-width,\n #{$navigation-shelf-width}\n);\n$navigation-shelf-current-width: var(\n --#{root-defaults.$prefix}navigation-shelf-current-width,\n #{$navigation-shelf-width}\n);\n\n// Display properties.\n$navigation-shelf-closed-display: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-display,\n grid\n);\n$navigation-shelf-open-display: var(\n --#{root-defaults.$prefix}navigation-shelf-open-display,\n grid\n);\n$navigation-shelf-transitioning-display: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-display,\n grid\n);\n$navigation-shelf-display: var(\n --#{root-defaults.$prefix}navigation-shelf-display,\n #{$navigation-shelf-closed-display}\n);\n$navigation-shelf-starting-display: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-display,\n #{$navigation-shelf-display}\n);\n\n// Opacity properties.\n$navigation-shelf-closed-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-opacity,\n 1\n);\n$navigation-shelf-open-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-open-opacity,\n 1\n);\n$navigation-shelf-transitioning-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-opacity,\n 1\n);\n$navigation-shelf-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-opacity,\n #{$navigation-shelf-closed-opacity}\n);\n$navigation-shelf-starting-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-opacity,\n #{$navigation-shelf-opacity}\n);\n\n// Transition properties.\n$navigation-shelf-transition-duration: var(\n --#{root-defaults.$prefix}navigation-shelf-transition-duration,\n #{map.get(root-variables.$transition-durations, fast)}\n);\n$navigation-shelf-transition: var(\n --#{root-defaults.$prefix}navigation-shelf-transition,\n width #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n transform #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n opacity #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n display #{$navigation-shelf-transition-duration} allow-discrete\n);\n$navigation-shelf-transition-initializing: (\n --#{root-defaults.$prefix}navigation-shelf-transition-initializing,\n none\n);\n$navigation-shelf-transition-reduced-motion: var(\n --#{root-defaults.$prefix}navigation-shelf-transition-reduced-motion,\n opacity #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n display #{$navigation-shelf-transition-duration} allow-discrete\n);\n","// @graupl/core animation media query mixins.\n\n// A media query for targeting users who have not requested reduced motion.\n@mixin on {\n @media (prefers-reduced-motion: no-preference) {\n @content;\n }\n}\n\n// A media query for targeting users who have requested reduced motion.\n@mixin off {\n @media (prefers-reduced-motion: reduce) {\n @content;\n }\n}\n","// @graupl/icons icon mixins.\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/mixins/state\";\n@use \"pkg:@graupl/core/src/mixins/theme\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n$-targets: (\n \"self\": \"&\",\n \"before\": \"&::before\",\n \"after\": \"&::after\",\n);\n\n/// Mixin to apply component styles for icons.\n@mixin apply-component($target: \"self\") {\n #{map.get($-targets, $target)} {\n display: $icon-display;\n width: $icon-width;\n height: $icon-height;\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: $icon;\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n\n @if $target == \"before\" or $target == \"after\" {\n content: \"\";\n }\n }\n}\n\n/// Mixin to apply theme styles for icons.\n@mixin apply-theme($target: \"self\") {\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$icon-theme-map,\n defaults.$icon-theme-selector-base,\n defaults.$icon-theme-selector-prefix,\n \"icon-\"\n );\n }\n\n #{map.get($-targets, $target)} {\n background-color: $icon-color;\n }\n}\n\n/// Mixin to bind icon colors to a component.\n///\n/// @param {CustomProperty} $color - The default color prop for the icon.\n/// @param {Map} $states - A map of states and color props for the icon.\n@mixin bind($color, $states) {\n --#{root-defaults.$prefix}icon-color: #{$color};\n\n @include state.generate-modifiers(\n (--#{root-defaults.$prefix}icon-color: $states)\n );\n}\n\n@mixin apply($target: \"self\") {\n @include apply-component($target);\n @include apply-theme($target);\n}\n","// @graupl/icons icon componet variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Property | Default |\n// | ------------------------- | ------------------------- |\n// | --graupl-icon-display | inline-block |\n// | --graupl-icon-size | 1.25em |\n// | --graupl-icon-width | var(--graupl-icon-size) |\n// | --graupl-icon-height | var(--graupl-icon-size) |\n// | --graupl-icon-color | var(--graupl-color) |\n// | --graupl-icon | none |\n// | --graupl-icon-spacer | var(--graupl-spacer-2) |\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"pkg:@graupl/core/src/variables\" as root-variables;\n@use \"sass:map\";\n\n$icon-display: var(\n --#{root-defaults.$prefix}icon-display,\n #{defaults.$icon-display}\n);\n$icon-size: var(--#{root-defaults.$prefix}icon-size, #{defaults.$icon-size});\n$icon-width: var(--#{root-defaults.$prefix}icon-width, #{$icon-size});\n$icon-height: var(--#{root-defaults.$prefix}icon-height, #{$icon-size});\n$icon-color: var(--#{root-defaults.$prefix}icon-color, #{color.$color});\n$icon: var(--#{root-defaults.$prefix}icon, none);\n$icon-spacer: var(\n --#{root-defaults.$prefix}icon-spacer,\n #{map.get(root-variables.$spacers, 2)}\n);\n","// @graupl/core theme mixins.\n//\n// A series of mixins to tie styles to a theme-mode.\n\n@use \"../functions/theme\";\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies styles to a specific theme mode.\n///\n/// @param {string} $theme-name\n/// The name of the theme mode to apply the styles to.\n@mixin theme($theme-name) {\n #{color-defaults.$theme-selector-base}#{color-defaults.$theme-selector-prefix}#{$theme-name}#{color-defaults.$theme-selector-suffix} {\n @content;\n }\n}\n\n/// Generates a theme modifiers with custom props.\n///\n/// @param {map} $theme-map\n/// The map of custom props.\n/// @param {string} $selector-base\n/// The selector base for the theme modifier.\n/// @param {string} $selector-prefix\n/// The selector prefix for the theme modifer.\n/// @param {string} $scope\n/// The scope of the custom properties.\n/// @param {string} $base\n/// The base selector to append the theme modifier to.\n@mixin generate-modifiers(\n $theme-map,\n $selector-base,\n $selector-prefix,\n $scope: \"\",\n $base: \"&\"\n) {\n @each $color, $map in $theme-map {\n // e.g. &.primary, &.secondary, &.tertiary\n #{$base}#{$selector-base}#{$selector-prefix}#{$color} {\n @each $prop, $value in $map {\n --#{root-defaults.$prefix}#{$scope}#{$prop}: #{theme.get(\n map.get($value, color),\n map.get($value, shade)\n )};\n }\n }\n }\n}\n"],"names":[]}
|
package/dist/css/component.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.navigation-shelf{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)));display:var(--graupl-navigation-shelf-display,var(--graupl-navigation-shelf-closed-display,grid));z-index:var(--graupl-navigation-shelf-z-index,2);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)))[footer-end content-end header-end];width:var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)));transform:var(--graupl-navigation-shelf-transform,var(--graupl-navigation-shelf-closed-transform, ));transition:var(--graupl-navigation-shelf-transition,width var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),transform var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),opacity var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),display var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))allow-discrete);border-width:var(--graupl-navigation-shelf-border-width,var(--graupl-navigation-shelf-border-top-width,0)var(--graupl-navigation-shelf-border-right-width,0)var(--graupl-navigation-shelf-border-bottom-width,0)var(--graupl-navigation-shelf-border-left-width,0));border-style:var(--graupl-navigation-shelf-border-style,var(--graupl-navigation-shelf-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-navigation-shelf-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-navigation-shelf-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-navigation-shelf-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-color:var(--graupl-navigation-shelf-border-color,var(--graupl-navigation-shelf-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));opacity:var(--graupl-navigation-shelf-opacity,var(--graupl-navigation-shelf-closed-opacity,1));background:var(--graupl-navigation-shelf-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-navigation-shelf-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));isolation:isolate;grid-template-rows:[header-start]auto[header-end content-start]1fr[content-end footer-start]auto[footer-end];position:fixed;top:0;bottom:0;overflow-x:hidden}@starting-style{.navigation-shelf{display:var(--graupl-navigation-shelf-starting-display,var(--graupl-navigation-shelf-display,var(--graupl-navigation-shelf-closed-display,grid)));width:var(--graupl-navigation-shelf-starting-width,var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))));transform:var(--graupl-navigation-shelf-starting-transform,var(--graupl-navigation-shelf-transform,var(--graupl-navigation-shelf-closed-transform, )));opacity:var(--graupl-navigation-shelf-starting-opacity,var(--graupl-navigation-shelf-opacity,var(--graupl-navigation-shelf-closed-opacity,1)))}}.navigation-shelf.initializing{--graupl-navigation-shelf-transition:--graupl-navigation-shelf-transition-initializing,none}@media (prefers-reduced-motion:reduce){.navigation-shelf{--graupl-navigation-shelf-transition:var(--graupl-navigation-shelf-transition-reduced-motion,opacity var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),display var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))allow-discrete)}}.navigation-shelf,.navigation-shelf.left-side{--graupl-navigation-shelf-side-toggle-content:var(--graupl-navigation-shelf-side-toggle-shelf-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"));left:0;right:auto}.navigation-shelf.locked,.navigation-shelf.left-side.locked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-unlock-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"))}.navigation-shelf.unlocked,.navigation-shelf.left-side.unlocked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-lock-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"))}.navigation-shelf.right-side{--graupl-navigation-shelf-side-toggle-content:var(--graupl-navigation-shelf-side-toggle-shelf-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"));left:auto;right:0}.navigation-shelf.right-side.locked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-unlock-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M300-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"))}.navigation-shelf.right-side.unlocked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-lock-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M460-320v-320L300-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"))}.navigation-shelf.hoverable{--graupl-navigation-shelf-hover-toggle-content:var(--graupl-navigation-shelf-hover-toggle-disable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M468-240q-96-5-162-74t-66-166q0-100 70-170t170-70q97 0 166 66t74 162l-84-25q-13-54-56-88.5T480-640q-66 0-113 47t-47 113q0 57 34.5 100t88.5 56l25 84ZM821-60 650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E"))}.navigation-shelf.not-hoverable{--graupl-navigation-shelf-hover-toggle-content:var(--graupl-navigation-shelf-hover-toggle-enable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E"))}.navigation-shelf.hide{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem));display:var(--graupl-navigation-shelf-closed-display,grid);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))[footer-end content-end header-end];width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem));transform:var(--graupl-navigation-shelf-closed-transform, );opacity:var(--graupl-navigation-shelf-closed-opacity,1)}.navigation-shelf.transitioning{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem));display:var(--graupl-navigation-shelf-transitioning-display,grid);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem))[footer-end content-end header-end];width:var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem));transform:var(--graupl-navigation-shelf-transitioning-transform, );opacity:var(--graupl-navigation-shelf-transitioning-opacity,1)}.navigation-shelf.show{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch));display:var(--graupl-navigation-shelf-open-display,grid);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-max-width,36ch)[footer-end content-end header-end];width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch));transform:var(--graupl-navigation-shelf-open-transform, );opacity:var(--graupl-navigation-shelf-open-opacity,1)}.navigation-shelf .navigation-shelf-header{grid-area:header}.navigation-shelf .navigation-shelf-content{grid-area:content}.navigation-shelf .navigation-shelf-footer{grid-area:footer}.navigation-shelf .navigation-shelf-side-toggle{--graupl-icon:var(--graupl-navigation-shelf-side-toggle-content,var(--graupl-navigation-shelf-side-toggle-shelf-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-side-toggle-spacer,0)}.navigation-shelf .navigation-shelf-side-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-lock-toggle{--graupl-icon:var(--graupl-navigation-shelf-lock-toggle-content,var(--graupl-navigation-shelf-lock-toggle-lock-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-lock-toggle-spacer,0)}.navigation-shelf .navigation-shelf-lock-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-hover-toggle{--graupl-icon:var(--graupl-navigation-shelf-hover-toggle-content,var(--graupl-navigation-shelf-hover-toggle-enable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-hover-toggle-spacer,0)}.navigation-shelf .navigation-shelf-hover-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}
|
|
1
|
+
.navigation-shelf{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)));display:var(--graupl-navigation-shelf-display,var(--graupl-navigation-shelf-closed-display,grid));z-index:var(--graupl-navigation-shelf-z-index,2);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)))[footer-end content-end header-end];width:var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)));transform:var(--graupl-navigation-shelf-transform,var(--graupl-navigation-shelf-closed-transform, ));transition:var(--graupl-navigation-shelf-transition,width var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),transform var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),opacity var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),display var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))allow-discrete);border-width:var(--graupl-navigation-shelf-border-width,var(--graupl-navigation-shelf-border-top-width,0)var(--graupl-navigation-shelf-border-right-width,0)var(--graupl-navigation-shelf-border-bottom-width,0)var(--graupl-navigation-shelf-border-left-width,0));border-style:var(--graupl-navigation-shelf-border-style,var(--graupl-navigation-shelf-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-navigation-shelf-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-navigation-shelf-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-navigation-shelf-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-color:var(--graupl-navigation-shelf-border-color,var(--graupl-navigation-shelf-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));opacity:var(--graupl-navigation-shelf-opacity,var(--graupl-navigation-shelf-closed-opacity,1));background:var(--graupl-navigation-shelf-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-navigation-shelf-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));isolation:isolate;grid-template-rows:[header-start]auto[header-end content-start]1fr[content-end footer-start]auto[footer-end];position:fixed;top:0;bottom:0;overflow-x:hidden}@starting-style{.navigation-shelf{display:var(--graupl-navigation-shelf-starting-display,var(--graupl-navigation-shelf-display,var(--graupl-navigation-shelf-closed-display,grid)));width:var(--graupl-navigation-shelf-starting-width,var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))));transform:var(--graupl-navigation-shelf-starting-transform,var(--graupl-navigation-shelf-transform,var(--graupl-navigation-shelf-closed-transform, )));opacity:var(--graupl-navigation-shelf-starting-opacity,var(--graupl-navigation-shelf-opacity,var(--graupl-navigation-shelf-closed-opacity,1)))}}.navigation-shelf.initializing{--graupl-navigation-shelf-transition:--graupl-navigation-shelf-transition-initializing,none}@media (prefers-reduced-motion:reduce){.navigation-shelf{--graupl-navigation-shelf-transition:var(--graupl-navigation-shelf-transition-reduced-motion,opacity var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),display var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))allow-discrete)}}.navigation-shelf,.navigation-shelf.left-side{--graupl-navigation-shelf-side-toggle-content:var(--graupl-navigation-shelf-side-toggle-shelf-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"));left:0;right:auto}.navigation-shelf.locked,.navigation-shelf.left-side.locked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-unlock-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"))}.navigation-shelf.unlocked,.navigation-shelf.left-side.unlocked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-lock-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"))}.navigation-shelf.right-side{--graupl-navigation-shelf-side-toggle-content:var(--graupl-navigation-shelf-side-toggle-shelf-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"));left:auto;right:0}.navigation-shelf.right-side.locked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-unlock-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M300-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"))}.navigation-shelf.right-side.unlocked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-lock-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M460-320v-320L300-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"))}.navigation-shelf.hoverable{--graupl-navigation-shelf-hover-toggle-content:var(--graupl-navigation-shelf-hover-toggle-disable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M468-240q-96-5-162-74t-66-166q0-100 70-170t170-70q97 0 166 66t74 162l-84-25q-13-54-56-88.5T480-640q-66 0-113 47t-47 113q0 57 34.5 100t88.5 56l25 84ZM821-60 650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E"))}.navigation-shelf.not-hoverable{--graupl-navigation-shelf-hover-toggle-content:var(--graupl-navigation-shelf-hover-toggle-enable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E"))}.navigation-shelf.hide{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem));display:var(--graupl-navigation-shelf-closed-display,grid);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))[footer-end content-end header-end];width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem));transform:var(--graupl-navigation-shelf-closed-transform, );opacity:var(--graupl-navigation-shelf-closed-opacity,1)}.navigation-shelf.transitioning{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem));display:var(--graupl-navigation-shelf-transitioning-display,grid);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem))[footer-end content-end header-end];width:var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem));transform:var(--graupl-navigation-shelf-transitioning-transform, );opacity:var(--graupl-navigation-shelf-transitioning-opacity,1)}.navigation-shelf.show{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch));display:var(--graupl-navigation-shelf-open-display,grid);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-max-width,36ch)[footer-end content-end header-end];width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch));transform:var(--graupl-navigation-shelf-open-transform, );opacity:var(--graupl-navigation-shelf-open-opacity,1)}.navigation-shelf .navigation-shelf-header{grid-area:header}.navigation-shelf .navigation-shelf-content{grid-area:content}.navigation-shelf .navigation-shelf-footer{grid-area:footer}.navigation-shelf .navigation-shelf-side-toggle{--graupl-icon:var(--graupl-navigation-shelf-side-toggle-content,var(--graupl-navigation-shelf-side-toggle-shelf-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-side-toggle-spacer,0)}.navigation-shelf .navigation-shelf-side-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-side-toggle.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.navigation-shelf .navigation-shelf-side-toggle.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.navigation-shelf .navigation-shelf-side-toggle.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.navigation-shelf .navigation-shelf-side-toggle:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.navigation-shelf .navigation-shelf-lock-toggle{--graupl-icon:var(--graupl-navigation-shelf-lock-toggle-content,var(--graupl-navigation-shelf-lock-toggle-lock-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-lock-toggle-spacer,0)}.navigation-shelf .navigation-shelf-lock-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-lock-toggle.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.navigation-shelf .navigation-shelf-lock-toggle.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.navigation-shelf .navigation-shelf-lock-toggle.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.navigation-shelf .navigation-shelf-lock-toggle:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.navigation-shelf .navigation-shelf-hover-toggle{--graupl-icon:var(--graupl-navigation-shelf-hover-toggle-content,var(--graupl-navigation-shelf-hover-toggle-enable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-hover-toggle-spacer,0)}.navigation-shelf .navigation-shelf-hover-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-hover-toggle.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.navigation-shelf .navigation-shelf-hover-toggle.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.navigation-shelf .navigation-shelf-hover-toggle.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.navigation-shelf .navigation-shelf-hover-toggle:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}
|
|
2
2
|
/*# sourceMappingURL=component.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACYA,kkGAsBE,gBAtBF,goBA8BE,2HE/BA,uCFCF,0XAwCE,ygBAWE,oiBAQA,qiBASF,ufAUE,0gBAQA,2gBASF,mgBAQA,+mBAQA,0mBAWA,6pBAWA,8iBAWA,4DAKA,8DAKA,4DAKA,qlBGnJE,8tBHyKF,2mBGzKE,8tBH+LF,6tBG/LE","sources":["dist/css/component.css","var/www/html/packages/navigation-shelf/src/scss/component/navigation-shelf/_index.scss","var/www/html/packages/navigation-shelf/src/scss/component/navigation-shelf/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_animation.scss","var/www/html/node_modules/@graupl/icons/src/scss/component/icon/_mixins.scss","var/www/html/node_modules/@graupl/icons/src/scss/component/icon/_variables.scss"],"sourcesContent":[".navigation-shelf {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)));\n display: var(--graupl-navigation-shelf-display, var(--graupl-navigation-shelf-closed-display, grid));\n position: fixed;\n z-index: var(--graupl-navigation-shelf-z-index, 2);\n top: 0;\n bottom: 0;\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem))) [footer-end content-end header-end];\n grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];\n width: var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)));\n overflow-x: hidden;\n transform: var(--graupl-navigation-shelf-transform, var(--graupl-navigation-shelf-closed-transform, ));\n transition: var(--graupl-navigation-shelf-transition, width var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), transform var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), opacity var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), display var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) allow-discrete);\n border-width: var(--graupl-navigation-shelf-border-width, var(--graupl-navigation-shelf-border-top-width, 0) var(--graupl-navigation-shelf-border-right-width, 0) var(--graupl-navigation-shelf-border-bottom-width, 0) var(--graupl-navigation-shelf-border-left-width, 0));\n border-style: var(--graupl-navigation-shelf-border-style, var(--graupl-navigation-shelf-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-color: var(--graupl-navigation-shelf-border-color, var(--graupl-navigation-shelf-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n opacity: var(--graupl-navigation-shelf-opacity, var(--graupl-navigation-shelf-closed-opacity, 1));\n background: var(--graupl-navigation-shelf-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-navigation-shelf-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n isolation: isolate;\n}\n@starting-style {\n .navigation-shelf {\n display: var(--graupl-navigation-shelf-starting-display, var(--graupl-navigation-shelf-display, var(--graupl-navigation-shelf-closed-display, grid)));\n width: var(--graupl-navigation-shelf-starting-width, var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem))));\n transform: var(--graupl-navigation-shelf-starting-transform, var(--graupl-navigation-shelf-transform, var(--graupl-navigation-shelf-closed-transform, )));\n opacity: var(--graupl-navigation-shelf-starting-opacity, var(--graupl-navigation-shelf-opacity, var(--graupl-navigation-shelf-closed-opacity, 1)));\n }\n}\n.navigation-shelf.initializing {\n --graupl-navigation-shelf-transition: --graupl-navigation-shelf-transition-initializing, none;\n}\n@media (prefers-reduced-motion: reduce) {\n .navigation-shelf {\n --graupl-navigation-shelf-transition: var(--graupl-navigation-shelf-transition-reduced-motion, opacity var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), display var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) allow-discrete);\n }\n}\n.navigation-shelf, .navigation-shelf.left-side {\n --graupl-navigation-shelf-side-toggle-content: var(\n --graupl-navigation-shelf-side-toggle-shelf-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n right: auto;\n left: 0;\n}\n.navigation-shelf.locked, .navigation-shelf.left-side.locked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-unlock-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.unlocked, .navigation-shelf.left-side.unlocked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-lock-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.right-side {\n --graupl-navigation-shelf-side-toggle-content: var(\n --graupl-navigation-shelf-side-toggle-shelf-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n right: 0;\n left: auto;\n}\n.navigation-shelf.right-side.locked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-unlock-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M300-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.right-side.unlocked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-lock-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M460-320v-320L300-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.hoverable {\n --graupl-navigation-shelf-hover-toggle-content: var(\n --graupl-navigation-shelf-hover-toggle-disable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M468-240q-96-5-162-74t-66-166q0-100 70-170t170-70q97 0 166 66t74 162l-84-25q-13-54-56-88.5T480-640q-66 0-113 47t-47 113q0 57 34.5 100t88.5 56l25 84ZM821-60 650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.not-hoverable {\n --graupl-navigation-shelf-hover-toggle-content: var(\n --graupl-navigation-shelf-hover-toggle-enable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.hide {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n display: var(--graupl-navigation-shelf-closed-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n transform: var(--graupl-navigation-shelf-closed-transform, );\n opacity: var(--graupl-navigation-shelf-closed-opacity, 1);\n}\n.navigation-shelf.transitioning {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n display: var(--graupl-navigation-shelf-transitioning-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n transform: var(--graupl-navigation-shelf-transitioning-transform, );\n opacity: var(--graupl-navigation-shelf-transitioning-opacity, 1);\n}\n.navigation-shelf.show {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch));\n display: var(--graupl-navigation-shelf-open-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-max-width, 36ch) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch));\n transform: var(--graupl-navigation-shelf-open-transform, );\n opacity: var(--graupl-navigation-shelf-open-opacity, 1);\n}\n.navigation-shelf .navigation-shelf-header {\n grid-area: header;\n}\n.navigation-shelf .navigation-shelf-content {\n grid-area: content;\n}\n.navigation-shelf .navigation-shelf-footer {\n grid-area: footer;\n}\n.navigation-shelf .navigation-shelf-side-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-side-toggle-content,\n var(\n --graupl-navigation-shelf-side-toggle-shelf-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-side-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-side-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n margin-inline-end: var(--graupl-icon-spacer, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n}\n.navigation-shelf .navigation-shelf-side-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-lock-toggle-content,\n var(\n --graupl-navigation-shelf-lock-toggle-lock-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-lock-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-lock-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n margin-inline-end: var(--graupl-icon-spacer, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-hover-toggle-content,\n var(\n --graupl-navigation-shelf-hover-toggle-enable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-hover-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-hover-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n margin-inline-end: var(--graupl-icon-spacer, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}","@use \"pkg:@graupl/icons/src/component/icon/mixins\" as icon-mixins;\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/mixins/animation\";\n@use \"defaults\";\n@use \"variables\" as *;\n@use \"sass:map\";\n\n@if defaults.$show-warnings and root-defaults.$show-warnings {\n @warn \"The `@graupl/navigation-shelf` component is under active development and is highly experimental. It is not recommended for production use at this time.\";\n}\n\n// `.navigation-shelf`\n#{defaults.$navigation-shelf-selector-base}#{defaults.$navigation-shelf-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-width};\n\n display: $navigation-shelf-display;\n position: fixed;\n z-index: $navigation-shelf-z-index;\n top: 0;\n bottom: 0;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-width [footer-end content-end header-end];\n grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];\n width: $navigation-shelf-width;\n overflow-x: hidden;\n transform: $navigation-shelf-transform;\n transition: $navigation-shelf-transition;\n border-width: $navigation-shelf-border-width;\n border-style: $navigation-shelf-border-style;\n border-color: $navigation-shelf-border-color;\n opacity: $navigation-shelf-opacity;\n background: $navigation-shelf-background;\n color: $navigation-shelf-color;\n isolation: isolate;\n\n @starting-style {\n display: $navigation-shelf-starting-display;\n width: $navigation-shelf-starting-width;\n transform: $navigation-shelf-starting-transform;\n opacity: $navigation-shelf-starting-opacity;\n }\n\n // &.initializing\n &#{defaults.$navigation-shelf-initializing-selector-base}#{defaults.$navigation-shelf-initializing-selector} {\n --#{root-defaults.$prefix}navigation-shelf-transition: #{$navigation-shelf-transition-initializing};\n }\n\n @include animation.off {\n --#{root-defaults.$prefix}navigation-shelf-transition: #{$navigation-shelf-transition-reduced-motion};\n }\n\n // `&,`\n // `&.left-side`\n &,\n &#{defaults.$navigation-shelf-side-selector-base}#{defaults.$navigation-shelf-left-side-selector}#{defaults.$navigation-shelf-side-selector-suffix} {\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-right\")}\n );\n\n right: auto;\n left: 0;\n\n // `&.locked`\n &#{defaults.$navigation-shelf-locked-selector-base}#{defaults.$navigation-shelf-locked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-unlock-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"unlock-right\")}\n );\n }\n\n // `&.unlocked`\n &#{defaults.$navigation-shelf-unlocked-selector-base}#{defaults.$navigation-shelf-unlocked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-right\")}\n );\n }\n }\n\n // `&.right-side`\n &#{defaults.$navigation-shelf-side-selector-base}#{defaults.$navigation-shelf-right-side-selector}#{defaults.$navigation-shelf-side-selector-suffix} {\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-left\")}\n );\n\n right: 0;\n left: auto;\n\n // `&.locked`\n &#{defaults.$navigation-shelf-locked-selector-base}#{defaults.$navigation-shelf-locked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-unlock-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"unlock-left\")}\n );\n }\n\n // `&.unlocked`\n &#{defaults.$navigation-shelf-unlocked-selector-base}#{defaults.$navigation-shelf-unlocked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-left\")}\n );\n }\n }\n\n // `&.hoverable`\n &#{defaults.$navigation-shelf-hoverable-selector-base}#{defaults.$navigation-shelf-hoverable-selector} {\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-disable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"disable-hover\")}\n );\n }\n\n // `&.not-hoverable`\n &#{defaults.$navigation-shelf-not-hoverable-selector-base}#{defaults.$navigation-shelf-not-hoverable-selector} {\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-enable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"enable-hover\")}\n );\n }\n\n // `&.hide`\n &#{defaults.$navigation-shelf-closed-selector-base}#{defaults.$navigation-shelf-closed-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-closed-width};\n\n display: $navigation-shelf-closed-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-closed-width [footer-end content-end header-end];\n width: $navigation-shelf-closed-width;\n transform: $navigation-shelf-closed-transform;\n opacity: $navigation-shelf-closed-opacity;\n }\n\n // `&.transitioning`\n &#{defaults.$navigation-shelf-transitioning-selector-base}#{defaults.$navigation-shelf-transitioning-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-transitioning-width};\n\n display: $navigation-shelf-transitioning-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-transitioning-width [footer-end content-end header-end];\n width: $navigation-shelf-transitioning-width;\n transform: $navigation-shelf-transitioning-transform;\n opacity: $navigation-shelf-transitioning-opacity;\n }\n\n // `&.show`\n &#{defaults.$navigation-shelf-open-selector-base}#{defaults.$navigation-shelf-open-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-open-width};\n\n display: $navigation-shelf-open-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-max-width [footer-end content-end header-end];\n width: $navigation-shelf-open-width;\n transform: $navigation-shelf-open-transform;\n opacity: $navigation-shelf-open-opacity;\n }\n\n // `.navigation-shelf-header`\n #{defaults.$navigation-shelf-header-selector-base}#{defaults.$navigation-shelf-header-selector} {\n grid-area: header;\n }\n\n // `.navigation-shelf-content`\n #{defaults.$navigation-shelf-content-selector-base}#{defaults.$navigation-shelf-content-selector} {\n grid-area: content;\n }\n\n // `.navigation-shelf-footer`\n #{defaults.$navigation-shelf-footer-selector-base}#{defaults.$navigation-shelf-footer-selector} {\n grid-area: footer;\n }\n\n // `.navigation-shelf-side-toggle`\n #{defaults.$navigation-shelf-side-toggle-selector-base}#{defaults.$navigation-shelf-side-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-right\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-side-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-side-toggle-pseudo-element}\n );\n }\n\n // `.navigation-shelf-lock-toggle`\n #{defaults.$navigation-shelf-lock-toggle-selector-base}#{defaults.$navigation-shelf-lock-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-right\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-lock-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-lock-toggle-pseudo-element}\n );\n }\n\n // `.navigation-shelf-hover-toggle`\n #{defaults.$navigation-shelf-hover-toggle-selector-base}#{defaults.$navigation-shelf-hover-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-enable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"enable-hover\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-hover-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-hover-toggle-pseudo-element}\n );\n }\n}\n","// @graupl/navigation-shelf navigation shelf component variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/variables\" as root-variables;\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"sass:map\";\n\n// Navigation shelf properties.\n$navigation-shelf-background: var(\n --#{root-defaults.$prefix}navigation-shelf-background,\n #{color.$background}\n);\n$navigation-shelf-color: var(\n --#{root-defaults.$prefix}navigation-shelf-color,\n #{color.$color}\n);\n$navigation-shelf-z-index: var(\n --#{root-defaults.$prefix}navigation-shelf-z-index,\n #{defaults.$navigation-shelf-z-index}\n);\n\n// Border properties.\n$navigation-shelf-border-top-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-top-style,\n #{root-variables.$border-top-style}\n);\n$navigation-shelf-border-right-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-right-style,\n #{root-variables.$border-right-style}\n);\n$navigation-shelf-border-bottom-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n$navigation-shelf-border-left-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-left-style,\n #{root-variables.$border-left-style}\n);\n$navigation-shelf-border-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-style,\n #{$navigation-shelf-border-top-style} #{$navigation-shelf-border-right-style}\n #{$navigation-shelf-border-bottom-style}\n #{$navigation-shelf-border-left-style}\n);\n$navigation-shelf-border-top-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-top-width,\n 0\n);\n$navigation-shelf-border-right-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-right-width,\n 0\n);\n$navigation-shelf-border-bottom-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-bottom-width,\n 0\n);\n$navigation-shelf-border-left-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-left-width,\n 0\n);\n$navigation-shelf-border-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-width,\n #{$navigation-shelf-border-top-width} #{$navigation-shelf-border-right-width}\n #{$navigation-shelf-border-bottom-width}\n #{$navigation-shelf-border-left-width}\n);\n$navigation-shelf-border-color: var(\n --#{root-defaults.$prefix}navigation-shelf-border-color,\n #{$navigation-shelf-color}\n);\n\n// Transform properties.\n$navigation-shelf-closed-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-transform,\n null\n);\n$navigation-shelf-open-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-open-transform,\n null\n);\n$navigation-shelf-transitioning-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-transform,\n null\n);\n$navigation-shelf-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-transform,\n #{$navigation-shelf-closed-transform}\n);\n$navigation-shelf-starting-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-transform,\n #{$navigation-shelf-transform}\n);\n\n// Width properties.\n$navigation-shelf-min-width: var(\n --#{root-defaults.$prefix}navigation-shelf-min-width,\n #{defaults.$navigation-shelf-min-width}\n);\n$navigation-shelf-max-width: var(\n --#{root-defaults.$prefix}navigation-shelf-max-width,\n #{defaults.$navigation-shelf-max-width}\n);\n$navigation-shelf-closed-width: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-width,\n #{$navigation-shelf-min-width}\n);\n$navigation-shelf-open-width: var(\n --#{root-defaults.$prefix}navigation-shelf-open-width,\n #{$navigation-shelf-max-width}\n);\n$navigation-shelf-transitioning-width: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-width,\n #{$navigation-shelf-min-width}\n);\n$navigation-shelf-width: var(\n --#{root-defaults.$prefix}navigation-shelf-width,\n #{$navigation-shelf-closed-width}\n);\n$navigation-shelf-starting-width: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-width,\n #{$navigation-shelf-width}\n);\n$navigation-shelf-current-width: var(\n --#{root-defaults.$prefix}navigation-shelf-current-width,\n #{$navigation-shelf-width}\n);\n\n// Display properties.\n$navigation-shelf-closed-display: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-display,\n grid\n);\n$navigation-shelf-open-display: var(\n --#{root-defaults.$prefix}navigation-shelf-open-display,\n grid\n);\n$navigation-shelf-transitioning-display: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-display,\n grid\n);\n$navigation-shelf-display: var(\n --#{root-defaults.$prefix}navigation-shelf-display,\n #{$navigation-shelf-closed-display}\n);\n$navigation-shelf-starting-display: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-display,\n #{$navigation-shelf-display}\n);\n\n// Opacity properties.\n$navigation-shelf-closed-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-opacity,\n 1\n);\n$navigation-shelf-open-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-open-opacity,\n 1\n);\n$navigation-shelf-transitioning-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-opacity,\n 1\n);\n$navigation-shelf-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-opacity,\n #{$navigation-shelf-closed-opacity}\n);\n$navigation-shelf-starting-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-opacity,\n #{$navigation-shelf-opacity}\n);\n\n// Transition properties.\n$navigation-shelf-transition-duration: var(\n --#{root-defaults.$prefix}navigation-shelf-transition-duration,\n #{map.get(root-variables.$transition-durations, fast)}\n);\n$navigation-shelf-transition: var(\n --#{root-defaults.$prefix}navigation-shelf-transition,\n width #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n transform #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n opacity #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n display #{$navigation-shelf-transition-duration} allow-discrete\n);\n$navigation-shelf-transition-initializing: (\n --#{root-defaults.$prefix}navigation-shelf-transition-initializing,\n none\n);\n$navigation-shelf-transition-reduced-motion: var(\n --#{root-defaults.$prefix}navigation-shelf-transition-reduced-motion,\n opacity #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n display #{$navigation-shelf-transition-duration} allow-discrete\n);\n","// @graupl/core animation media query mixins.\n\n// A media query for targeting users who have not requested reduced motion.\n@mixin on {\n @media (prefers-reduced-motion: no-preference) {\n @content;\n }\n}\n\n// A media query for targeting users who have requested reduced motion.\n@mixin off {\n @media (prefers-reduced-motion: reduce) {\n @content;\n }\n}\n","// @graupl/icons icon mixins.\n\n@use \"variables\" as *;\n\n@mixin _component() {\n display: $icon-display;\n width: $icon-width;\n height: $icon-height;\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: $icon;\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n}\n\n@mixin _theme() {\n background-color: $icon-color;\n}\n\n@mixin apply-component($target: \"self\") {\n @if $target == \"before\" {\n &::before {\n @include _component;\n\n content: \"\";\n margin-inline-end: $icon-spacer;\n }\n } @else if $target == \"after\" {\n &::after {\n @include _component;\n\n content: \"\";\n margin-inline-start: $icon-spacer;\n }\n } @else {\n @include _component;\n\n margin-inline: $icon-spacer $icon-spacer;\n }\n}\n\n@mixin apply-theme($target: \"self\") {\n @if $target == \"before\" {\n &::before {\n @include _theme;\n }\n } @else if $target == \"after\" {\n &::after {\n @include _theme;\n }\n } @else {\n @include _theme;\n }\n}\n\n@mixin apply($target: \"self\") {\n @include apply-component($target);\n @include apply-theme($target);\n}\n","// @graupl/icons icon componet variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"pkg:@graupl/core/src/variables\" as root-variables;\n@use \"sass:map\";\n\n$icon-display: var(\n --#{root-defaults.$prefix}icon-display,\n #{defaults.$icon-display}\n);\n$icon-size: var(--#{root-defaults.$prefix}icon-size, #{defaults.$icon-size});\n$icon-width: var(--#{root-defaults.$prefix}icon-width, #{$icon-size});\n$icon-height: var(--#{root-defaults.$prefix}icon-height, #{$icon-size});\n$icon-color: var(--#{root-defaults.$prefix}icon-color, #{color.$color});\n$icon: var(--#{root-defaults.$prefix}icon, none);\n$icon-spacer: var(\n --#{root-defaults.$prefix}icon-spacer,\n #{map.get(root-variables.$spacers, 2)}\n);\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACYA,kkGAsBE,gBAtBF,goBA8BE,2HE/BA,uCFCF,0XAwCE,ygBAWE,oiBAQA,qiBASF,ufAUE,0gBAQA,2gBASF,mgBAQA,+mBAQA,0mBAWA,6pBAWA,8iBAWA,4DAKA,8DAKA,4DAKA,qlBG1JA,4aEuBE,gMAAA,wMAAA,iMFOF,kQHkJA,2mBGhLA,4aEuBE,gMAAA,wMAAA,iMFOF,kQHwKA,6tBGtMA,6aEuBE,iMAAA,yMAAA,kMFOF","sources":["dist/css/component.css","var/www/html/packages/navigation-shelf/src/scss/component/navigation-shelf/_index.scss","var/www/html/packages/navigation-shelf/src/scss/component/navigation-shelf/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_animation.scss","var/www/html/node_modules/@graupl/icons/src/scss/component/icon/_mixins.scss","var/www/html/node_modules/@graupl/icons/src/scss/component/icon/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_theme.scss"],"sourcesContent":[".navigation-shelf {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)));\n display: var(--graupl-navigation-shelf-display, var(--graupl-navigation-shelf-closed-display, grid));\n position: fixed;\n z-index: var(--graupl-navigation-shelf-z-index, 2);\n top: 0;\n bottom: 0;\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem))) [footer-end content-end header-end];\n grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];\n width: var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)));\n overflow-x: hidden;\n transform: var(--graupl-navigation-shelf-transform, var(--graupl-navigation-shelf-closed-transform, ));\n transition: var(--graupl-navigation-shelf-transition, width var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), transform var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), opacity var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), display var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) allow-discrete);\n border-width: var(--graupl-navigation-shelf-border-width, var(--graupl-navigation-shelf-border-top-width, 0) var(--graupl-navigation-shelf-border-right-width, 0) var(--graupl-navigation-shelf-border-bottom-width, 0) var(--graupl-navigation-shelf-border-left-width, 0));\n border-style: var(--graupl-navigation-shelf-border-style, var(--graupl-navigation-shelf-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-color: var(--graupl-navigation-shelf-border-color, var(--graupl-navigation-shelf-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n opacity: var(--graupl-navigation-shelf-opacity, var(--graupl-navigation-shelf-closed-opacity, 1));\n background: var(--graupl-navigation-shelf-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-navigation-shelf-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n isolation: isolate;\n}\n@starting-style {\n .navigation-shelf {\n display: var(--graupl-navigation-shelf-starting-display, var(--graupl-navigation-shelf-display, var(--graupl-navigation-shelf-closed-display, grid)));\n width: var(--graupl-navigation-shelf-starting-width, var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem))));\n transform: var(--graupl-navigation-shelf-starting-transform, var(--graupl-navigation-shelf-transform, var(--graupl-navigation-shelf-closed-transform, )));\n opacity: var(--graupl-navigation-shelf-starting-opacity, var(--graupl-navigation-shelf-opacity, var(--graupl-navigation-shelf-closed-opacity, 1)));\n }\n}\n.navigation-shelf.initializing {\n --graupl-navigation-shelf-transition: --graupl-navigation-shelf-transition-initializing, none;\n}\n@media (prefers-reduced-motion: reduce) {\n .navigation-shelf {\n --graupl-navigation-shelf-transition: var(--graupl-navigation-shelf-transition-reduced-motion, opacity var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), display var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) allow-discrete);\n }\n}\n.navigation-shelf, .navigation-shelf.left-side {\n --graupl-navigation-shelf-side-toggle-content: var(\n --graupl-navigation-shelf-side-toggle-shelf-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n right: auto;\n left: 0;\n}\n.navigation-shelf.locked, .navigation-shelf.left-side.locked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-unlock-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.unlocked, .navigation-shelf.left-side.unlocked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-lock-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.right-side {\n --graupl-navigation-shelf-side-toggle-content: var(\n --graupl-navigation-shelf-side-toggle-shelf-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n right: 0;\n left: auto;\n}\n.navigation-shelf.right-side.locked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-unlock-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M300-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.right-side.unlocked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-lock-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M460-320v-320L300-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.hoverable {\n --graupl-navigation-shelf-hover-toggle-content: var(\n --graupl-navigation-shelf-hover-toggle-disable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M468-240q-96-5-162-74t-66-166q0-100 70-170t170-70q97 0 166 66t74 162l-84-25q-13-54-56-88.5T480-640q-66 0-113 47t-47 113q0 57 34.5 100t88.5 56l25 84ZM821-60 650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.not-hoverable {\n --graupl-navigation-shelf-hover-toggle-content: var(\n --graupl-navigation-shelf-hover-toggle-enable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.hide {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n display: var(--graupl-navigation-shelf-closed-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n transform: var(--graupl-navigation-shelf-closed-transform, );\n opacity: var(--graupl-navigation-shelf-closed-opacity, 1);\n}\n.navigation-shelf.transitioning {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n display: var(--graupl-navigation-shelf-transitioning-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n transform: var(--graupl-navigation-shelf-transitioning-transform, );\n opacity: var(--graupl-navigation-shelf-transitioning-opacity, 1);\n}\n.navigation-shelf.show {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch));\n display: var(--graupl-navigation-shelf-open-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-max-width, 36ch) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch));\n transform: var(--graupl-navigation-shelf-open-transform, );\n opacity: var(--graupl-navigation-shelf-open-opacity, 1);\n}\n.navigation-shelf .navigation-shelf-header {\n grid-area: header;\n}\n.navigation-shelf .navigation-shelf-content {\n grid-area: content;\n}\n.navigation-shelf .navigation-shelf-footer {\n grid-area: footer;\n}\n.navigation-shelf .navigation-shelf-side-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-side-toggle-content,\n var(\n --graupl-navigation-shelf-side-toggle-shelf-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-side-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-side-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n}\n.navigation-shelf .navigation-shelf-side-toggle.primary {\n --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n}\n.navigation-shelf .navigation-shelf-side-toggle.secondary {\n --graupl-icon-color: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n}\n.navigation-shelf .navigation-shelf-side-toggle.tertiary {\n --graupl-icon-color: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n}\n.navigation-shelf .navigation-shelf-side-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-lock-toggle-content,\n var(\n --graupl-navigation-shelf-lock-toggle-lock-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-lock-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-lock-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n}\n.navigation-shelf .navigation-shelf-lock-toggle.primary {\n --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle.secondary {\n --graupl-icon-color: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle.tertiary {\n --graupl-icon-color: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-hover-toggle-content,\n var(\n --graupl-navigation-shelf-hover-toggle-enable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-hover-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-hover-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n}\n.navigation-shelf .navigation-shelf-hover-toggle.primary {\n --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle.secondary {\n --graupl-icon-color: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle.tertiary {\n --graupl-icon-color: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}","@use \"pkg:@graupl/icons/src/component/icon/mixins\" as icon-mixins;\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/mixins/animation\";\n@use \"defaults\";\n@use \"variables\" as *;\n@use \"sass:map\";\n\n@if defaults.$show-warnings and root-defaults.$show-warnings {\n @warn \"The `@graupl/navigation-shelf` component is under active development and is highly experimental. It is not recommended for production use at this time.\";\n}\n\n// `.navigation-shelf`\n#{defaults.$navigation-shelf-selector-base}#{defaults.$navigation-shelf-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-width};\n\n display: $navigation-shelf-display;\n position: fixed;\n z-index: $navigation-shelf-z-index;\n top: 0;\n bottom: 0;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-width [footer-end content-end header-end];\n grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];\n width: $navigation-shelf-width;\n overflow-x: hidden;\n transform: $navigation-shelf-transform;\n transition: $navigation-shelf-transition;\n border-width: $navigation-shelf-border-width;\n border-style: $navigation-shelf-border-style;\n border-color: $navigation-shelf-border-color;\n opacity: $navigation-shelf-opacity;\n background: $navigation-shelf-background;\n color: $navigation-shelf-color;\n isolation: isolate;\n\n @starting-style {\n display: $navigation-shelf-starting-display;\n width: $navigation-shelf-starting-width;\n transform: $navigation-shelf-starting-transform;\n opacity: $navigation-shelf-starting-opacity;\n }\n\n // &.initializing\n &#{defaults.$navigation-shelf-initializing-selector-base}#{defaults.$navigation-shelf-initializing-selector} {\n --#{root-defaults.$prefix}navigation-shelf-transition: #{$navigation-shelf-transition-initializing};\n }\n\n @include animation.off {\n --#{root-defaults.$prefix}navigation-shelf-transition: #{$navigation-shelf-transition-reduced-motion};\n }\n\n // `&,`\n // `&.left-side`\n &,\n &#{defaults.$navigation-shelf-side-selector-base}#{defaults.$navigation-shelf-left-side-selector}#{defaults.$navigation-shelf-side-selector-suffix} {\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-right\")}\n );\n\n right: auto;\n left: 0;\n\n // `&.locked`\n &#{defaults.$navigation-shelf-locked-selector-base}#{defaults.$navigation-shelf-locked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-unlock-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"unlock-right\")}\n );\n }\n\n // `&.unlocked`\n &#{defaults.$navigation-shelf-unlocked-selector-base}#{defaults.$navigation-shelf-unlocked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-right\")}\n );\n }\n }\n\n // `&.right-side`\n &#{defaults.$navigation-shelf-side-selector-base}#{defaults.$navigation-shelf-right-side-selector}#{defaults.$navigation-shelf-side-selector-suffix} {\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-left\")}\n );\n\n right: 0;\n left: auto;\n\n // `&.locked`\n &#{defaults.$navigation-shelf-locked-selector-base}#{defaults.$navigation-shelf-locked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-unlock-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"unlock-left\")}\n );\n }\n\n // `&.unlocked`\n &#{defaults.$navigation-shelf-unlocked-selector-base}#{defaults.$navigation-shelf-unlocked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-left\")}\n );\n }\n }\n\n // `&.hoverable`\n &#{defaults.$navigation-shelf-hoverable-selector-base}#{defaults.$navigation-shelf-hoverable-selector} {\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-disable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"disable-hover\")}\n );\n }\n\n // `&.not-hoverable`\n &#{defaults.$navigation-shelf-not-hoverable-selector-base}#{defaults.$navigation-shelf-not-hoverable-selector} {\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-enable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"enable-hover\")}\n );\n }\n\n // `&.hide`\n &#{defaults.$navigation-shelf-closed-selector-base}#{defaults.$navigation-shelf-closed-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-closed-width};\n\n display: $navigation-shelf-closed-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-closed-width [footer-end content-end header-end];\n width: $navigation-shelf-closed-width;\n transform: $navigation-shelf-closed-transform;\n opacity: $navigation-shelf-closed-opacity;\n }\n\n // `&.transitioning`\n &#{defaults.$navigation-shelf-transitioning-selector-base}#{defaults.$navigation-shelf-transitioning-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-transitioning-width};\n\n display: $navigation-shelf-transitioning-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-transitioning-width [footer-end content-end header-end];\n width: $navigation-shelf-transitioning-width;\n transform: $navigation-shelf-transitioning-transform;\n opacity: $navigation-shelf-transitioning-opacity;\n }\n\n // `&.show`\n &#{defaults.$navigation-shelf-open-selector-base}#{defaults.$navigation-shelf-open-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-open-width};\n\n display: $navigation-shelf-open-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-max-width [footer-end content-end header-end];\n width: $navigation-shelf-open-width;\n transform: $navigation-shelf-open-transform;\n opacity: $navigation-shelf-open-opacity;\n }\n\n // `.navigation-shelf-header`\n #{defaults.$navigation-shelf-header-selector-base}#{defaults.$navigation-shelf-header-selector} {\n grid-area: header;\n }\n\n // `.navigation-shelf-content`\n #{defaults.$navigation-shelf-content-selector-base}#{defaults.$navigation-shelf-content-selector} {\n grid-area: content;\n }\n\n // `.navigation-shelf-footer`\n #{defaults.$navigation-shelf-footer-selector-base}#{defaults.$navigation-shelf-footer-selector} {\n grid-area: footer;\n }\n\n // `.navigation-shelf-side-toggle`\n #{defaults.$navigation-shelf-side-toggle-selector-base}#{defaults.$navigation-shelf-side-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-right\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-side-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-side-toggle-pseudo-element}\n );\n }\n\n // `.navigation-shelf-lock-toggle`\n #{defaults.$navigation-shelf-lock-toggle-selector-base}#{defaults.$navigation-shelf-lock-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-right\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-lock-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-lock-toggle-pseudo-element}\n );\n }\n\n // `.navigation-shelf-hover-toggle`\n #{defaults.$navigation-shelf-hover-toggle-selector-base}#{defaults.$navigation-shelf-hover-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-enable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"enable-hover\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-hover-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-hover-toggle-pseudo-element}\n );\n }\n}\n","// @graupl/navigation-shelf navigation shelf component variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/variables\" as root-variables;\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"sass:map\";\n\n// Navigation shelf properties.\n$navigation-shelf-background: var(\n --#{root-defaults.$prefix}navigation-shelf-background,\n #{color.$background}\n);\n$navigation-shelf-color: var(\n --#{root-defaults.$prefix}navigation-shelf-color,\n #{color.$color}\n);\n$navigation-shelf-z-index: var(\n --#{root-defaults.$prefix}navigation-shelf-z-index,\n #{defaults.$navigation-shelf-z-index}\n);\n\n// Border properties.\n$navigation-shelf-border-top-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-top-style,\n #{root-variables.$border-top-style}\n);\n$navigation-shelf-border-right-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-right-style,\n #{root-variables.$border-right-style}\n);\n$navigation-shelf-border-bottom-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n$navigation-shelf-border-left-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-left-style,\n #{root-variables.$border-left-style}\n);\n$navigation-shelf-border-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-style,\n #{$navigation-shelf-border-top-style} #{$navigation-shelf-border-right-style}\n #{$navigation-shelf-border-bottom-style}\n #{$navigation-shelf-border-left-style}\n);\n$navigation-shelf-border-top-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-top-width,\n 0\n);\n$navigation-shelf-border-right-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-right-width,\n 0\n);\n$navigation-shelf-border-bottom-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-bottom-width,\n 0\n);\n$navigation-shelf-border-left-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-left-width,\n 0\n);\n$navigation-shelf-border-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-width,\n #{$navigation-shelf-border-top-width} #{$navigation-shelf-border-right-width}\n #{$navigation-shelf-border-bottom-width}\n #{$navigation-shelf-border-left-width}\n);\n$navigation-shelf-border-color: var(\n --#{root-defaults.$prefix}navigation-shelf-border-color,\n #{$navigation-shelf-color}\n);\n\n// Transform properties.\n$navigation-shelf-closed-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-transform,\n null\n);\n$navigation-shelf-open-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-open-transform,\n null\n);\n$navigation-shelf-transitioning-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-transform,\n null\n);\n$navigation-shelf-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-transform,\n #{$navigation-shelf-closed-transform}\n);\n$navigation-shelf-starting-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-transform,\n #{$navigation-shelf-transform}\n);\n\n// Width properties.\n$navigation-shelf-min-width: var(\n --#{root-defaults.$prefix}navigation-shelf-min-width,\n #{defaults.$navigation-shelf-min-width}\n);\n$navigation-shelf-max-width: var(\n --#{root-defaults.$prefix}navigation-shelf-max-width,\n #{defaults.$navigation-shelf-max-width}\n);\n$navigation-shelf-closed-width: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-width,\n #{$navigation-shelf-min-width}\n);\n$navigation-shelf-open-width: var(\n --#{root-defaults.$prefix}navigation-shelf-open-width,\n #{$navigation-shelf-max-width}\n);\n$navigation-shelf-transitioning-width: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-width,\n #{$navigation-shelf-min-width}\n);\n$navigation-shelf-width: var(\n --#{root-defaults.$prefix}navigation-shelf-width,\n #{$navigation-shelf-closed-width}\n);\n$navigation-shelf-starting-width: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-width,\n #{$navigation-shelf-width}\n);\n$navigation-shelf-current-width: var(\n --#{root-defaults.$prefix}navigation-shelf-current-width,\n #{$navigation-shelf-width}\n);\n\n// Display properties.\n$navigation-shelf-closed-display: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-display,\n grid\n);\n$navigation-shelf-open-display: var(\n --#{root-defaults.$prefix}navigation-shelf-open-display,\n grid\n);\n$navigation-shelf-transitioning-display: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-display,\n grid\n);\n$navigation-shelf-display: var(\n --#{root-defaults.$prefix}navigation-shelf-display,\n #{$navigation-shelf-closed-display}\n);\n$navigation-shelf-starting-display: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-display,\n #{$navigation-shelf-display}\n);\n\n// Opacity properties.\n$navigation-shelf-closed-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-opacity,\n 1\n);\n$navigation-shelf-open-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-open-opacity,\n 1\n);\n$navigation-shelf-transitioning-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-opacity,\n 1\n);\n$navigation-shelf-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-opacity,\n #{$navigation-shelf-closed-opacity}\n);\n$navigation-shelf-starting-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-opacity,\n #{$navigation-shelf-opacity}\n);\n\n// Transition properties.\n$navigation-shelf-transition-duration: var(\n --#{root-defaults.$prefix}navigation-shelf-transition-duration,\n #{map.get(root-variables.$transition-durations, fast)}\n);\n$navigation-shelf-transition: var(\n --#{root-defaults.$prefix}navigation-shelf-transition,\n width #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n transform #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n opacity #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n display #{$navigation-shelf-transition-duration} allow-discrete\n);\n$navigation-shelf-transition-initializing: (\n --#{root-defaults.$prefix}navigation-shelf-transition-initializing,\n none\n);\n$navigation-shelf-transition-reduced-motion: var(\n --#{root-defaults.$prefix}navigation-shelf-transition-reduced-motion,\n opacity #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n display #{$navigation-shelf-transition-duration} allow-discrete\n);\n","// @graupl/core animation media query mixins.\n\n// A media query for targeting users who have not requested reduced motion.\n@mixin on {\n @media (prefers-reduced-motion: no-preference) {\n @content;\n }\n}\n\n// A media query for targeting users who have requested reduced motion.\n@mixin off {\n @media (prefers-reduced-motion: reduce) {\n @content;\n }\n}\n","// @graupl/icons icon mixins.\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/mixins/state\";\n@use \"pkg:@graupl/core/src/mixins/theme\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n$-targets: (\n \"self\": \"&\",\n \"before\": \"&::before\",\n \"after\": \"&::after\",\n);\n\n/// Mixin to apply component styles for icons.\n@mixin apply-component($target: \"self\") {\n #{map.get($-targets, $target)} {\n display: $icon-display;\n width: $icon-width;\n height: $icon-height;\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: $icon;\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n\n @if $target == \"before\" or $target == \"after\" {\n content: \"\";\n }\n }\n}\n\n/// Mixin to apply theme styles for icons.\n@mixin apply-theme($target: \"self\") {\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$icon-theme-map,\n defaults.$icon-theme-selector-base,\n defaults.$icon-theme-selector-prefix,\n \"icon-\"\n );\n }\n\n #{map.get($-targets, $target)} {\n background-color: $icon-color;\n }\n}\n\n/// Mixin to bind icon colors to a component.\n///\n/// @param {CustomProperty} $color - The default color prop for the icon.\n/// @param {Map} $states - A map of states and color props for the icon.\n@mixin bind($color, $states) {\n --#{root-defaults.$prefix}icon-color: #{$color};\n\n @include state.generate-modifiers(\n (--#{root-defaults.$prefix}icon-color: $states)\n );\n}\n\n@mixin apply($target: \"self\") {\n @include apply-component($target);\n @include apply-theme($target);\n}\n","// @graupl/icons icon componet variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Property | Default |\n// | ------------------------- | ------------------------- |\n// | --graupl-icon-display | inline-block |\n// | --graupl-icon-size | 1.25em |\n// | --graupl-icon-width | var(--graupl-icon-size) |\n// | --graupl-icon-height | var(--graupl-icon-size) |\n// | --graupl-icon-color | var(--graupl-color) |\n// | --graupl-icon | none |\n// | --graupl-icon-spacer | var(--graupl-spacer-2) |\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"pkg:@graupl/core/src/variables\" as root-variables;\n@use \"sass:map\";\n\n$icon-display: var(\n --#{root-defaults.$prefix}icon-display,\n #{defaults.$icon-display}\n);\n$icon-size: var(--#{root-defaults.$prefix}icon-size, #{defaults.$icon-size});\n$icon-width: var(--#{root-defaults.$prefix}icon-width, #{$icon-size});\n$icon-height: var(--#{root-defaults.$prefix}icon-height, #{$icon-size});\n$icon-color: var(--#{root-defaults.$prefix}icon-color, #{color.$color});\n$icon: var(--#{root-defaults.$prefix}icon, none);\n$icon-spacer: var(\n --#{root-defaults.$prefix}icon-spacer,\n #{map.get(root-variables.$spacers, 2)}\n);\n","// @graupl/core theme mixins.\n//\n// A series of mixins to tie styles to a theme-mode.\n\n@use \"../functions/theme\";\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies styles to a specific theme mode.\n///\n/// @param {string} $theme-name\n/// The name of the theme mode to apply the styles to.\n@mixin theme($theme-name) {\n #{color-defaults.$theme-selector-base}#{color-defaults.$theme-selector-prefix}#{$theme-name}#{color-defaults.$theme-selector-suffix} {\n @content;\n }\n}\n\n/// Generates a theme modifiers with custom props.\n///\n/// @param {map} $theme-map\n/// The map of custom props.\n/// @param {string} $selector-base\n/// The selector base for the theme modifier.\n/// @param {string} $selector-prefix\n/// The selector prefix for the theme modifer.\n/// @param {string} $scope\n/// The scope of the custom properties.\n/// @param {string} $base\n/// The base selector to append the theme modifier to.\n@mixin generate-modifiers(\n $theme-map,\n $selector-base,\n $selector-prefix,\n $scope: \"\",\n $base: \"&\"\n) {\n @each $color, $map in $theme-map {\n // e.g. &.primary, &.secondary, &.tertiary\n #{$base}#{$selector-base}#{$selector-prefix}#{$color} {\n @each $prop, $value in $map {\n --#{root-defaults.$prefix}#{$scope}#{$prop}: #{theme.get(\n map.get($value, color),\n map.get($value, shade)\n )};\n }\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.navigation-shelf{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)));display:var(--graupl-navigation-shelf-display,var(--graupl-navigation-shelf-closed-display,grid));z-index:var(--graupl-navigation-shelf-z-index,2);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)))[footer-end content-end header-end];width:var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)));transform:var(--graupl-navigation-shelf-transform,var(--graupl-navigation-shelf-closed-transform, ));transition:var(--graupl-navigation-shelf-transition,width var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),transform var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),opacity var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),display var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))allow-discrete);border-width:var(--graupl-navigation-shelf-border-width,var(--graupl-navigation-shelf-border-top-width,0)var(--graupl-navigation-shelf-border-right-width,0)var(--graupl-navigation-shelf-border-bottom-width,0)var(--graupl-navigation-shelf-border-left-width,0));border-style:var(--graupl-navigation-shelf-border-style,var(--graupl-navigation-shelf-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-navigation-shelf-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-navigation-shelf-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-navigation-shelf-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-color:var(--graupl-navigation-shelf-border-color,var(--graupl-navigation-shelf-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));opacity:var(--graupl-navigation-shelf-opacity,var(--graupl-navigation-shelf-closed-opacity,1));background:var(--graupl-navigation-shelf-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-navigation-shelf-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));isolation:isolate;grid-template-rows:[header-start]auto[header-end content-start]1fr[content-end footer-start]auto[footer-end];position:fixed;top:0;bottom:0;overflow-x:hidden}@starting-style{.navigation-shelf{display:var(--graupl-navigation-shelf-starting-display,var(--graupl-navigation-shelf-display,var(--graupl-navigation-shelf-closed-display,grid)));width:var(--graupl-navigation-shelf-starting-width,var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))));transform:var(--graupl-navigation-shelf-starting-transform,var(--graupl-navigation-shelf-transform,var(--graupl-navigation-shelf-closed-transform, )));opacity:var(--graupl-navigation-shelf-starting-opacity,var(--graupl-navigation-shelf-opacity,var(--graupl-navigation-shelf-closed-opacity,1)))}}.navigation-shelf.initializing{--graupl-navigation-shelf-transition:--graupl-navigation-shelf-transition-initializing,none}@media (prefers-reduced-motion:reduce){.navigation-shelf{--graupl-navigation-shelf-transition:var(--graupl-navigation-shelf-transition-reduced-motion,opacity var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),display var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))allow-discrete)}}.navigation-shelf,.navigation-shelf.left-side{--graupl-navigation-shelf-side-toggle-content:var(--graupl-navigation-shelf-side-toggle-shelf-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"));left:0;right:auto}.navigation-shelf.locked,.navigation-shelf.left-side.locked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-unlock-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"))}.navigation-shelf.unlocked,.navigation-shelf.left-side.unlocked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-lock-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"))}.navigation-shelf.right-side{--graupl-navigation-shelf-side-toggle-content:var(--graupl-navigation-shelf-side-toggle-shelf-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"));left:auto;right:0}.navigation-shelf.right-side.locked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-unlock-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M300-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"))}.navigation-shelf.right-side.unlocked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-lock-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M460-320v-320L300-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"))}.navigation-shelf.hoverable{--graupl-navigation-shelf-hover-toggle-content:var(--graupl-navigation-shelf-hover-toggle-disable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M468-240q-96-5-162-74t-66-166q0-100 70-170t170-70q97 0 166 66t74 162l-84-25q-13-54-56-88.5T480-640q-66 0-113 47t-47 113q0 57 34.5 100t88.5 56l25 84ZM821-60 650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E"))}.navigation-shelf.not-hoverable{--graupl-navigation-shelf-hover-toggle-content:var(--graupl-navigation-shelf-hover-toggle-enable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E"))}.navigation-shelf.hide{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem));display:var(--graupl-navigation-shelf-closed-display,grid);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))[footer-end content-end header-end];width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem));transform:var(--graupl-navigation-shelf-closed-transform, );opacity:var(--graupl-navigation-shelf-closed-opacity,1)}.navigation-shelf.transitioning{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem));display:var(--graupl-navigation-shelf-transitioning-display,grid);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem))[footer-end content-end header-end];width:var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem));transform:var(--graupl-navigation-shelf-transitioning-transform, );opacity:var(--graupl-navigation-shelf-transitioning-opacity,1)}.navigation-shelf.show{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch));display:var(--graupl-navigation-shelf-open-display,grid);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-max-width,36ch)[footer-end content-end header-end];width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch));transform:var(--graupl-navigation-shelf-open-transform, );opacity:var(--graupl-navigation-shelf-open-opacity,1)}.navigation-shelf .navigation-shelf-header{grid-area:header}.navigation-shelf .navigation-shelf-content{grid-area:content}.navigation-shelf .navigation-shelf-footer{grid-area:footer}.navigation-shelf .navigation-shelf-side-toggle{--graupl-icon:var(--graupl-navigation-shelf-side-toggle-content,var(--graupl-navigation-shelf-side-toggle-shelf-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-side-toggle-spacer,0)}.navigation-shelf .navigation-shelf-side-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-lock-toggle{--graupl-icon:var(--graupl-navigation-shelf-lock-toggle-content,var(--graupl-navigation-shelf-lock-toggle-lock-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-lock-toggle-spacer,0)}.navigation-shelf .navigation-shelf-lock-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-hover-toggle{--graupl-icon:var(--graupl-navigation-shelf-hover-toggle-content,var(--graupl-navigation-shelf-hover-toggle-enable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-hover-toggle-spacer,0)}.navigation-shelf .navigation-shelf-hover-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}@layer graupl.utilities{.shelf-aware{padding-right:0!important;padding-left:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))!important}.shelf-aware.locked{padding-left:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch))!important}.shelf-aware.left-side{padding-right:0!important;padding-left:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))!important}.shelf-aware.left-side.locked{padding-left:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch))!important}.shelf-aware.right-side{padding-right:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))!important;padding-left:0!important}.shelf-aware.right-side.locked{padding-right:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch))!important}.w-shelf-min{width:var(--graupl-navigation-shelf-min-width,3.5rem)!important}.max-w-shelf-min{max-width:var(--graupl-navigation-shelf-min-width,3.5rem)!important}.min-w-shelf-min{min-width:var(--graupl-navigation-shelf-min-width,3.5rem)!important}.w-shelf-max{width:var(--graupl-navigation-shelf-max-width,36ch)!important}.max-w-shelf-max{max-width:var(--graupl-navigation-shelf-max-width,36ch)!important}.min-w-shelf-max{min-width:var(--graupl-navigation-shelf-max-width,36ch)!important}.w-shelf-current{width:var(--graupl-navigation-shelf-current-width,var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))))!important}.max-w-shelf-current{max-width:var(--graupl-navigation-shelf-current-width,var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))))!important}.min-w-shelf-current{min-width:var(--graupl-navigation-shelf-current-width,var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))))!important}.w-shelf-closed{width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))!important}.max-w-shelf-closed{max-width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))!important}.min-w-shelf-closed{min-width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))!important}.w-shelf-open{width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch))!important}.max-w-shelf-open{max-width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch))!important}.min-w-shelf-open{min-width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch))!important}}
|
|
1
|
+
.navigation-shelf{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)));display:var(--graupl-navigation-shelf-display,var(--graupl-navigation-shelf-closed-display,grid));z-index:var(--graupl-navigation-shelf-z-index,2);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)))[footer-end content-end header-end];width:var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem)));transform:var(--graupl-navigation-shelf-transform,var(--graupl-navigation-shelf-closed-transform, ));transition:var(--graupl-navigation-shelf-transition,width var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),transform var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),opacity var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),display var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))allow-discrete);border-width:var(--graupl-navigation-shelf-border-width,var(--graupl-navigation-shelf-border-top-width,0)var(--graupl-navigation-shelf-border-right-width,0)var(--graupl-navigation-shelf-border-bottom-width,0)var(--graupl-navigation-shelf-border-left-width,0));border-style:var(--graupl-navigation-shelf-border-style,var(--graupl-navigation-shelf-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-navigation-shelf-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-navigation-shelf-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-navigation-shelf-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-color:var(--graupl-navigation-shelf-border-color,var(--graupl-navigation-shelf-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));opacity:var(--graupl-navigation-shelf-opacity,var(--graupl-navigation-shelf-closed-opacity,1));background:var(--graupl-navigation-shelf-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-navigation-shelf-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));isolation:isolate;grid-template-rows:[header-start]auto[header-end content-start]1fr[content-end footer-start]auto[footer-end];position:fixed;top:0;bottom:0;overflow-x:hidden}@starting-style{.navigation-shelf{display:var(--graupl-navigation-shelf-starting-display,var(--graupl-navigation-shelf-display,var(--graupl-navigation-shelf-closed-display,grid)));width:var(--graupl-navigation-shelf-starting-width,var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))));transform:var(--graupl-navigation-shelf-starting-transform,var(--graupl-navigation-shelf-transform,var(--graupl-navigation-shelf-closed-transform, )));opacity:var(--graupl-navigation-shelf-starting-opacity,var(--graupl-navigation-shelf-opacity,var(--graupl-navigation-shelf-closed-opacity,1)))}}.navigation-shelf.initializing{--graupl-navigation-shelf-transition:--graupl-navigation-shelf-transition-initializing,none}@media (prefers-reduced-motion:reduce){.navigation-shelf{--graupl-navigation-shelf-transition:var(--graupl-navigation-shelf-transition-reduced-motion,opacity var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-transition-timing-function,ease),display var(--graupl-navigation-shelf-transition-duration,var(--graupl-transition-duration-fast,.15s))allow-discrete)}}.navigation-shelf,.navigation-shelf.left-side{--graupl-navigation-shelf-side-toggle-content:var(--graupl-navigation-shelf-side-toggle-shelf-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"));left:0;right:auto}.navigation-shelf.locked,.navigation-shelf.left-side.locked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-unlock-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"))}.navigation-shelf.unlocked,.navigation-shelf.left-side.unlocked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-lock-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"))}.navigation-shelf.right-side{--graupl-navigation-shelf-side-toggle-content:var(--graupl-navigation-shelf-side-toggle-shelf-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"));left:auto;right:0}.navigation-shelf.right-side.locked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-unlock-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M300-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"))}.navigation-shelf.right-side.unlocked{--graupl-navigation-shelf-lock-toggle-content:var(--graupl-navigation-shelf-lock-toggle-lock-left-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M460-320v-320L300-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"))}.navigation-shelf.hoverable{--graupl-navigation-shelf-hover-toggle-content:var(--graupl-navigation-shelf-hover-toggle-disable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M468-240q-96-5-162-74t-66-166q0-100 70-170t170-70q97 0 166 66t74 162l-84-25q-13-54-56-88.5T480-640q-66 0-113 47t-47 113q0 57 34.5 100t88.5 56l25 84ZM821-60 650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E"))}.navigation-shelf.not-hoverable{--graupl-navigation-shelf-hover-toggle-content:var(--graupl-navigation-shelf-hover-toggle-enable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E"))}.navigation-shelf.hide{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem));display:var(--graupl-navigation-shelf-closed-display,grid);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))[footer-end content-end header-end];width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem));transform:var(--graupl-navigation-shelf-closed-transform, );opacity:var(--graupl-navigation-shelf-closed-opacity,1)}.navigation-shelf.transitioning{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem));display:var(--graupl-navigation-shelf-transitioning-display,grid);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem))[footer-end content-end header-end];width:var(--graupl-navigation-shelf-transitioning-width,var(--graupl-navigation-shelf-min-width,3.5rem));transform:var(--graupl-navigation-shelf-transitioning-transform, );opacity:var(--graupl-navigation-shelf-transitioning-opacity,1)}.navigation-shelf.show{--graupl-navigation-shelf-current-width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch));display:var(--graupl-navigation-shelf-open-display,grid);grid-template-columns:[header-start content-start footer-start]var(--graupl-navigation-shelf-max-width,36ch)[footer-end content-end header-end];width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch));transform:var(--graupl-navigation-shelf-open-transform, );opacity:var(--graupl-navigation-shelf-open-opacity,1)}.navigation-shelf .navigation-shelf-header{grid-area:header}.navigation-shelf .navigation-shelf-content{grid-area:content}.navigation-shelf .navigation-shelf-footer{grid-area:footer}.navigation-shelf .navigation-shelf-side-toggle{--graupl-icon:var(--graupl-navigation-shelf-side-toggle-content,var(--graupl-navigation-shelf-side-toggle-shelf-right-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-side-toggle-spacer,0)}.navigation-shelf .navigation-shelf-side-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-side-toggle.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.navigation-shelf .navigation-shelf-side-toggle.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.navigation-shelf .navigation-shelf-side-toggle.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.navigation-shelf .navigation-shelf-side-toggle:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.navigation-shelf .navigation-shelf-lock-toggle{--graupl-icon:var(--graupl-navigation-shelf-lock-toggle-content,var(--graupl-navigation-shelf-lock-toggle-lock-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-lock-toggle-spacer,0)}.navigation-shelf .navigation-shelf-lock-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-lock-toggle.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.navigation-shelf .navigation-shelf-lock-toggle.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.navigation-shelf .navigation-shelf-lock-toggle.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.navigation-shelf .navigation-shelf-lock-toggle:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.navigation-shelf .navigation-shelf-hover-toggle{--graupl-icon:var(--graupl-navigation-shelf-hover-toggle-content,var(--graupl-navigation-shelf-hover-toggle-enable-hover-content,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E")));--graupl-icon-spacer:var(--graupl-navigation-shelf-hover-toggle-spacer,0)}.navigation-shelf .navigation-shelf-hover-toggle:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.navigation-shelf .navigation-shelf-hover-toggle.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.navigation-shelf .navigation-shelf-hover-toggle.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.navigation-shelf .navigation-shelf-hover-toggle.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.navigation-shelf .navigation-shelf-hover-toggle:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}@layer graupl.utilities{.shelf-aware{padding-right:0!important;padding-left:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))!important}.shelf-aware.locked{padding-left:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch))!important}.shelf-aware.left-side{padding-right:0!important;padding-left:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))!important}.shelf-aware.left-side.locked{padding-left:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch))!important}.shelf-aware.right-side{padding-right:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))!important;padding-left:0!important}.shelf-aware.right-side.locked{padding-right:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch))!important}.w-shelf-min{width:var(--graupl-navigation-shelf-min-width,3.5rem)!important}.max-w-shelf-min{max-width:var(--graupl-navigation-shelf-min-width,3.5rem)!important}.min-w-shelf-min{min-width:var(--graupl-navigation-shelf-min-width,3.5rem)!important}.w-shelf-max{width:var(--graupl-navigation-shelf-max-width,36ch)!important}.max-w-shelf-max{max-width:var(--graupl-navigation-shelf-max-width,36ch)!important}.min-w-shelf-max{min-width:var(--graupl-navigation-shelf-max-width,36ch)!important}.w-shelf-current{width:var(--graupl-navigation-shelf-current-width,var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))))!important}.max-w-shelf-current{max-width:var(--graupl-navigation-shelf-current-width,var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))))!important}.min-w-shelf-current{min-width:var(--graupl-navigation-shelf-current-width,var(--graupl-navigation-shelf-width,var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))))!important}.w-shelf-closed{width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))!important}.max-w-shelf-closed{max-width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))!important}.min-w-shelf-closed{min-width:var(--graupl-navigation-shelf-closed-width,var(--graupl-navigation-shelf-min-width,3.5rem))!important}.w-shelf-open{width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch))!important}.max-w-shelf-open{max-width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch))!important}.min-w-shelf-open{min-width:var(--graupl-navigation-shelf-open-width,var(--graupl-navigation-shelf-max-width,36ch))!important}}
|
|
2
2
|
/*# sourceMappingURL=navigation-shelf.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACYA,kkGAsBE,gBAtBF,goBA8BE,2HE/BA,uCFCF,0XAwCE,ygBAWE,oiBAQA,qiBASF,ufAUE,0gBAQA,2gBASF,mgBAQA,+mBAQA,0mBAWA,6pBAWA,8iBAWA,4DAKA,8DAKA,4DAKA,qlBGnJE,8tBHyKF,2mBGzKE,8tBH+LF,6tBG/LE,+tBEfA,wBCiJA,0JCvEA,mIAQA,oKAQE,6IASF,qKAQE,+IDsCF,6EAAA,qFAAA,qFAAA,2EAAA,mFAAA,mFAAA,+MAAA,uNAAA,uNAAA,4HAAA,oIAAA,oIAAA,sHAAA,8HAAA","sources":["dist/css/navigation-shelf.css","var/www/html/packages/navigation-shelf/src/scss/component/navigation-shelf/_index.scss","var/www/html/packages/navigation-shelf/src/scss/component/navigation-shelf/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_animation.scss","var/www/html/node_modules/@graupl/icons/src/scss/component/icon/_mixins.scss","var/www/html/node_modules/@graupl/icons/src/scss/component/icon/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_utility.scss","var/www/html/packages/navigation-shelf/src/scss/utilities/shelf-aware/_index.scss"],"sourcesContent":[".navigation-shelf {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)));\n display: var(--graupl-navigation-shelf-display, var(--graupl-navigation-shelf-closed-display, grid));\n position: fixed;\n z-index: var(--graupl-navigation-shelf-z-index, 2);\n top: 0;\n bottom: 0;\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem))) [footer-end content-end header-end];\n grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];\n width: var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)));\n overflow-x: hidden;\n transform: var(--graupl-navigation-shelf-transform, var(--graupl-navigation-shelf-closed-transform, ));\n transition: var(--graupl-navigation-shelf-transition, width var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), transform var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), opacity var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), display var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) allow-discrete);\n border-width: var(--graupl-navigation-shelf-border-width, var(--graupl-navigation-shelf-border-top-width, 0) var(--graupl-navigation-shelf-border-right-width, 0) var(--graupl-navigation-shelf-border-bottom-width, 0) var(--graupl-navigation-shelf-border-left-width, 0));\n border-style: var(--graupl-navigation-shelf-border-style, var(--graupl-navigation-shelf-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-color: var(--graupl-navigation-shelf-border-color, var(--graupl-navigation-shelf-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n opacity: var(--graupl-navigation-shelf-opacity, var(--graupl-navigation-shelf-closed-opacity, 1));\n background: var(--graupl-navigation-shelf-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-navigation-shelf-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n isolation: isolate;\n}\n@starting-style {\n .navigation-shelf {\n display: var(--graupl-navigation-shelf-starting-display, var(--graupl-navigation-shelf-display, var(--graupl-navigation-shelf-closed-display, grid)));\n width: var(--graupl-navigation-shelf-starting-width, var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem))));\n transform: var(--graupl-navigation-shelf-starting-transform, var(--graupl-navigation-shelf-transform, var(--graupl-navigation-shelf-closed-transform, )));\n opacity: var(--graupl-navigation-shelf-starting-opacity, var(--graupl-navigation-shelf-opacity, var(--graupl-navigation-shelf-closed-opacity, 1)));\n }\n}\n.navigation-shelf.initializing {\n --graupl-navigation-shelf-transition: --graupl-navigation-shelf-transition-initializing, none;\n}\n@media (prefers-reduced-motion: reduce) {\n .navigation-shelf {\n --graupl-navigation-shelf-transition: var(--graupl-navigation-shelf-transition-reduced-motion, opacity var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), display var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) allow-discrete);\n }\n}\n.navigation-shelf, .navigation-shelf.left-side {\n --graupl-navigation-shelf-side-toggle-content: var(\n --graupl-navigation-shelf-side-toggle-shelf-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n right: auto;\n left: 0;\n}\n.navigation-shelf.locked, .navigation-shelf.left-side.locked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-unlock-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.unlocked, .navigation-shelf.left-side.unlocked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-lock-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.right-side {\n --graupl-navigation-shelf-side-toggle-content: var(\n --graupl-navigation-shelf-side-toggle-shelf-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n right: 0;\n left: auto;\n}\n.navigation-shelf.right-side.locked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-unlock-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M300-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.right-side.unlocked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-lock-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M460-320v-320L300-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.hoverable {\n --graupl-navigation-shelf-hover-toggle-content: var(\n --graupl-navigation-shelf-hover-toggle-disable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M468-240q-96-5-162-74t-66-166q0-100 70-170t170-70q97 0 166 66t74 162l-84-25q-13-54-56-88.5T480-640q-66 0-113 47t-47 113q0 57 34.5 100t88.5 56l25 84ZM821-60 650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.not-hoverable {\n --graupl-navigation-shelf-hover-toggle-content: var(\n --graupl-navigation-shelf-hover-toggle-enable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.hide {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n display: var(--graupl-navigation-shelf-closed-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n transform: var(--graupl-navigation-shelf-closed-transform, );\n opacity: var(--graupl-navigation-shelf-closed-opacity, 1);\n}\n.navigation-shelf.transitioning {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n display: var(--graupl-navigation-shelf-transitioning-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n transform: var(--graupl-navigation-shelf-transitioning-transform, );\n opacity: var(--graupl-navigation-shelf-transitioning-opacity, 1);\n}\n.navigation-shelf.show {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch));\n display: var(--graupl-navigation-shelf-open-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-max-width, 36ch) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch));\n transform: var(--graupl-navigation-shelf-open-transform, );\n opacity: var(--graupl-navigation-shelf-open-opacity, 1);\n}\n.navigation-shelf .navigation-shelf-header {\n grid-area: header;\n}\n.navigation-shelf .navigation-shelf-content {\n grid-area: content;\n}\n.navigation-shelf .navigation-shelf-footer {\n grid-area: footer;\n}\n.navigation-shelf .navigation-shelf-side-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-side-toggle-content,\n var(\n --graupl-navigation-shelf-side-toggle-shelf-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-side-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-side-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n margin-inline-end: var(--graupl-icon-spacer, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n}\n.navigation-shelf .navigation-shelf-side-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-lock-toggle-content,\n var(\n --graupl-navigation-shelf-lock-toggle-lock-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-lock-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-lock-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n margin-inline-end: var(--graupl-icon-spacer, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-hover-toggle-content,\n var(\n --graupl-navigation-shelf-hover-toggle-enable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-hover-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-hover-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n margin-inline-end: var(--graupl-icon-spacer, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}\n\n@layer graupl.utilities {\n .shelf-aware {\n padding-right: 0 !important;\n padding-left: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) !important;\n }\n .shelf-aware.locked {\n padding-left: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch)) !important;\n }\n .shelf-aware.left-side {\n padding-right: 0 !important;\n padding-left: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) !important;\n }\n .shelf-aware.left-side.locked {\n padding-left: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch)) !important;\n }\n .shelf-aware.right-side {\n padding-right: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) !important;\n padding-left: 0 !important;\n }\n .shelf-aware.right-side.locked {\n padding-right: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch)) !important;\n }\n}\n@layer graupl.utilities {\n .w-shelf-min {\n width: var(--graupl-navigation-shelf-min-width, 3.5rem) !important;\n }\n .max-w-shelf-min {\n max-width: var(--graupl-navigation-shelf-min-width, 3.5rem) !important;\n }\n .min-w-shelf-min {\n min-width: var(--graupl-navigation-shelf-min-width, 3.5rem) !important;\n }\n .w-shelf-max {\n width: var(--graupl-navigation-shelf-max-width, 36ch) !important;\n }\n .max-w-shelf-max {\n max-width: var(--graupl-navigation-shelf-max-width, 36ch) !important;\n }\n .min-w-shelf-max {\n min-width: var(--graupl-navigation-shelf-max-width, 36ch) !important;\n }\n .w-shelf-current {\n width: var(--graupl-navigation-shelf-current-width, var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)))) !important;\n }\n .max-w-shelf-current {\n max-width: var(--graupl-navigation-shelf-current-width, var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)))) !important;\n }\n .min-w-shelf-current {\n min-width: var(--graupl-navigation-shelf-current-width, var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)))) !important;\n }\n .w-shelf-closed {\n width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) !important;\n }\n .max-w-shelf-closed {\n max-width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) !important;\n }\n .min-w-shelf-closed {\n min-width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) !important;\n }\n .w-shelf-open {\n width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch)) !important;\n }\n .max-w-shelf-open {\n max-width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch)) !important;\n }\n .min-w-shelf-open {\n min-width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch)) !important;\n }\n}","@use \"pkg:@graupl/icons/src/component/icon/mixins\" as icon-mixins;\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/mixins/animation\";\n@use \"defaults\";\n@use \"variables\" as *;\n@use \"sass:map\";\n\n@if defaults.$show-warnings and root-defaults.$show-warnings {\n @warn \"The `@graupl/navigation-shelf` component is under active development and is highly experimental. It is not recommended for production use at this time.\";\n}\n\n// `.navigation-shelf`\n#{defaults.$navigation-shelf-selector-base}#{defaults.$navigation-shelf-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-width};\n\n display: $navigation-shelf-display;\n position: fixed;\n z-index: $navigation-shelf-z-index;\n top: 0;\n bottom: 0;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-width [footer-end content-end header-end];\n grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];\n width: $navigation-shelf-width;\n overflow-x: hidden;\n transform: $navigation-shelf-transform;\n transition: $navigation-shelf-transition;\n border-width: $navigation-shelf-border-width;\n border-style: $navigation-shelf-border-style;\n border-color: $navigation-shelf-border-color;\n opacity: $navigation-shelf-opacity;\n background: $navigation-shelf-background;\n color: $navigation-shelf-color;\n isolation: isolate;\n\n @starting-style {\n display: $navigation-shelf-starting-display;\n width: $navigation-shelf-starting-width;\n transform: $navigation-shelf-starting-transform;\n opacity: $navigation-shelf-starting-opacity;\n }\n\n // &.initializing\n &#{defaults.$navigation-shelf-initializing-selector-base}#{defaults.$navigation-shelf-initializing-selector} {\n --#{root-defaults.$prefix}navigation-shelf-transition: #{$navigation-shelf-transition-initializing};\n }\n\n @include animation.off {\n --#{root-defaults.$prefix}navigation-shelf-transition: #{$navigation-shelf-transition-reduced-motion};\n }\n\n // `&,`\n // `&.left-side`\n &,\n &#{defaults.$navigation-shelf-side-selector-base}#{defaults.$navigation-shelf-left-side-selector}#{defaults.$navigation-shelf-side-selector-suffix} {\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-right\")}\n );\n\n right: auto;\n left: 0;\n\n // `&.locked`\n &#{defaults.$navigation-shelf-locked-selector-base}#{defaults.$navigation-shelf-locked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-unlock-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"unlock-right\")}\n );\n }\n\n // `&.unlocked`\n &#{defaults.$navigation-shelf-unlocked-selector-base}#{defaults.$navigation-shelf-unlocked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-right\")}\n );\n }\n }\n\n // `&.right-side`\n &#{defaults.$navigation-shelf-side-selector-base}#{defaults.$navigation-shelf-right-side-selector}#{defaults.$navigation-shelf-side-selector-suffix} {\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-left\")}\n );\n\n right: 0;\n left: auto;\n\n // `&.locked`\n &#{defaults.$navigation-shelf-locked-selector-base}#{defaults.$navigation-shelf-locked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-unlock-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"unlock-left\")}\n );\n }\n\n // `&.unlocked`\n &#{defaults.$navigation-shelf-unlocked-selector-base}#{defaults.$navigation-shelf-unlocked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-left\")}\n );\n }\n }\n\n // `&.hoverable`\n &#{defaults.$navigation-shelf-hoverable-selector-base}#{defaults.$navigation-shelf-hoverable-selector} {\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-disable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"disable-hover\")}\n );\n }\n\n // `&.not-hoverable`\n &#{defaults.$navigation-shelf-not-hoverable-selector-base}#{defaults.$navigation-shelf-not-hoverable-selector} {\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-enable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"enable-hover\")}\n );\n }\n\n // `&.hide`\n &#{defaults.$navigation-shelf-closed-selector-base}#{defaults.$navigation-shelf-closed-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-closed-width};\n\n display: $navigation-shelf-closed-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-closed-width [footer-end content-end header-end];\n width: $navigation-shelf-closed-width;\n transform: $navigation-shelf-closed-transform;\n opacity: $navigation-shelf-closed-opacity;\n }\n\n // `&.transitioning`\n &#{defaults.$navigation-shelf-transitioning-selector-base}#{defaults.$navigation-shelf-transitioning-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-transitioning-width};\n\n display: $navigation-shelf-transitioning-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-transitioning-width [footer-end content-end header-end];\n width: $navigation-shelf-transitioning-width;\n transform: $navigation-shelf-transitioning-transform;\n opacity: $navigation-shelf-transitioning-opacity;\n }\n\n // `&.show`\n &#{defaults.$navigation-shelf-open-selector-base}#{defaults.$navigation-shelf-open-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-open-width};\n\n display: $navigation-shelf-open-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-max-width [footer-end content-end header-end];\n width: $navigation-shelf-open-width;\n transform: $navigation-shelf-open-transform;\n opacity: $navigation-shelf-open-opacity;\n }\n\n // `.navigation-shelf-header`\n #{defaults.$navigation-shelf-header-selector-base}#{defaults.$navigation-shelf-header-selector} {\n grid-area: header;\n }\n\n // `.navigation-shelf-content`\n #{defaults.$navigation-shelf-content-selector-base}#{defaults.$navigation-shelf-content-selector} {\n grid-area: content;\n }\n\n // `.navigation-shelf-footer`\n #{defaults.$navigation-shelf-footer-selector-base}#{defaults.$navigation-shelf-footer-selector} {\n grid-area: footer;\n }\n\n // `.navigation-shelf-side-toggle`\n #{defaults.$navigation-shelf-side-toggle-selector-base}#{defaults.$navigation-shelf-side-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-right\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-side-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-side-toggle-pseudo-element}\n );\n }\n\n // `.navigation-shelf-lock-toggle`\n #{defaults.$navigation-shelf-lock-toggle-selector-base}#{defaults.$navigation-shelf-lock-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-right\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-lock-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-lock-toggle-pseudo-element}\n );\n }\n\n // `.navigation-shelf-hover-toggle`\n #{defaults.$navigation-shelf-hover-toggle-selector-base}#{defaults.$navigation-shelf-hover-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-enable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"enable-hover\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-hover-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-hover-toggle-pseudo-element}\n );\n }\n}\n","// @graupl/navigation-shelf navigation shelf component variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/variables\" as root-variables;\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"sass:map\";\n\n// Navigation shelf properties.\n$navigation-shelf-background: var(\n --#{root-defaults.$prefix}navigation-shelf-background,\n #{color.$background}\n);\n$navigation-shelf-color: var(\n --#{root-defaults.$prefix}navigation-shelf-color,\n #{color.$color}\n);\n$navigation-shelf-z-index: var(\n --#{root-defaults.$prefix}navigation-shelf-z-index,\n #{defaults.$navigation-shelf-z-index}\n);\n\n// Border properties.\n$navigation-shelf-border-top-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-top-style,\n #{root-variables.$border-top-style}\n);\n$navigation-shelf-border-right-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-right-style,\n #{root-variables.$border-right-style}\n);\n$navigation-shelf-border-bottom-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n$navigation-shelf-border-left-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-left-style,\n #{root-variables.$border-left-style}\n);\n$navigation-shelf-border-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-style,\n #{$navigation-shelf-border-top-style} #{$navigation-shelf-border-right-style}\n #{$navigation-shelf-border-bottom-style}\n #{$navigation-shelf-border-left-style}\n);\n$navigation-shelf-border-top-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-top-width,\n 0\n);\n$navigation-shelf-border-right-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-right-width,\n 0\n);\n$navigation-shelf-border-bottom-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-bottom-width,\n 0\n);\n$navigation-shelf-border-left-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-left-width,\n 0\n);\n$navigation-shelf-border-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-width,\n #{$navigation-shelf-border-top-width} #{$navigation-shelf-border-right-width}\n #{$navigation-shelf-border-bottom-width}\n #{$navigation-shelf-border-left-width}\n);\n$navigation-shelf-border-color: var(\n --#{root-defaults.$prefix}navigation-shelf-border-color,\n #{$navigation-shelf-color}\n);\n\n// Transform properties.\n$navigation-shelf-closed-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-transform,\n null\n);\n$navigation-shelf-open-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-open-transform,\n null\n);\n$navigation-shelf-transitioning-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-transform,\n null\n);\n$navigation-shelf-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-transform,\n #{$navigation-shelf-closed-transform}\n);\n$navigation-shelf-starting-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-transform,\n #{$navigation-shelf-transform}\n);\n\n// Width properties.\n$navigation-shelf-min-width: var(\n --#{root-defaults.$prefix}navigation-shelf-min-width,\n #{defaults.$navigation-shelf-min-width}\n);\n$navigation-shelf-max-width: var(\n --#{root-defaults.$prefix}navigation-shelf-max-width,\n #{defaults.$navigation-shelf-max-width}\n);\n$navigation-shelf-closed-width: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-width,\n #{$navigation-shelf-min-width}\n);\n$navigation-shelf-open-width: var(\n --#{root-defaults.$prefix}navigation-shelf-open-width,\n #{$navigation-shelf-max-width}\n);\n$navigation-shelf-transitioning-width: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-width,\n #{$navigation-shelf-min-width}\n);\n$navigation-shelf-width: var(\n --#{root-defaults.$prefix}navigation-shelf-width,\n #{$navigation-shelf-closed-width}\n);\n$navigation-shelf-starting-width: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-width,\n #{$navigation-shelf-width}\n);\n$navigation-shelf-current-width: var(\n --#{root-defaults.$prefix}navigation-shelf-current-width,\n #{$navigation-shelf-width}\n);\n\n// Display properties.\n$navigation-shelf-closed-display: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-display,\n grid\n);\n$navigation-shelf-open-display: var(\n --#{root-defaults.$prefix}navigation-shelf-open-display,\n grid\n);\n$navigation-shelf-transitioning-display: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-display,\n grid\n);\n$navigation-shelf-display: var(\n --#{root-defaults.$prefix}navigation-shelf-display,\n #{$navigation-shelf-closed-display}\n);\n$navigation-shelf-starting-display: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-display,\n #{$navigation-shelf-display}\n);\n\n// Opacity properties.\n$navigation-shelf-closed-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-opacity,\n 1\n);\n$navigation-shelf-open-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-open-opacity,\n 1\n);\n$navigation-shelf-transitioning-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-opacity,\n 1\n);\n$navigation-shelf-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-opacity,\n #{$navigation-shelf-closed-opacity}\n);\n$navigation-shelf-starting-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-opacity,\n #{$navigation-shelf-opacity}\n);\n\n// Transition properties.\n$navigation-shelf-transition-duration: var(\n --#{root-defaults.$prefix}navigation-shelf-transition-duration,\n #{map.get(root-variables.$transition-durations, fast)}\n);\n$navigation-shelf-transition: var(\n --#{root-defaults.$prefix}navigation-shelf-transition,\n width #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n transform #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n opacity #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n display #{$navigation-shelf-transition-duration} allow-discrete\n);\n$navigation-shelf-transition-initializing: (\n --#{root-defaults.$prefix}navigation-shelf-transition-initializing,\n none\n);\n$navigation-shelf-transition-reduced-motion: var(\n --#{root-defaults.$prefix}navigation-shelf-transition-reduced-motion,\n opacity #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n display #{$navigation-shelf-transition-duration} allow-discrete\n);\n","// @graupl/core animation media query mixins.\n\n// A media query for targeting users who have not requested reduced motion.\n@mixin on {\n @media (prefers-reduced-motion: no-preference) {\n @content;\n }\n}\n\n// A media query for targeting users who have requested reduced motion.\n@mixin off {\n @media (prefers-reduced-motion: reduce) {\n @content;\n }\n}\n","// @graupl/icons icon mixins.\n\n@use \"variables\" as *;\n\n@mixin _component() {\n display: $icon-display;\n width: $icon-width;\n height: $icon-height;\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: $icon;\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n}\n\n@mixin _theme() {\n background-color: $icon-color;\n}\n\n@mixin apply-component($target: \"self\") {\n @if $target == \"before\" {\n &::before {\n @include _component;\n\n content: \"\";\n margin-inline-end: $icon-spacer;\n }\n } @else if $target == \"after\" {\n &::after {\n @include _component;\n\n content: \"\";\n margin-inline-start: $icon-spacer;\n }\n } @else {\n @include _component;\n\n margin-inline: $icon-spacer $icon-spacer;\n }\n}\n\n@mixin apply-theme($target: \"self\") {\n @if $target == \"before\" {\n &::before {\n @include _theme;\n }\n } @else if $target == \"after\" {\n &::after {\n @include _theme;\n }\n } @else {\n @include _theme;\n }\n}\n\n@mixin apply($target: \"self\") {\n @include apply-component($target);\n @include apply-theme($target);\n}\n","// @graupl/icons icon componet variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"pkg:@graupl/core/src/variables\" as root-variables;\n@use \"sass:map\";\n\n$icon-display: var(\n --#{root-defaults.$prefix}icon-display,\n #{defaults.$icon-display}\n);\n$icon-size: var(--#{root-defaults.$prefix}icon-size, #{defaults.$icon-size});\n$icon-width: var(--#{root-defaults.$prefix}icon-width, #{$icon-size});\n$icon-height: var(--#{root-defaults.$prefix}icon-height, #{$icon-size});\n$icon-color: var(--#{root-defaults.$prefix}icon-color, #{color.$color});\n$icon: var(--#{root-defaults.$prefix}icon, none);\n$icon-spacer: var(\n --#{root-defaults.$prefix}icon-spacer,\n #{map.get(root-variables.$spacers, 2)}\n);\n","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n @if root-defaults.$use-layers {\n @layer #{root-defaults.$id}.#{$layer} {\n @content;\n }\n } @else {\n @content;\n }\n}\n","// @graupl/core utility mixins.\n//\n// Mixins to help generate utility classes.\n\n@use \"./screen\";\n@use \"./container\";\n@use \"./state\";\n@use \"./theme\";\n@use \"../functions/important\";\n@use \"../functions/utility\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:string\";\n\n/// Insert a map of properties and values into a utility class.\n///\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {Boolean} $important\n/// A flag to determine if the important flag should be added.\n@mixin _insert($map, $important: null) {\n @each $prop, $value in $map {\n // Do not attempt to insert important values inside of custom properties.\n @if string.slice($prop, 1, 2) != \"--\" {\n #{$prop}: important.insert(#{$value}, $override: $important);\n } @else {\n #{$prop}: #{$value};\n }\n }\n\n // Allow for custom overrides and additional styles.\n @content;\n}\n\n/// Handles wrapping utilities with a conditional state.\n///\n/// @param {?string} $state\n/// The state to wrap.\n@mixin _handle-state($state: null) {\n @if $state {\n @include state.state($state) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional screen.\n///\n/// @param {?string} $screen\n/// The screen to wrap.\n@mixin _handle-screen($screen: null) {\n @if $screen {\n @include screen.up($screen) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional container.\n///\n/// @param {?string} $container\n/// The container to wrap.\n@mixin _handle-container($container: null) {\n @if $container {\n @include container.up($container) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional theme.\n///\n/// @param {?string} $theme\n/// The theme mode to wrap.\n@mixin _handle-theme($theme: null) {\n @if $theme {\n @include theme.theme($theme) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Create a utility class with a list of properties and a single value.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {string|List} $property\n/// The property/properties to apply to the selector.\n/// @param {string} $value\n/// The value to apply to the property/properties.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create(\n $selector,\n $property,\n $value,\n $important: null,\n $screen: null,\n $theme: null,\n $state: null,\n $container: null\n) {\n $map: utility.convert-property-values-to-map($property, $value);\n\n @include create-mapped(\n $selector,\n $map,\n $important: $important,\n $screen: $screen,\n $theme: $theme,\n $state: $state,\n $container: $container\n ) {\n @content;\n }\n}\n\n/// Create a utility class with a map of properties and values.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create-mapped(\n $selector,\n $map,\n $important: null,\n $screen: null,\n $theme: null,\n $state: null,\n $container: null\n) {\n @include _handle-theme($theme) {\n #{$selector} {\n @if $screen or $container {\n @if $screen {\n @include _handle-screen($screen) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n\n @if $container {\n @include _handle-container($container) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n } @else {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n }\n}\n","// @graupl/navigation-shelf [_template] utilities styles.\n//\n// This file generates the [_template] utility classes provided by Graupl.\n//\n// The following classes are generated by default:\n// - `.template-class`: Applies the base value for the property.\n//\n// The following custom properties control the generated classes:\n// - N/A.\n//\n// The following variables control the generated classes:\n// - `$selector-base`: The base selector for the utility classes.\n// - `$use-important`: A flag to determine if the `!important` flag should be added to the utility classes.\n// - `$generate-base-utilities`: A flag to determine if the base utility classes should be generated.\n// - `$screen-aware`: A flag to generate screen-aware utility classes.\n// - `$theme-aware`: A flag to generate theme-aware utility classes.\n// - `$state-aware`: A flag to generate state-aware utility classes.\n// - `$container-aware`: A flag to generate container-aware utility classes.\n// - `$screen-aware-separator`: The separator for screen-aware utility classes.\n// - `$theme-aware-separator`: The separator for theme-aware utility classes.\n// - `$state-aware-separator`: The separator for state-aware utility classes.\n// - `$container-aware-separator`: The separator for container-aware utility classes.\n// - `$screen-aware-selector-prefix`: The prefix for screen-aware utility classes.\n// - `$theme-aware-selector-prefix`: The prefix for theme-aware utility classes.\n// - `$state-aware-selector-prefix`: The prefix for state-aware utility classes.\n// - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.\n// - `$template-selector-prefix`: The prefix for the utility classes.\n// - `$custom-template-properties`: The custom properties and values for the template utility classes.\n// - `$template-properties`: The merged properties and values for the template utility classes.\n//\n// Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.\n// By default, no responsive utility classes are generated.\n//\n// When set to true, screen-aware utility classes will be generated for each screen size in the following pattern:\n// - `.{screen-prefix}{screen-name}:{prefix}{value}`\n//\n// e.g. `.sm:[template-class]` will set the `template` property to `value` on screens equal to or larger than the `sm` breakpoint.\n//\n// When set to true, theme-aware utility classes will be generated for each theme in the following pattern:\n// - `.{theme-prefix}{theme-name}:{prefix}{value}`\n//\n// e.g. `.dark:[template-class]` will set the `template` property to `value` when the `dark` theme is active.\n//\n// When set to true, state-aware utility classes will be generated for each state in the following pattern:\n// - `.{state-prefix}{state-name}:{prefix}{value}`\n//\n// e.g. `.hover:[template-class]` will set the `template` property to `value` when the element is hovered.\n//\n// When set to true, container-aware utility classes will be generated for each container in the following pattern:\n// - `.{container-prefix}{container-name}:{prefix}{value}`\n//\n// e.g. `.cq:md:[template-class]` will set the `template` property to `value` when the parent container is larger than the `md` breakpoint.\n//\n// @example\n// <div class=\"template-class\">This content showing you how to use this.</div>\n\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/mixins/layer\" as *;\n@use \"pkg:@graupl/core/src/mixins/utility\";\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"defaults\";\n@use \"sass:map\";\n@use \"variables\" as *;\n@use \"../../component/navigation-shelf/defaults\" as navigation-shelf-defaults;\n@use \"../../component/navigation-shelf/variables\" as navigation-shelf-variables;\n@use \"pkg:@graupl/core/src/functions/important\";\n\n@include layer(utilities) {\n // `.`\n $selector-prefix: defaults.$selector-base;\n\n // `.shelf-aware`\n $selector: #{$selector-prefix}#{defaults.$shelf-aware-selector};\n\n @include utility.create-mapped(\n $selector,\n (\n padding-right: 0,\n padding-left: navigation-shelf-variables.$navigation-shelf-closed-width,\n ),\n $important: #{defaults.$use-important}\n ) {\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n\n // `&.left-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-left-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(0, defaults.$use-important);\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n\n // `&.right-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-right-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n padding-left: important.insert(0, defaults.$use-important);\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n }\n\n // Generate screen-aware utilities.\n @if defaults.$screen-aware and root-defaults.$screen-aware-utilities {\n @each $screen-name in map.keys(root-defaults.$screen-sizes) {\n // e.g. `.md:` or `.lg:`\n $selector-prefix: #{defaults.$selector-base}#{defaults.$screen-aware-selector-prefix}#{$screen-name}#{defaults.$screen-aware-separator};\n\n // e.g. `.md:shelf-aware`\n $selector: #{$selector-prefix}#{defaults.$shelf-aware-selector};\n\n @include utility.create-mapped(\n $selector,\n (\n padding-right: 0,\n padding-left:\n navigation-shelf-variables.$navigation-shelf-closed-width,\n ),\n $important: #{defaults.$use-important},\n $screen: $screen-name\n ) {\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n\n // `&.left-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-left-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(0, defaults.$use-important);\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n\n // `&.right-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-right-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n padding-left: important.insert(0, defaults.$use-important);\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n }\n }\n }\n\n // Generate theme-aware utilities.\n @if defaults.$theme-aware and root-defaults.$theme-aware-utilities {\n @each $theme-name, $colors in color.$themes {\n @if $theme-name != active {\n // e.g. `.dark:` or `.light:`\n $selector-prefix: #{defaults.$selector-base}#{defaults.$theme-aware-selector-prefix}#{$theme-name}#{defaults.$theme-aware-separator};\n\n // e.g. `.dark:shelf-aware` or `.light:shelf-aware`\n $selector: #{$selector-prefix}#{defaults.$shelf-aware-selector};\n\n @include utility.create-mapped(\n $selector,\n (\n padding-right: 0,\n padding-left:\n navigation-shelf-variables.$navigation-shelf-closed-width,\n ),\n $important: #{defaults.$use-important},\n $theme: $theme-name\n ) {\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n\n // `&.left-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-left-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(0, defaults.$use-important);\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n\n // `&.right-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-right-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n padding-left: important.insert(0, defaults.$use-important);\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n }\n }\n }\n }\n\n // Generate state-aware utilities.\n @if defaults.$state-aware and root-defaults.$state-aware-utilities {\n @each $state-name, $value in root-defaults.$state-selectors {\n // e.g. `.hover:` or `.focus:`\n $selector-prefix: #{defaults.$selector-base}#{defaults.$state-aware-selector-prefix}#{$state-name}#{defaults.$state-aware-separator};\n\n // e.g. `.hover:shelf-aware` or `.focus:shelf-aware`\n $selector: #{$selector-prefix}#{defaults.$shelf-aware-selector};\n\n @include utility.create-mapped(\n $selector,\n (\n padding-right: 0,\n padding-left:\n navigation-shelf-variables.$navigation-shelf-closed-width,\n ),\n $important: #{defaults.$use-important},\n $state: $state-name\n ) {\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n\n // `&.left-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-left-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(0, defaults.$use-important);\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n\n // `&.right-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-right-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n padding-left: important.insert(0, defaults.$use-important);\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n }\n }\n }\n\n // Generate container-aware utilities.\n @if defaults.$container-aware and root-defaults.$container-aware-utilities {\n @each $container-name in map.keys(root-defaults.$container-sizes) {\n // e.g. `.md:` or `.lg:`\n $selector-prefix: #{defaults.$selector-base}#{defaults.$container-aware-selector-prefix}#{$container-name}#{defaults.$container-aware-separator};\n\n // e.g. `.cq:md:shelf-aware`\n $selector: #{$selector-prefix}#{defaults.$shelf-aware-selector};\n\n @include utility.create-mapped(\n $selector,\n (\n padding-right: 0,\n padding-left:\n navigation-shelf-variables.$navigation-shelf-closed-width,\n ),\n $important: #{defaults.$use-important},\n $container: $container-name\n ) {\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n\n // `&.left-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-left-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(0, defaults.$use-important);\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n\n // `&.right-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-right-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n padding-left: important.insert(0, defaults.$use-important);\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n }\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACYA,kkGAsBE,gBAtBF,goBA8BE,2HE/BA,uCFCF,0XAwCE,ygBAWE,oiBAQA,qiBASF,ufAUE,0gBAQA,2gBASF,mgBAQA,+mBAQA,0mBAWA,6pBAWA,8iBAWA,4DAKA,8DAKA,4DAKA,qlBG1JA,4aEuBE,gMAAA,wMAAA,iMFOF,kQHkJA,2mBGhLA,4aEuBE,gMAAA,wMAAA,iMFOF,kQHwKA,6tBGtMA,6aEuBE,iMAAA,yMAAA,kMFOF,mQGtCE,wBCiJA,0JCvEA,mIAQA,oKAQE,6IASF,qKAQE,+IDsCF,6EAAA,qFAAA,qFAAA,2EAAA,mFAAA,mFAAA,+MAAA,uNAAA,uNAAA,4HAAA,oIAAA,oIAAA,sHAAA,8HAAA","sources":["dist/css/navigation-shelf.css","var/www/html/packages/navigation-shelf/src/scss/component/navigation-shelf/_index.scss","var/www/html/packages/navigation-shelf/src/scss/component/navigation-shelf/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_animation.scss","var/www/html/node_modules/@graupl/icons/src/scss/component/icon/_mixins.scss","var/www/html/node_modules/@graupl/icons/src/scss/component/icon/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_theme.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_utility.scss","var/www/html/packages/navigation-shelf/src/scss/utilities/shelf-aware/_index.scss"],"sourcesContent":[".navigation-shelf {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)));\n display: var(--graupl-navigation-shelf-display, var(--graupl-navigation-shelf-closed-display, grid));\n position: fixed;\n z-index: var(--graupl-navigation-shelf-z-index, 2);\n top: 0;\n bottom: 0;\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem))) [footer-end content-end header-end];\n grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];\n width: var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)));\n overflow-x: hidden;\n transform: var(--graupl-navigation-shelf-transform, var(--graupl-navigation-shelf-closed-transform, ));\n transition: var(--graupl-navigation-shelf-transition, width var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), transform var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), opacity var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), display var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) allow-discrete);\n border-width: var(--graupl-navigation-shelf-border-width, var(--graupl-navigation-shelf-border-top-width, 0) var(--graupl-navigation-shelf-border-right-width, 0) var(--graupl-navigation-shelf-border-bottom-width, 0) var(--graupl-navigation-shelf-border-left-width, 0));\n border-style: var(--graupl-navigation-shelf-border-style, var(--graupl-navigation-shelf-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-navigation-shelf-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-color: var(--graupl-navigation-shelf-border-color, var(--graupl-navigation-shelf-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n opacity: var(--graupl-navigation-shelf-opacity, var(--graupl-navigation-shelf-closed-opacity, 1));\n background: var(--graupl-navigation-shelf-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-navigation-shelf-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n isolation: isolate;\n}\n@starting-style {\n .navigation-shelf {\n display: var(--graupl-navigation-shelf-starting-display, var(--graupl-navigation-shelf-display, var(--graupl-navigation-shelf-closed-display, grid)));\n width: var(--graupl-navigation-shelf-starting-width, var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem))));\n transform: var(--graupl-navigation-shelf-starting-transform, var(--graupl-navigation-shelf-transform, var(--graupl-navigation-shelf-closed-transform, )));\n opacity: var(--graupl-navigation-shelf-starting-opacity, var(--graupl-navigation-shelf-opacity, var(--graupl-navigation-shelf-closed-opacity, 1)));\n }\n}\n.navigation-shelf.initializing {\n --graupl-navigation-shelf-transition: --graupl-navigation-shelf-transition-initializing, none;\n}\n@media (prefers-reduced-motion: reduce) {\n .navigation-shelf {\n --graupl-navigation-shelf-transition: var(--graupl-navigation-shelf-transition-reduced-motion, opacity var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-transition-timing-function, ease), display var(--graupl-navigation-shelf-transition-duration, var(--graupl-transition-duration-fast, 150ms)) allow-discrete);\n }\n}\n.navigation-shelf, .navigation-shelf.left-side {\n --graupl-navigation-shelf-side-toggle-content: var(\n --graupl-navigation-shelf-side-toggle-shelf-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n right: auto;\n left: 0;\n}\n.navigation-shelf.locked, .navigation-shelf.left-side.locked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-unlock-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.unlocked, .navigation-shelf.left-side.unlocked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-lock-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.right-side {\n --graupl-navigation-shelf-side-toggle-content: var(\n --graupl-navigation-shelf-side-toggle-shelf-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n );\n right: 0;\n left: auto;\n}\n.navigation-shelf.right-side.locked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-unlock-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M300-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.right-side.unlocked {\n --graupl-navigation-shelf-lock-toggle-content: var(\n --graupl-navigation-shelf-lock-toggle-lock-left-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M460-320v-320L300-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.hoverable {\n --graupl-navigation-shelf-hover-toggle-content: var(\n --graupl-navigation-shelf-hover-toggle-disable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M468-240q-96-5-162-74t-66-166q0-100 70-170t170-70q97 0 166 66t74 162l-84-25q-13-54-56-88.5T480-640q-66 0-113 47t-47 113q0 57 34.5 100t88.5 56l25 84ZM821-60 650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.not-hoverable {\n --graupl-navigation-shelf-hover-toggle-content: var(\n --graupl-navigation-shelf-hover-toggle-enable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n );\n}\n.navigation-shelf.hide {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n display: var(--graupl-navigation-shelf-closed-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n transform: var(--graupl-navigation-shelf-closed-transform, );\n opacity: var(--graupl-navigation-shelf-closed-opacity, 1);\n}\n.navigation-shelf.transitioning {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n display: var(--graupl-navigation-shelf-transitioning-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-transitioning-width, var(--graupl-navigation-shelf-min-width, 3.5rem));\n transform: var(--graupl-navigation-shelf-transitioning-transform, );\n opacity: var(--graupl-navigation-shelf-transitioning-opacity, 1);\n}\n.navigation-shelf.show {\n --graupl-navigation-shelf-current-width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch));\n display: var(--graupl-navigation-shelf-open-display, grid);\n grid-template-columns: [header-start content-start footer-start] var(--graupl-navigation-shelf-max-width, 36ch) [footer-end content-end header-end];\n width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch));\n transform: var(--graupl-navigation-shelf-open-transform, );\n opacity: var(--graupl-navigation-shelf-open-opacity, 1);\n}\n.navigation-shelf .navigation-shelf-header {\n grid-area: header;\n}\n.navigation-shelf .navigation-shelf-content {\n grid-area: content;\n}\n.navigation-shelf .navigation-shelf-footer {\n grid-area: footer;\n}\n.navigation-shelf .navigation-shelf-side-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-side-toggle-content,\n var(\n --graupl-navigation-shelf-side-toggle-shelf-right-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-side-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-side-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n}\n.navigation-shelf .navigation-shelf-side-toggle.primary {\n --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n}\n.navigation-shelf .navigation-shelf-side-toggle.secondary {\n --graupl-icon-color: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n}\n.navigation-shelf .navigation-shelf-side-toggle.tertiary {\n --graupl-icon-color: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n}\n.navigation-shelf .navigation-shelf-side-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-lock-toggle-content,\n var(\n --graupl-navigation-shelf-lock-toggle-lock-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-lock-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-lock-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n}\n.navigation-shelf .navigation-shelf-lock-toggle.primary {\n --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle.secondary {\n --graupl-icon-color: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle.tertiary {\n --graupl-icon-color: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n}\n.navigation-shelf .navigation-shelf-lock-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle {\n --graupl-icon: var(\n --graupl-navigation-shelf-hover-toggle-content,\n var(\n --graupl-navigation-shelf-hover-toggle-enable-hover-content,\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E\")\n )\n );\n --graupl-icon-spacer: var(\n --graupl-navigation-shelf-hover-toggle-spacer,\n 0\n );\n}\n.navigation-shelf .navigation-shelf-hover-toggle::before {\n display: var(--graupl-icon-display, inline-block);\n width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: var(--graupl-icon, none);\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n content: \"\";\n}\n.navigation-shelf .navigation-shelf-hover-toggle.primary {\n --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle.secondary {\n --graupl-icon-color: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle.tertiary {\n --graupl-icon-color: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n}\n.navigation-shelf .navigation-shelf-hover-toggle::before {\n background-color: var(--graupl-icon-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n}\n\n@layer graupl.utilities {\n .shelf-aware {\n padding-right: 0 !important;\n padding-left: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) !important;\n }\n .shelf-aware.locked {\n padding-left: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch)) !important;\n }\n .shelf-aware.left-side {\n padding-right: 0 !important;\n padding-left: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) !important;\n }\n .shelf-aware.left-side.locked {\n padding-left: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch)) !important;\n }\n .shelf-aware.right-side {\n padding-right: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) !important;\n padding-left: 0 !important;\n }\n .shelf-aware.right-side.locked {\n padding-right: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch)) !important;\n }\n}\n@layer graupl.utilities {\n .w-shelf-min {\n width: var(--graupl-navigation-shelf-min-width, 3.5rem) !important;\n }\n .max-w-shelf-min {\n max-width: var(--graupl-navigation-shelf-min-width, 3.5rem) !important;\n }\n .min-w-shelf-min {\n min-width: var(--graupl-navigation-shelf-min-width, 3.5rem) !important;\n }\n .w-shelf-max {\n width: var(--graupl-navigation-shelf-max-width, 36ch) !important;\n }\n .max-w-shelf-max {\n max-width: var(--graupl-navigation-shelf-max-width, 36ch) !important;\n }\n .min-w-shelf-max {\n min-width: var(--graupl-navigation-shelf-max-width, 36ch) !important;\n }\n .w-shelf-current {\n width: var(--graupl-navigation-shelf-current-width, var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)))) !important;\n }\n .max-w-shelf-current {\n max-width: var(--graupl-navigation-shelf-current-width, var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)))) !important;\n }\n .min-w-shelf-current {\n min-width: var(--graupl-navigation-shelf-current-width, var(--graupl-navigation-shelf-width, var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)))) !important;\n }\n .w-shelf-closed {\n width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) !important;\n }\n .max-w-shelf-closed {\n max-width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) !important;\n }\n .min-w-shelf-closed {\n min-width: var(--graupl-navigation-shelf-closed-width, var(--graupl-navigation-shelf-min-width, 3.5rem)) !important;\n }\n .w-shelf-open {\n width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch)) !important;\n }\n .max-w-shelf-open {\n max-width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch)) !important;\n }\n .min-w-shelf-open {\n min-width: var(--graupl-navigation-shelf-open-width, var(--graupl-navigation-shelf-max-width, 36ch)) !important;\n }\n}","@use \"pkg:@graupl/icons/src/component/icon/mixins\" as icon-mixins;\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/mixins/animation\";\n@use \"defaults\";\n@use \"variables\" as *;\n@use \"sass:map\";\n\n@if defaults.$show-warnings and root-defaults.$show-warnings {\n @warn \"The `@graupl/navigation-shelf` component is under active development and is highly experimental. It is not recommended for production use at this time.\";\n}\n\n// `.navigation-shelf`\n#{defaults.$navigation-shelf-selector-base}#{defaults.$navigation-shelf-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-width};\n\n display: $navigation-shelf-display;\n position: fixed;\n z-index: $navigation-shelf-z-index;\n top: 0;\n bottom: 0;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-width [footer-end content-end header-end];\n grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];\n width: $navigation-shelf-width;\n overflow-x: hidden;\n transform: $navigation-shelf-transform;\n transition: $navigation-shelf-transition;\n border-width: $navigation-shelf-border-width;\n border-style: $navigation-shelf-border-style;\n border-color: $navigation-shelf-border-color;\n opacity: $navigation-shelf-opacity;\n background: $navigation-shelf-background;\n color: $navigation-shelf-color;\n isolation: isolate;\n\n @starting-style {\n display: $navigation-shelf-starting-display;\n width: $navigation-shelf-starting-width;\n transform: $navigation-shelf-starting-transform;\n opacity: $navigation-shelf-starting-opacity;\n }\n\n // &.initializing\n &#{defaults.$navigation-shelf-initializing-selector-base}#{defaults.$navigation-shelf-initializing-selector} {\n --#{root-defaults.$prefix}navigation-shelf-transition: #{$navigation-shelf-transition-initializing};\n }\n\n @include animation.off {\n --#{root-defaults.$prefix}navigation-shelf-transition: #{$navigation-shelf-transition-reduced-motion};\n }\n\n // `&,`\n // `&.left-side`\n &,\n &#{defaults.$navigation-shelf-side-selector-base}#{defaults.$navigation-shelf-left-side-selector}#{defaults.$navigation-shelf-side-selector-suffix} {\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-right\")}\n );\n\n right: auto;\n left: 0;\n\n // `&.locked`\n &#{defaults.$navigation-shelf-locked-selector-base}#{defaults.$navigation-shelf-locked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-unlock-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"unlock-right\")}\n );\n }\n\n // `&.unlocked`\n &#{defaults.$navigation-shelf-unlocked-selector-base}#{defaults.$navigation-shelf-unlocked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-right\")}\n );\n }\n }\n\n // `&.right-side`\n &#{defaults.$navigation-shelf-side-selector-base}#{defaults.$navigation-shelf-right-side-selector}#{defaults.$navigation-shelf-side-selector-suffix} {\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-left\")}\n );\n\n right: 0;\n left: auto;\n\n // `&.locked`\n &#{defaults.$navigation-shelf-locked-selector-base}#{defaults.$navigation-shelf-locked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-unlock-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"unlock-left\")}\n );\n }\n\n // `&.unlocked`\n &#{defaults.$navigation-shelf-unlocked-selector-base}#{defaults.$navigation-shelf-unlocked-selector} {\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-left-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-left\")}\n );\n }\n }\n\n // `&.hoverable`\n &#{defaults.$navigation-shelf-hoverable-selector-base}#{defaults.$navigation-shelf-hoverable-selector} {\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-disable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"disable-hover\")}\n );\n }\n\n // `&.not-hoverable`\n &#{defaults.$navigation-shelf-not-hoverable-selector-base}#{defaults.$navigation-shelf-not-hoverable-selector} {\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-enable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"enable-hover\")}\n );\n }\n\n // `&.hide`\n &#{defaults.$navigation-shelf-closed-selector-base}#{defaults.$navigation-shelf-closed-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-closed-width};\n\n display: $navigation-shelf-closed-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-closed-width [footer-end content-end header-end];\n width: $navigation-shelf-closed-width;\n transform: $navigation-shelf-closed-transform;\n opacity: $navigation-shelf-closed-opacity;\n }\n\n // `&.transitioning`\n &#{defaults.$navigation-shelf-transitioning-selector-base}#{defaults.$navigation-shelf-transitioning-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-transitioning-width};\n\n display: $navigation-shelf-transitioning-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-transitioning-width [footer-end content-end header-end];\n width: $navigation-shelf-transitioning-width;\n transform: $navigation-shelf-transitioning-transform;\n opacity: $navigation-shelf-transitioning-opacity;\n }\n\n // `&.show`\n &#{defaults.$navigation-shelf-open-selector-base}#{defaults.$navigation-shelf-open-selector} {\n --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-open-width};\n\n display: $navigation-shelf-open-display;\n grid-template-columns: [header-start content-start footer-start] $navigation-shelf-max-width [footer-end content-end header-end];\n width: $navigation-shelf-open-width;\n transform: $navigation-shelf-open-transform;\n opacity: $navigation-shelf-open-opacity;\n }\n\n // `.navigation-shelf-header`\n #{defaults.$navigation-shelf-header-selector-base}#{defaults.$navigation-shelf-header-selector} {\n grid-area: header;\n }\n\n // `.navigation-shelf-content`\n #{defaults.$navigation-shelf-content-selector-base}#{defaults.$navigation-shelf-content-selector} {\n grid-area: content;\n }\n\n // `.navigation-shelf-footer`\n #{defaults.$navigation-shelf-footer-selector-base}#{defaults.$navigation-shelf-footer-selector} {\n grid-area: footer;\n }\n\n // `.navigation-shelf-side-toggle`\n #{defaults.$navigation-shelf-side-toggle-selector-base}#{defaults.$navigation-shelf-side-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-right-content,\n #{map.get(defaults.$navigation-shelf-icons, \"shelf-right\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-side-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-side-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-side-toggle-pseudo-element}\n );\n }\n\n // `.navigation-shelf-lock-toggle`\n #{defaults.$navigation-shelf-lock-toggle-selector-base}#{defaults.$navigation-shelf-lock-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-content,\n #{map.get(defaults.$navigation-shelf-icons, \"lock-right\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-lock-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-lock-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-lock-toggle-pseudo-element}\n );\n }\n\n // `.navigation-shelf-hover-toggle`\n #{defaults.$navigation-shelf-hover-toggle-selector-base}#{defaults.$navigation-shelf-hover-toggle-selector} {\n --#{root-defaults.$prefix}icon: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content,\n var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-enable-hover-content,\n #{map.get(defaults.$navigation-shelf-icons, \"enable-hover\")}\n )\n );\n --#{root-defaults.$prefix}icon-spacer: var(\n --#{root-defaults.$prefix}navigation-shelf-hover-toggle-spacer,\n 0\n );\n\n @include icon-mixins.apply-component(\n #{defaults.$navigation-shelf-hover-toggle-pseudo-element}\n );\n @include icon-mixins.apply-theme(\n #{defaults.$navigation-shelf-hover-toggle-pseudo-element}\n );\n }\n}\n","// @graupl/navigation-shelf navigation shelf component variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/variables\" as root-variables;\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"sass:map\";\n\n// Navigation shelf properties.\n$navigation-shelf-background: var(\n --#{root-defaults.$prefix}navigation-shelf-background,\n #{color.$background}\n);\n$navigation-shelf-color: var(\n --#{root-defaults.$prefix}navigation-shelf-color,\n #{color.$color}\n);\n$navigation-shelf-z-index: var(\n --#{root-defaults.$prefix}navigation-shelf-z-index,\n #{defaults.$navigation-shelf-z-index}\n);\n\n// Border properties.\n$navigation-shelf-border-top-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-top-style,\n #{root-variables.$border-top-style}\n);\n$navigation-shelf-border-right-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-right-style,\n #{root-variables.$border-right-style}\n);\n$navigation-shelf-border-bottom-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n$navigation-shelf-border-left-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-left-style,\n #{root-variables.$border-left-style}\n);\n$navigation-shelf-border-style: var(\n --#{root-defaults.$prefix}navigation-shelf-border-style,\n #{$navigation-shelf-border-top-style} #{$navigation-shelf-border-right-style}\n #{$navigation-shelf-border-bottom-style}\n #{$navigation-shelf-border-left-style}\n);\n$navigation-shelf-border-top-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-top-width,\n 0\n);\n$navigation-shelf-border-right-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-right-width,\n 0\n);\n$navigation-shelf-border-bottom-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-bottom-width,\n 0\n);\n$navigation-shelf-border-left-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-left-width,\n 0\n);\n$navigation-shelf-border-width: var(\n --#{root-defaults.$prefix}navigation-shelf-border-width,\n #{$navigation-shelf-border-top-width} #{$navigation-shelf-border-right-width}\n #{$navigation-shelf-border-bottom-width}\n #{$navigation-shelf-border-left-width}\n);\n$navigation-shelf-border-color: var(\n --#{root-defaults.$prefix}navigation-shelf-border-color,\n #{$navigation-shelf-color}\n);\n\n// Transform properties.\n$navigation-shelf-closed-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-transform,\n null\n);\n$navigation-shelf-open-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-open-transform,\n null\n);\n$navigation-shelf-transitioning-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-transform,\n null\n);\n$navigation-shelf-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-transform,\n #{$navigation-shelf-closed-transform}\n);\n$navigation-shelf-starting-transform: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-transform,\n #{$navigation-shelf-transform}\n);\n\n// Width properties.\n$navigation-shelf-min-width: var(\n --#{root-defaults.$prefix}navigation-shelf-min-width,\n #{defaults.$navigation-shelf-min-width}\n);\n$navigation-shelf-max-width: var(\n --#{root-defaults.$prefix}navigation-shelf-max-width,\n #{defaults.$navigation-shelf-max-width}\n);\n$navigation-shelf-closed-width: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-width,\n #{$navigation-shelf-min-width}\n);\n$navigation-shelf-open-width: var(\n --#{root-defaults.$prefix}navigation-shelf-open-width,\n #{$navigation-shelf-max-width}\n);\n$navigation-shelf-transitioning-width: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-width,\n #{$navigation-shelf-min-width}\n);\n$navigation-shelf-width: var(\n --#{root-defaults.$prefix}navigation-shelf-width,\n #{$navigation-shelf-closed-width}\n);\n$navigation-shelf-starting-width: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-width,\n #{$navigation-shelf-width}\n);\n$navigation-shelf-current-width: var(\n --#{root-defaults.$prefix}navigation-shelf-current-width,\n #{$navigation-shelf-width}\n);\n\n// Display properties.\n$navigation-shelf-closed-display: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-display,\n grid\n);\n$navigation-shelf-open-display: var(\n --#{root-defaults.$prefix}navigation-shelf-open-display,\n grid\n);\n$navigation-shelf-transitioning-display: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-display,\n grid\n);\n$navigation-shelf-display: var(\n --#{root-defaults.$prefix}navigation-shelf-display,\n #{$navigation-shelf-closed-display}\n);\n$navigation-shelf-starting-display: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-display,\n #{$navigation-shelf-display}\n);\n\n// Opacity properties.\n$navigation-shelf-closed-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-closed-opacity,\n 1\n);\n$navigation-shelf-open-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-open-opacity,\n 1\n);\n$navigation-shelf-transitioning-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-transitioning-opacity,\n 1\n);\n$navigation-shelf-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-opacity,\n #{$navigation-shelf-closed-opacity}\n);\n$navigation-shelf-starting-opacity: var(\n --#{root-defaults.$prefix}navigation-shelf-starting-opacity,\n #{$navigation-shelf-opacity}\n);\n\n// Transition properties.\n$navigation-shelf-transition-duration: var(\n --#{root-defaults.$prefix}navigation-shelf-transition-duration,\n #{map.get(root-variables.$transition-durations, fast)}\n);\n$navigation-shelf-transition: var(\n --#{root-defaults.$prefix}navigation-shelf-transition,\n width #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n transform #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n opacity #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n display #{$navigation-shelf-transition-duration} allow-discrete\n);\n$navigation-shelf-transition-initializing: (\n --#{root-defaults.$prefix}navigation-shelf-transition-initializing,\n none\n);\n$navigation-shelf-transition-reduced-motion: var(\n --#{root-defaults.$prefix}navigation-shelf-transition-reduced-motion,\n opacity #{$navigation-shelf-transition-duration}\n #{root-variables.$transition-timing-function},\n display #{$navigation-shelf-transition-duration} allow-discrete\n);\n","// @graupl/core animation media query mixins.\n\n// A media query for targeting users who have not requested reduced motion.\n@mixin on {\n @media (prefers-reduced-motion: no-preference) {\n @content;\n }\n}\n\n// A media query for targeting users who have requested reduced motion.\n@mixin off {\n @media (prefers-reduced-motion: reduce) {\n @content;\n }\n}\n","// @graupl/icons icon mixins.\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/mixins/state\";\n@use \"pkg:@graupl/core/src/mixins/theme\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n$-targets: (\n \"self\": \"&\",\n \"before\": \"&::before\",\n \"after\": \"&::after\",\n);\n\n/// Mixin to apply component styles for icons.\n@mixin apply-component($target: \"self\") {\n #{map.get($-targets, $target)} {\n display: $icon-display;\n width: $icon-width;\n height: $icon-height;\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n vertical-align: sub;\n mask-image: $icon;\n mask-repeat: no-repeat;\n mask-size: contain;\n mask-position: center;\n\n @if $target == \"before\" or $target == \"after\" {\n content: \"\";\n }\n }\n}\n\n/// Mixin to apply theme styles for icons.\n@mixin apply-theme($target: \"self\") {\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$icon-theme-map,\n defaults.$icon-theme-selector-base,\n defaults.$icon-theme-selector-prefix,\n \"icon-\"\n );\n }\n\n #{map.get($-targets, $target)} {\n background-color: $icon-color;\n }\n}\n\n/// Mixin to bind icon colors to a component.\n///\n/// @param {CustomProperty} $color - The default color prop for the icon.\n/// @param {Map} $states - A map of states and color props for the icon.\n@mixin bind($color, $states) {\n --#{root-defaults.$prefix}icon-color: #{$color};\n\n @include state.generate-modifiers(\n (--#{root-defaults.$prefix}icon-color: $states)\n );\n}\n\n@mixin apply($target: \"self\") {\n @include apply-component($target);\n @include apply-theme($target);\n}\n","// @graupl/icons icon componet variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Property | Default |\n// | ------------------------- | ------------------------- |\n// | --graupl-icon-display | inline-block |\n// | --graupl-icon-size | 1.25em |\n// | --graupl-icon-width | var(--graupl-icon-size) |\n// | --graupl-icon-height | var(--graupl-icon-size) |\n// | --graupl-icon-color | var(--graupl-color) |\n// | --graupl-icon | none |\n// | --graupl-icon-spacer | var(--graupl-spacer-2) |\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"pkg:@graupl/core/src/variables\" as root-variables;\n@use \"sass:map\";\n\n$icon-display: var(\n --#{root-defaults.$prefix}icon-display,\n #{defaults.$icon-display}\n);\n$icon-size: var(--#{root-defaults.$prefix}icon-size, #{defaults.$icon-size});\n$icon-width: var(--#{root-defaults.$prefix}icon-width, #{$icon-size});\n$icon-height: var(--#{root-defaults.$prefix}icon-height, #{$icon-size});\n$icon-color: var(--#{root-defaults.$prefix}icon-color, #{color.$color});\n$icon: var(--#{root-defaults.$prefix}icon, none);\n$icon-spacer: var(\n --#{root-defaults.$prefix}icon-spacer,\n #{map.get(root-variables.$spacers, 2)}\n);\n","// @graupl/core theme mixins.\n//\n// A series of mixins to tie styles to a theme-mode.\n\n@use \"../functions/theme\";\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies styles to a specific theme mode.\n///\n/// @param {string} $theme-name\n/// The name of the theme mode to apply the styles to.\n@mixin theme($theme-name) {\n #{color-defaults.$theme-selector-base}#{color-defaults.$theme-selector-prefix}#{$theme-name}#{color-defaults.$theme-selector-suffix} {\n @content;\n }\n}\n\n/// Generates a theme modifiers with custom props.\n///\n/// @param {map} $theme-map\n/// The map of custom props.\n/// @param {string} $selector-base\n/// The selector base for the theme modifier.\n/// @param {string} $selector-prefix\n/// The selector prefix for the theme modifer.\n/// @param {string} $scope\n/// The scope of the custom properties.\n/// @param {string} $base\n/// The base selector to append the theme modifier to.\n@mixin generate-modifiers(\n $theme-map,\n $selector-base,\n $selector-prefix,\n $scope: \"\",\n $base: \"&\"\n) {\n @each $color, $map in $theme-map {\n // e.g. &.primary, &.secondary, &.tertiary\n #{$base}#{$selector-base}#{$selector-prefix}#{$color} {\n @each $prop, $value in $map {\n --#{root-defaults.$prefix}#{$scope}#{$prop}: #{theme.get(\n map.get($value, color),\n map.get($value, shade)\n )};\n }\n }\n }\n}\n","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n @if root-defaults.$use-layers {\n @layer #{root-defaults.$id}.#{$layer} {\n @content;\n }\n } @else {\n @content;\n }\n}\n","// @graupl/core utility mixins.\n//\n// Mixins to help generate utility classes.\n\n@use \"./screen\";\n@use \"./container\";\n@use \"./state\";\n@use \"./theme\";\n@use \"../functions/important\";\n@use \"../functions/utility\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:string\";\n\n/// Insert a map of properties and values into a utility class.\n///\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {Boolean} $important\n/// A flag to determine if the important flag should be added.\n@mixin _insert($map, $important: null) {\n @each $prop, $value in $map {\n // Do not attempt to insert important values inside of custom properties.\n @if string.slice($prop, 1, 2) != \"--\" {\n #{$prop}: important.insert(#{$value}, $override: $important);\n } @else {\n #{$prop}: #{$value};\n }\n }\n\n // Allow for custom overrides and additional styles.\n @content;\n}\n\n/// Handles wrapping utilities with a conditional state.\n///\n/// @param {?string} $state\n/// The state to wrap.\n@mixin _handle-state($state: null) {\n @if $state {\n @include state.state($state) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional screen.\n///\n/// @param {?string} $screen\n/// The screen to wrap.\n@mixin _handle-screen($screen: null) {\n @if $screen {\n @include screen.up($screen) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional container.\n///\n/// @param {?string} $container\n/// The container to wrap.\n@mixin _handle-container($container: null) {\n @if $container {\n @include container.up($container) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional theme.\n///\n/// @param {?string} $theme\n/// The theme mode to wrap.\n@mixin _handle-theme($theme: null) {\n @if $theme {\n @include theme.theme($theme) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Create a utility class with a list of properties and a single value.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {string|List} $property\n/// The property/properties to apply to the selector.\n/// @param {string} $value\n/// The value to apply to the property/properties.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create(\n $selector,\n $property,\n $value,\n $important: null,\n $screen: null,\n $theme: null,\n $state: null,\n $container: null\n) {\n $map: utility.convert-property-values-to-map($property, $value);\n\n @include create-mapped(\n $selector,\n $map,\n $important: $important,\n $screen: $screen,\n $theme: $theme,\n $state: $state,\n $container: $container\n ) {\n @content;\n }\n}\n\n/// Create a utility class with a map of properties and values.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create-mapped(\n $selector,\n $map,\n $important: null,\n $screen: null,\n $theme: null,\n $state: null,\n $container: null\n) {\n @include _handle-theme($theme) {\n #{$selector} {\n @if $screen or $container {\n @if $screen {\n @include _handle-screen($screen) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n\n @if $container {\n @include _handle-container($container) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n } @else {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n }\n}\n","// @graupl/navigation-shelf [_template] utilities styles.\n//\n// This file generates the [_template] utility classes provided by Graupl.\n//\n// The following classes are generated by default:\n// - `.template-class`: Applies the base value for the property.\n//\n// The following custom properties control the generated classes:\n// - N/A.\n//\n// The following variables control the generated classes:\n// - `$selector-base`: The base selector for the utility classes.\n// - `$use-important`: A flag to determine if the `!important` flag should be added to the utility classes.\n// - `$generate-base-utilities`: A flag to determine if the base utility classes should be generated.\n// - `$screen-aware`: A flag to generate screen-aware utility classes.\n// - `$theme-aware`: A flag to generate theme-aware utility classes.\n// - `$state-aware`: A flag to generate state-aware utility classes.\n// - `$container-aware`: A flag to generate container-aware utility classes.\n// - `$screen-aware-separator`: The separator for screen-aware utility classes.\n// - `$theme-aware-separator`: The separator for theme-aware utility classes.\n// - `$state-aware-separator`: The separator for state-aware utility classes.\n// - `$container-aware-separator`: The separator for container-aware utility classes.\n// - `$screen-aware-selector-prefix`: The prefix for screen-aware utility classes.\n// - `$theme-aware-selector-prefix`: The prefix for theme-aware utility classes.\n// - `$state-aware-selector-prefix`: The prefix for state-aware utility classes.\n// - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.\n// - `$template-selector-prefix`: The prefix for the utility classes.\n// - `$custom-template-properties`: The custom properties and values for the template utility classes.\n// - `$template-properties`: The merged properties and values for the template utility classes.\n//\n// Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.\n// By default, no responsive utility classes are generated.\n//\n// When set to true, screen-aware utility classes will be generated for each screen size in the following pattern:\n// - `.{screen-prefix}{screen-name}:{prefix}{value}`\n//\n// e.g. `.sm:[template-class]` will set the `template` property to `value` on screens equal to or larger than the `sm` breakpoint.\n//\n// When set to true, theme-aware utility classes will be generated for each theme in the following pattern:\n// - `.{theme-prefix}{theme-name}:{prefix}{value}`\n//\n// e.g. `.dark:[template-class]` will set the `template` property to `value` when the `dark` theme is active.\n//\n// When set to true, state-aware utility classes will be generated for each state in the following pattern:\n// - `.{state-prefix}{state-name}:{prefix}{value}`\n//\n// e.g. `.hover:[template-class]` will set the `template` property to `value` when the element is hovered.\n//\n// When set to true, container-aware utility classes will be generated for each container in the following pattern:\n// - `.{container-prefix}{container-name}:{prefix}{value}`\n//\n// e.g. `.cq:md:[template-class]` will set the `template` property to `value` when the parent container is larger than the `md` breakpoint.\n//\n// @example\n// <div class=\"template-class\">This content showing you how to use this.</div>\n\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/mixins/layer\" as *;\n@use \"pkg:@graupl/core/src/mixins/utility\";\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"defaults\";\n@use \"sass:map\";\n@use \"variables\" as *;\n@use \"../../component/navigation-shelf/defaults\" as navigation-shelf-defaults;\n@use \"../../component/navigation-shelf/variables\" as navigation-shelf-variables;\n@use \"pkg:@graupl/core/src/functions/important\";\n\n@include layer(utilities) {\n // `.`\n $selector-prefix: defaults.$selector-base;\n\n // `.shelf-aware`\n $selector: #{$selector-prefix}#{defaults.$shelf-aware-selector};\n\n @include utility.create-mapped(\n $selector,\n (\n padding-right: 0,\n padding-left: navigation-shelf-variables.$navigation-shelf-closed-width,\n ),\n $important: #{defaults.$use-important}\n ) {\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n\n // `&.left-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-left-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(0, defaults.$use-important);\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n\n // `&.right-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-right-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n padding-left: important.insert(0, defaults.$use-important);\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n }\n\n // Generate screen-aware utilities.\n @if defaults.$screen-aware and root-defaults.$screen-aware-utilities {\n @each $screen-name in map.keys(root-defaults.$screen-sizes) {\n // e.g. `.md:` or `.lg:`\n $selector-prefix: #{defaults.$selector-base}#{defaults.$screen-aware-selector-prefix}#{$screen-name}#{defaults.$screen-aware-separator};\n\n // e.g. `.md:shelf-aware`\n $selector: #{$selector-prefix}#{defaults.$shelf-aware-selector};\n\n @include utility.create-mapped(\n $selector,\n (\n padding-right: 0,\n padding-left:\n navigation-shelf-variables.$navigation-shelf-closed-width,\n ),\n $important: #{defaults.$use-important},\n $screen: $screen-name\n ) {\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n\n // `&.left-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-left-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(0, defaults.$use-important);\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n\n // `&.right-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-right-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n padding-left: important.insert(0, defaults.$use-important);\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n }\n }\n }\n\n // Generate theme-aware utilities.\n @if defaults.$theme-aware and root-defaults.$theme-aware-utilities {\n @each $theme-name, $colors in color.$themes {\n @if $theme-name != active {\n // e.g. `.dark:` or `.light:`\n $selector-prefix: #{defaults.$selector-base}#{defaults.$theme-aware-selector-prefix}#{$theme-name}#{defaults.$theme-aware-separator};\n\n // e.g. `.dark:shelf-aware` or `.light:shelf-aware`\n $selector: #{$selector-prefix}#{defaults.$shelf-aware-selector};\n\n @include utility.create-mapped(\n $selector,\n (\n padding-right: 0,\n padding-left:\n navigation-shelf-variables.$navigation-shelf-closed-width,\n ),\n $important: #{defaults.$use-important},\n $theme: $theme-name\n ) {\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n\n // `&.left-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-left-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(0, defaults.$use-important);\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n\n // `&.right-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-right-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n padding-left: important.insert(0, defaults.$use-important);\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n }\n }\n }\n }\n\n // Generate state-aware utilities.\n @if defaults.$state-aware and root-defaults.$state-aware-utilities {\n @each $state-name, $value in root-defaults.$state-selectors {\n // e.g. `.hover:` or `.focus:`\n $selector-prefix: #{defaults.$selector-base}#{defaults.$state-aware-selector-prefix}#{$state-name}#{defaults.$state-aware-separator};\n\n // e.g. `.hover:shelf-aware` or `.focus:shelf-aware`\n $selector: #{$selector-prefix}#{defaults.$shelf-aware-selector};\n\n @include utility.create-mapped(\n $selector,\n (\n padding-right: 0,\n padding-left:\n navigation-shelf-variables.$navigation-shelf-closed-width,\n ),\n $important: #{defaults.$use-important},\n $state: $state-name\n ) {\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n\n // `&.left-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-left-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(0, defaults.$use-important);\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n\n // `&.right-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-right-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n padding-left: important.insert(0, defaults.$use-important);\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n }\n }\n }\n\n // Generate container-aware utilities.\n @if defaults.$container-aware and root-defaults.$container-aware-utilities {\n @each $container-name in map.keys(root-defaults.$container-sizes) {\n // e.g. `.md:` or `.lg:`\n $selector-prefix: #{defaults.$selector-base}#{defaults.$container-aware-selector-prefix}#{$container-name}#{defaults.$container-aware-separator};\n\n // e.g. `.cq:md:shelf-aware`\n $selector: #{$selector-prefix}#{defaults.$shelf-aware-selector};\n\n @include utility.create-mapped(\n $selector,\n (\n padding-right: 0,\n padding-left:\n navigation-shelf-variables.$navigation-shelf-closed-width,\n ),\n $important: #{defaults.$use-important},\n $container: $container-name\n ) {\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n\n // `&.left-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-left-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(0, defaults.$use-important);\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-left: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n\n // `&.right-side`\n &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-right-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-closed-width,\n defaults.$use-important\n );\n padding-left: important.insert(0, defaults.$use-important);\n\n // `&.locked`\n &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {\n padding-right: important.insert(\n navigation-shelf-variables.$navigation-shelf-open-width,\n defaults.$use-important\n );\n }\n }\n }\n }\n }\n}\n"],"names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@graupl/navigation-shelf",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.26",
|
|
4
4
|
"description": "A plugin for Graupl that provides a navigation shelf component.",
|
|
5
5
|
"main": "dist/js/navigation-shelf.cjs.js",
|
|
6
6
|
"module": "dist/js/navigation-shelf.es.js",
|