@mozaic-ds/web-components 1.5.1 → 1.6.0

package/dist/components/sidebarfooter/SidebarFooter.svelte.d.ts

@@ -0,0 +1,60 @@
+/**
+ * SidebarFooter is a component that renders the footer of a sidebar. It can display a user profile with an optional avatar, title, subtitle, and link, and includes a button to expand or collapse the sidebar.
+ * @slot - default - Contains one or more SidebarNavItem components used to render the profile items.
+ * @event toggle {CustomEvent<boolean>} - Emits when the toggle button is clicked.
+ * @event logout {CustomEvent} - Emits when the log out button in the footer menu is clicked.
+ */
+interface Props {
+    /**
+     * The main text or name displayed in the sidebar footer profile.
+     */
+    title?: string;
+    /**
+     * Secondary text or description displayed under the title in the footer.
+     */
+    subtitle?: string;
+    /**
+     * URL of the avatar image displayed in the footer profile.
+     */
+    avatar?: string;
+    /**
+     * if `true`, hides the sidebar expand/collapse button.
+     */
+    expandable?: boolean;
+    /**
+     * Text to display for the log out button.
+     */
+    logOutLabel?: string;
+    /**
+     * Callback to trigger when the user clicks the log out button in the footer menu.
+     */
+    onlogout?: () => void;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const SidebarFooter: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type SidebarFooter = InstanceType<typeof SidebarFooter>;
+export default SidebarFooter;
+//# sourceMappingURL=SidebarFooter.svelte.d.ts.map

package/dist/components/sidebarfooter/SidebarFooter.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarFooter.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/sidebarfooter/SidebarFooter.svelte.ts"],"names":[],"mappings":"AAYE;;;;;GAKG;AAEH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAqJH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,aAAa;;;;;;UAAqF,CAAC;AACvF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}

package/dist/components/sidebarfooter/_SidebarFooterMenu.js

@@ -0,0 +1,18 @@
+import{c as k,e as z,a as L,p as t,k as h,b as j,d as F,f as I,j as i,i as o,r as a}from"../../custom-element.js";import{s as O}from"../../slot.js";import{a as K}from"../../attributes.js";import{b as S}from"../../this.js";import{D}from"../divider/Divider.js";import{S as M}from"../sidebarnavitem/SidebarNavItem.js";import{L as N}from"../../Condition20.js";import"../../index-client.js";import"../../if.js";import"../../branches.js";import"../../svelte-component.js";import"../../svelte-element.js";import"../tooltip/Tooltip.js";import"../../floating-item.svelte.js";import"../../media-query.js";import"../../sidebar-state.svelte.js";var P=I('<div><div class="mc-sidebar__footer-menu svelte-191d4yd"><ul class="mc-sidebar__list svelte-191d4yd"><!></ul> <span class="mc-sidebar__footer-menu-divider svelte-191d4yd"><!></span> <div class="mc-sidebar__item mc-sidebar__item--sub svelte-191d4yd"><!></div></div></div>');const q={hash:"svelte-191d4yd",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-sidebar.svelte-191d4yd {display:flex;align-items:start;font-size:var(--font-size-100, 0.875rem);color:var(--sidebar-color-text-default, #404040);box-sizing:border-box;background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));padding-right:4rem;position:relative;}
+@media screen and (min-width: 680px) {.mc-sidebar.svelte-191d4yd {display:inline-flex;padding-right:0;}
+}.mc-sidebar__wrapper.svelte-191d4yd {display:flex;flex-direction:column;gap:0.75rem;min-height:100vh;width:100%;padding:0.75rem;background-color:var(--sidebar-color-background-primary, #ffffff);}
+@media screen and (min-width: 680px) {.mc-sidebar__wrapper.svelte-191d4yd {width:17.25rem;}
+}.mc-sidebar__close-button.svelte-191d4yd {position:absolute;top:0.5rem;right:0.5rem;}
+@media screen and (min-width: 680px) {.mc-sidebar__close-button.svelte-191d4yd {display:none;}
+}.mc-sidebar__container.svelte-191d4yd {flex-grow:1;}.mc-sidebar__floating-item.svelte-191d4yd {position:absolute;padding-left:1.25rem;left:3rem;}.mc-sidebar__floating-item--tooltip.svelte-191d4yd {top:0.25rem;}.mc-sidebar__floating-item--expanded.svelte-191d4yd {left:0;padding:0;}
+@media screen and (min-width: 680px) {.mc-sidebar__floating-item--expanded.svelte-191d4yd {left:18.5rem;}
+}.mc-sidebar__floating-item--hidden.svelte-191d4yd {visibility:hidden;overflow:hidden;opacity:0;height:0;pointer-events:none;}.mc-sidebar--collapsed.svelte-191d4yd {width:4rem;}.mc-sidebar__footer-container.svelte-191d4yd {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;margin-top:0.5rem;}.mc-sidebar__footer-avatar.svelte-191d4yd {width:2rem;height:2rem;border-radius:var(--border-radius-full, 100%);}.mc-sidebar__footer-profile.svelte-191d4yd {display:flex;align-items:center;gap:0.5rem;height:2.5rem;flex-grow:1;border-radius:var(--border-radius-s, 0.25rem);background-color:var(--sidebar-color-extra-feature-background-default, rgba(255, 255, 255, 0.01));cursor:pointer;border:none;}.mc-sidebar__footer-profile.svelte-191d4yd:hover {background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));}.mc-sidebar__footer-content.svelte-191d4yd {display:none;}.mc-sidebar__footer-title.svelte-191d4yd {margin:0;text-align:left;color:var(--sidebar-color-section-item-text-default, #404040);font-weight:var(--font-weight-bold, 700);}.mc-sidebar__footer-subtitle.svelte-191d4yd {margin:0;font-size:var(--font-caption, 0.75rem);color:var(--sidebar-color-job-title, #666666);}.mc-sidebar__footer-expand.svelte-191d4yd {display:none;min-width:2.5rem;min-height:2.5rem;width:2.5rem;height:2.5rem;transform:none;}
+@media screen and (min-width: 680px) {.mc-sidebar__footer-expand.svelte-191d4yd {display:inline-flex;}
+}.mc-sidebar__footer-expand--mobile.svelte-191d4yd {position:relative;}
+@media screen and (min-width: 680px) {.mc-sidebar__footer-expand--mobile.svelte-191d4yd {display:none;}
+}.mc-sidebar__footer-menu.svelte-191d4yd {width:19.75rem;box-sizing:border-box;padding:0.5rem 0.75rem;background-color:var(--listbox-color-background, #ffffff);border:1px solid var(--listbox-color-border, #cccccc);border-radius:var(--border-radius-m, 0.5rem);box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));}
+@media screen and (min-width: 680px) {.mc-sidebar__footer-menu.svelte-191d4yd {width:18.75rem;}
+}.mc-sidebar__footer-menu.svelte-191d4yd .mc-sidebar__footer-menu-divider:where(.svelte-191d4yd) {margin:0.5rem 0.75rem;}.mc-sidebar__header.svelte-191d4yd {display:flex;align-items:center;justify-content:center;gap:0.5rem;}.mc-sidebar__header-logo.svelte-191d4yd {width:2.5rem;height:2.5rem;}.mc-sidebar__header-title.svelte-191d4yd {font-size:var(--font-size-200, 1.125rem);font-weight:var(--font-weight-bold, 700);color:var(--sidebar-color-product-name, #000000);margin:0;flex-grow:1;display:none;}.mc-sidebar__listbox.svelte-191d4yd {min-width:18.75rem;border-radius:var(--border-radius-m, 0.5rem);background-color:var(--listbox-color-background, #ffffff);padding:1rem;display:flex;flex-direction:column;gap:0.25rem;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));}.mc-sidebar__listbox-title.svelte-191d4yd {font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);padding-bottom:0.75rem;margin:0;border-bottom:1px solid var(--divider-color-primary, #cccccc);color:var(--sidebar-color-shortcut-item-text-default, #404040);}.mc-sidebar__list.svelte-191d4yd {list-style-type:none;margin:0;padding:0;}.mc-sidebar__link.svelte-191d4yd {display:flex;align-items:center;gap:0.25rem;height:2.5rem;width:100%;padding-left:0.25rem;text-align:left;text-decoration:none;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--sidebar-color-section-item-text-default, #404040);border-radius:var(--border-radius-m, 0.5rem);background:transparent;border:none;cursor:pointer;}.mc-sidebar__link--selected.svelte-191d4yd {color:var(--sidebar-color-section-item-text-selected, #006902);background:var(--sidebar-color-section-item-background-selected, #ebf5de);}.mc-sidebar__link--locked.svelte-191d4yd {pointer-events:none;}.mc-sidebar__link.svelte-191d4yd:not(.mc-sidebar__link--selected):hover {background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));}.mc-sidebar__link.svelte-191d4yd:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-sidebar__icon.svelte-191d4yd {fill:currentcolor;width:1.5rem;height:1.5rem;}.mc-sidebar__indicator.svelte-191d4yd {fill:currentcolor;width:1.25rem;height:1.25rem;}.mc-sidebar__text.svelte-191d4yd {display:block;}.mc-sidebar__sub.svelte-191d4yd {width:1.25rem;height:1.25rem;}.mc-sidebar__sublist.svelte-191d4yd {list-style-type:none;margin:0;padding:0 0 0 2rem;display:flex;flex-direction:column;gap:0.25rem;}.mc-sidebar__item.svelte-191d4yd {position:relative;}.mc-sidebar__shortcut-wrapper.svelte-191d4yd {width:100%;display:grid;justify-content:center;position:relative;}.mc-sidebar__shortcut-list.svelte-191d4yd {display:flex;margin:0;}.mc-sidebar__shortcut-list--grid.svelte-191d4yd {padding:0;gap:0.5rem;align-items:center;}.mc-sidebar__shortcut-list--stacked.svelte-191d4yd {gap:0.25rem;flex-direction:column;padding:0;}.mc-sidebar__shortcut-list--stacked.svelte-191d4yd:not(.mc-sidebar__shortcut-list--floating) {padding:0 0 0.5rem 1rem;margin-bottom:0.5rem;border-bottom:1px solid var(--divider-color-primary, #cccccc);}.mc-sidebar__shortcut-item.svelte-191d4yd {cursor:pointer;display:flex;align-items:center;list-style:none;border-radius:var(--border-radius-m, 0.5rem);overflow:hidden;}.mc-sidebar__shortcut-item.svelte-191d4yd:hover {background-color:var(--sidebar-color-shortcut-item-background-hover, rgba(70, 78, 99, 0.2));}.mc-sidebar__shortcut-item.svelte-191d4yd:nth-child(n+5) {display:none;}.mc-sidebar__shortcut-item--grid.svelte-191d4yd {justify-content:center;padding:0 0.125rem;height:3rem;width:3.9375rem;background-color:var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));}.mc-sidebar__shortcut-item--stacked.svelte-191d4yd {padding:0.125rem 0.25rem;width:12.5rem;height:2.5rem;}.mc-sidebar__shortcut-item--stacked.mc-sidebar__shortcut-item--floating.svelte-191d4yd {width:100%;padding:0.125rem 0 0.125rem 0.25rem;}.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item.svelte-191d4yd {background-color:var(--sidebar-color-shortcut-item-background-selected, #ebf5de);}.mc-sidebar__shortcut-item.svelte-191d4yd:is(.mc-sidebar__trigger:where(.svelte-191d4yd)) {width:3rem;height:3rem;justify-content:center;border:none;background-color:var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));}.mc-sidebar__shortcut-item.svelte-191d4yd:is(.mc-sidebar__trigger:where(.svelte-191d4yd)):hover {background-color:var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));}.mc-sidebar__shortcut-link.svelte-191d4yd:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-sidebar__shortcut-link.svelte-191d4yd {text-decoration:none;display:flex;align-items:center;justify-content:center;}.mc-sidebar__shortcut-label.svelte-191d4yd {font-size:var(--font-size-25, 0.625rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--sidebar-color-shortcut-item-text-default, #404040);white-space:nowrap;overflow:hidden;}.mc-sidebar__shortcut-icon.svelte-191d4yd {fill:var(--sidebar-color-shortcut-item-text-default, #404040);width:1.5rem;height:1.5rem;}`};function A(f,r){z(r,!0),L(f,q);let c=t(r,"logOutLabel",7),s=t(r,"expanded",7),m=t(r,"onListboxKeydown",7),l=t(r,"hideFloatingItem",7),n=t(r,"listbox",15),b=t(r,"onlogout",7);var p={get logOutLabel(){return c()},set logOutLabel(e){c(e),o()},get expanded(){return s()},set expanded(e){s(e),o()},get onListboxKeydown(){return m()},set onListboxKeydown(e){m(e),o()},get hideFloatingItem(){return l()},set hideFloatingItem(e){l(e),o()},get listbox(){return n()},set listbox(e){n(e),o()},get onlogout(){return b()},set onlogout(e){b(e),o()}},d=P();K(d,()=>({id:"listbox-footer",tabindex:"0",role:"menu",class:{"mc-sidebar__floating-item mc-sidebar__floating-item--hidden":!0,"mc-sidebar__floating-item--expanded":s()},...s()?{}:{onkeydown:m(),onmouseleave:l(),onblur:l()}}),void 0,void 0,void 0,"svelte-191d4yd");var g=i(d),v=i(g),y=i(v);O(y,r,"default",{},null),a(v);var u=h(v,2),x=i(u);D(x,{}),a(u);var _=h(u,2),w=i(_);return M(w,{tag:"div",get label(){return c()},sub:!0,get onclick(){return b()},$$slots:{icon:(e,B)=>{N(e,{slot:"icon"})}}}),a(_),a(g),a(d),S(d,e=>n(e),()=>n()),j(f,d),F(p)}k(A,{logOutLabel:{},expanded:{},onListboxKeydown:{},hideFloatingItem:{},listbox:{},onlogout:{}},["default"],[],{mode:"open"});export{A as _};
+//# sourceMappingURL=_SidebarFooterMenu.js.map

package/dist/components/sidebarfooter/_SidebarFooterMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_SidebarFooterMenu.js","sources":["../../../src/components/sidebarfooter/_SidebarFooterMenu.svelte"],"sourcesContent":["<script lang=\"ts\">\n  import Divider from '../divider/Divider.svelte';\n  import SidebarNavItem from '../sidebarnavitem/SidebarNavItem.svelte';\n  import { LogOut24 } from '@mozaic-ds/icons-svelte';\n\n  interface Props {\n    logOutLabel: string;\n    expanded: boolean;\n    onListboxKeydown: (event: KeyboardEvent) => void;\n    hideFloatingItem: () => void;\n    listbox: HTMLElement | null;\n    onlogout: () => void;\n  }\n\n  let {\n    logOutLabel,\n    expanded,\n    onListboxKeydown,\n    hideFloatingItem,\n    listbox = $bindable(),\n    onlogout,\n  }: Props = $props();\n</script>\n\n<div\n  bind:this={listbox}\n  id=\"listbox-footer\"\n  tabindex=\"0\"\n  role=\"menu\"\n  class={{\n    'mc-sidebar__floating-item mc-sidebar__floating-item--hidden': true,\n    'mc-sidebar__floating-item--expanded': expanded,\n  }}\n  {...expanded\n    ? {}\n    : {\n        onkeydown: onListboxKeydown,\n        onmouseleave: hideFloatingItem,\n        onblur: hideFloatingItem,\n      }}\n>\n  <div class=\"mc-sidebar__footer-menu\">\n    <ul class=\"mc-sidebar__list\">\n      <slot />\n    </ul>\n\n    <span class=\"mc-sidebar__footer-menu-divider\">\n      <Divider />\n    </span>\n\n    <div class=\"mc-sidebar__item mc-sidebar__item--sub\">\n      <SidebarNavItem tag=\"div\" label={logOutLabel} sub onclick={onlogout}>\n        <LogOut24 slot=\"icon\" />\n      </SidebarNavItem>\n    </div>\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/sidebar';\n</style>\n"],"names":["logOutLabel","$.prop","$$props","expanded","onListboxKeydown","hideFloatingItem","listbox","onlogout","div","root","div_1","$.child","ul","span","Divider","node_1","div_2","SidebarNavItem","node_2","LogOut24","$$anchor","$.reset","$$value","$.append"],"mappings":";;;;;;;;;;;;;;;;mhLAAA,oBAeIA,EAAWC,EAAAC,EAAA,cAAA,CAAA,EACXC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,EAAgBH,EAAAC,EAAA,mBAAA,CAAA,EAChBG,EAAgBJ,EAAAC,EAAA,mBAAA,CAAA,EAChBI,EAAOL,EAAAC,EAAA,UAAA,EAAA,EACPK,EAAQN,EAAAC,EAAA,WAAA,CAAA,4WAIXM,EAAAC,EAAA,IAAAD,4DAMG,8DAA+D,GAC/D,sCAAuCL,EAAQ,GAE7C,GAAAA,EAAA,MAGE,UAAWC,EAAgB,EAC3B,aAAcC,EAAgB,EAC9B,OAAQA,EAAgB,4CAG7B,IAAAK,EAAGC,EAjBLH,CAAA,EAkBII,IADFF,CAAG,MACDE,CAAE,6BAAFA,CAAE,EAIF,IAAAC,IAJAD,EAAE,CAAA,MAIFC,CAAI,EACFC,EAAOC,EAAA,EAAA,IADTF,CAAI,EAIJ,IAAAG,IAJAH,EAAI,CAAA,MAIJG,CAAG,EACD,OAAAC,EAAcC,EAAA,8BAAkBlB,EAAW,+BAAeO,EAAQ,yBAChEY,EAAQC,EAAA,CAAA,KAAA,MAAA,CAAA,QAFZJ,CAAG,IATLN,CAAG,EAjBLW,EAAAb,CAAA,IAAAA,EAAAc,GACYhB,SAAAA,GAAO,EADnBiB,EAAAH,EAAAZ,CAAA,MAFO"}

package/dist/components/sidebarfooter/_SidebarFooterMenu.svelte

@@ -0,0 +1,517 @@
+<script lang="ts">
+  import Divider from '../divider/Divider.svelte';
+  import SidebarNavItem from '../sidebarnavitem/SidebarNavItem.svelte';
+  import { LogOut24 } from '@mozaic-ds/icons-svelte';
+
+  interface Props {
+    logOutLabel: string;
+    expanded: boolean;
+    onListboxKeydown: (event: KeyboardEvent) => void;
+    hideFloatingItem: () => void;
+    listbox: HTMLElement | null;
+    onlogout: () => void;
+  }
+
+  let {
+    logOutLabel,
+    expanded,
+    onListboxKeydown,
+    hideFloatingItem,
+    listbox = $bindable(),
+    onlogout,
+  }: Props = $props();
+</script>
+
+<div
+  bind:this={listbox}
+  id="listbox-footer"
+  tabindex="0"
+  role="menu"
+  class={{
+    'mc-sidebar__floating-item mc-sidebar__floating-item--hidden': true,
+    'mc-sidebar__floating-item--expanded': expanded,
+  }}
+  {...expanded
+    ? {}
+    : {
+        onkeydown: onListboxKeydown,
+        onmouseleave: hideFloatingItem,
+        onblur: hideFloatingItem,
+      }}
+>
+  <div class="mc-sidebar__footer-menu">
+    <ul class="mc-sidebar__list">
+      <slot />
+    </ul>
+
+    <span class="mc-sidebar__footer-menu-divider">
+      <Divider />
+    </span>
+
+    <div class="mc-sidebar__item mc-sidebar__item--sub">
+      <SidebarNavItem tag="div" label={logOutLabel} sub onclick={onlogout}>
+        <LogOut24 slot="icon" />
+      </SidebarNavItem>
+    </div>
+  </div>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-sidebar {
+  display: flex;
+  align-items: start;
+  font-size: var(--font-size-100, 0.875rem);
+  color: var(--sidebar-color-text-default, #404040);
+  box-sizing: border-box;
+  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
+  padding-right: 4rem;
+  position: relative;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar {
+    display: inline-flex;
+    padding-right: 0;
+  }
+}
+.mc-sidebar__wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-height: 100vh;
+  width: 100%;
+  padding: 0.75rem;
+  background-color: var(--sidebar-color-background-primary, #ffffff);
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__wrapper {
+    width: 17.25rem;
+  }
+}
+.mc-sidebar__close-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__close-button {
+    display: none;
+  }
+}
+.mc-sidebar__container {
+  flex-grow: 1;
+}
+.mc-sidebar__floating-item {
+  position: absolute;
+  padding-left: 1.25rem;
+  left: 3rem;
+}
+.mc-sidebar__floating-item--tooltip {
+  top: 0.25rem;
+}
+.mc-sidebar__floating-item--expanded {
+  left: 0;
+  padding: 0;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__floating-item--expanded {
+    left: 18.5rem;
+  }
+}
+.mc-sidebar__floating-item--hidden {
+  visibility: hidden;
+  overflow: hidden;
+  opacity: 0;
+  height: 0;
+  pointer-events: none;
+}
+.mc-sidebar--expanded .mc-sidebar__menu {
+  padding: 0 0.25rem;
+}
+.mc-sidebar--collapsed {
+  width: 4rem;
+}
+.mc-sidebar--collapsed .mc-sidebar__menu {
+  padding: 0;
+}
+
+.mc-sidebar__footer-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+.mc-sidebar__footer-avatar {
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--border-radius-full, 100%);
+}
+.mc-sidebar__footer-profile {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 2.5rem;
+  flex-grow: 1;
+  border-radius: var(--border-radius-s, 0.25rem);
+  background-color: var(--sidebar-color-extra-feature-background-default, rgba(255, 255, 255, 0.01));
+  cursor: pointer;
+  border: none;
+}
+.mc-sidebar__footer-profile:hover {
+  background: var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-sidebar__footer-content {
+  display: none;
+}
+.mc-sidebar__footer-title {
+  margin: 0;
+  text-align: left;
+  color: var(--sidebar-color-section-item-text-default, #404040);
+  font-weight: var(--font-weight-bold, 700);
+}
+.mc-sidebar__footer-subtitle {
+  margin: 0;
+  font-size: var(--font-caption, 0.75rem);
+  color: var(--sidebar-color-job-title, #666666);
+}
+.mc-sidebar__footer-expand {
+  display: none;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  transform: none;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__footer-expand {
+    display: inline-flex;
+  }
+}
+.mc-sidebar__footer-expand--mobile {
+  position: relative;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__footer-expand--mobile {
+    display: none;
+  }
+}
+.mc-sidebar__footer--expanded .mc-sidebar__footer-container {
+  flex-direction: row;
+  justify-content: flex-end;
+  height: 3.5rem;
+}
+.mc-sidebar__footer--expanded .mc-sidebar__footer-content {
+  display: block;
+}
+.mc-sidebar__footer--expanded .mc-sidebar__footer-expand {
+  transform: rotate(180deg);
+}
+.mc-sidebar__footer--collapsed .mc-sidebar__footer-container {
+  flex-direction: column;
+  justify-content: flex-start;
+  height: auto;
+}
+.mc-sidebar__footer--collapsed .mc-sidebar__footer-content {
+  display: none;
+}
+.mc-sidebar__footer--collapsed .mc-sidebar__footer-expand {
+  transform: none;
+}
+.mc-sidebar__footer-menu {
+  width: 19.75rem;
+  box-sizing: border-box;
+  padding: 0.5rem 0.75rem;
+  background-color: var(--listbox-color-background, #ffffff);
+  border: 1px solid var(--listbox-color-border, #cccccc);
+  border-radius: var(--border-radius-m, 0.5rem);
+  box-shadow: var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__footer-menu {
+    width: 18.75rem;
+  }
+}
+.mc-sidebar__footer-menu .mc-sidebar__footer-menu-divider {
+  margin: 0.5rem 0.75rem;
+}
+
+.mc-sidebar__header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.mc-sidebar__header-logo {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.mc-sidebar__header-title {
+  font-size: var(--font-size-200, 1.125rem);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--sidebar-color-product-name, #000000);
+  margin: 0;
+  flex-grow: 1;
+  display: none;
+}
+.mc-sidebar__header--expanded .mc-sidebar__header-title {
+  display: block;
+}
+.mc-sidebar__header--collapsed .mc-sidebar__header-title {
+  display: none;
+}
+
+.mc-sidebar__listbox {
+  min-width: 18.75rem;
+  border-radius: var(--border-radius-m, 0.5rem);
+  background-color: var(--listbox-color-background, #ffffff);
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  box-shadow: var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));
+}
+.mc-sidebar__listbox-title {
+  font-size: var(--font-size-150, 1rem);
+  font-weight: var(--font-weight-semi-bold, 600);
+  padding-bottom: 0.75rem;
+  margin: 0;
+  border-bottom: 1px solid var(--divider-color-primary, #cccccc);
+  color: var(--sidebar-color-shortcut-item-text-default, #404040);
+}
+
+.mc-sidebar__list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.mc-sidebar__link {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  height: 2.5rem;
+  width: 100%;
+  padding-left: 0.25rem;
+  text-align: left;
+  text-decoration: none;
+  font-size: var(--font-size-150, 1rem);
+  font-weight: var(--font-weight-semi-bold, 600);
+  color: var(--sidebar-color-section-item-text-default, #404040);
+  border-radius: var(--border-radius-m, 0.5rem);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.mc-sidebar__link--selected {
+  color: var(--sidebar-color-section-item-text-selected, #006902);
+  background: var(--sidebar-color-section-item-background-selected, #ebf5de);
+}
+.mc-sidebar__link--locked {
+  pointer-events: none;
+}
+.mc-sidebar__link:not(.mc-sidebar__link--selected):hover {
+  background: var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-sidebar__link:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-sidebar__link-expand:open .mc-sidebar__sub {
+  transform: rotate(180deg);
+}
+.mc-sidebar__link:is(summary) .mc-sidebar__text {
+  flex-grow: 1;
+}
+
+.mc-sidebar__icon {
+  fill: currentcolor;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.mc-sidebar__indicator {
+  fill: currentcolor;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.mc-sidebar__text {
+  display: block;
+}
+
+.mc-sidebar__sub {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.mc-sidebar__sublist {
+  list-style-type: none;
+  margin: 0;
+  padding: 0 0 0 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.mc-sidebar__item {
+  position: relative;
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 0.25rem;
+  padding-left: 0.5rem;
+  margin-bottom: 0.125rem;
+  height: 2rem;
+  text-decoration: none;
+  color: var(--sidebar-color-section-item-text-default, #404040);
+  border-radius: var(--border-radius-m, 0.5rem);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link .mc-sidebar__text {
+  display: block;
+  font-size: var(--font-body-s, 0.875rem);
+  font-weight: var(--font-weight-regular, 400);
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected {
+  color: var(--sidebar-color-section-item-text-selected, #006902);
+  background: var(--sidebar-color-section-item-background-selected, #ebf5de);
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):hover {
+  background: var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-sidebar__item--collapsed .mc-sidebar__text, .mc-sidebar__item--collapsed .mc-sidebar__sub, .mc-sidebar__item--collapsed .mc-sidebar__sublist {
+  display: none;
+}
+.mc-sidebar__item--collapsed .mc-sidebar__link {
+  padding-left: 0;
+  justify-content: center;
+}
+
+.mc-sidebar__shortcut-wrapper {
+  width: 100%;
+  display: grid;
+  justify-content: center;
+  position: relative;
+}
+
+.mc-sidebar__shortcut-list {
+  display: flex;
+  margin: 0;
+}
+.mc-sidebar__shortcut-list--grid {
+  padding: 0;
+  gap: 0.5rem;
+  align-items: center;
+}
+.mc-sidebar__shortcut-list--stacked {
+  gap: 0.25rem;
+  flex-direction: column;
+  padding: 0;
+}
+.mc-sidebar__shortcut-list--stacked:not(.mc-sidebar__shortcut-list--floating) {
+  padding: 0 0 0.5rem 1rem;
+  margin-bottom: 0.5rem;
+  border-bottom: 1px solid var(--divider-color-primary, #cccccc);
+}
+
+.mc-sidebar__shortcut-item {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  list-style: none;
+  border-radius: var(--border-radius-m, 0.5rem);
+  overflow: hidden;
+}
+.mc-sidebar__shortcut-item:hover {
+  background-color: var(--sidebar-color-shortcut-item-background-hover, rgba(70, 78, 99, 0.2));
+}
+.mc-sidebar__shortcut-item:nth-child(n+5) {
+  display: none;
+}
+.mc-sidebar__shortcut-item--grid {
+  justify-content: center;
+  padding: 0 0.125rem;
+  height: 3rem;
+  width: 3.9375rem;
+  background-color: var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));
+}
+.mc-sidebar__shortcut-item--grid .mc-sidebar__shortcut-link {
+  flex-direction: column;
+  gap: 0.125rem;
+}
+.mc-sidebar__shortcut-item--stacked {
+  padding: 0.125rem 0.25rem;
+  width: 12.5rem;
+  height: 2.5rem;
+}
+.mc-sidebar__shortcut-item--stacked.mc-sidebar__shortcut-item--floating {
+  width: 100%;
+  padding: 0.125rem 0 0.125rem 0.25rem;
+}
+.mc-sidebar__shortcut-item--stacked .mc-sidebar__shortcut-label {
+  font-weight: var(--font-weight-semi-bold, 600);
+  font-size: var(--font-body-m, 1rem);
+}
+.mc-sidebar__shortcut-item--stacked .mc-sidebar__shortcut-link {
+  gap: 0.25rem;
+}
+.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item {
+  background-color: var(--sidebar-color-shortcut-item-background-selected, #ebf5de);
+}
+.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item .mc-sidebar__shortcut-label {
+  color: var(--sidebar-color-shortcut-item-text-selected, #006902);
+}
+.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item .mc-sidebar__shortcut-icon {
+  fill: var(--sidebar-color-shortcut-item-text-selected, #006902);
+}
+.mc-sidebar__shortcut-item:is(.mc-sidebar__trigger) {
+  width: 3rem;
+  height: 3rem;
+  justify-content: center;
+  border: none;
+  background-color: var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));
+}
+.mc-sidebar__shortcut-item:is(.mc-sidebar__trigger):hover {
+  background-color: var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));
+}
+
+.mc-sidebar__shortcut-link:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-sidebar__shortcut-link {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mc-sidebar__shortcut-label {
+  font-size: var(--font-size-25, 0.625rem);
+  font-weight: var(--font-weight-regular, 400);
+  line-height: var(--line-height-s, 1.3);
+  color: var(--sidebar-color-shortcut-item-text-default, #404040);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.mc-sidebar__shortcut-icon {
+  fill: var(--sidebar-color-shortcut-item-text-default, #404040);
+  width: 1.5rem;
+  height: 1.5rem;
+}</style>

package/dist/components/sidebarfooter/_SidebarFooterMenu.svelte.d.ts

@@ -0,0 +1,36 @@
+interface Props {
+    logOutLabel: string;
+    expanded: boolean;
+    onListboxKeydown: (event: KeyboardEvent) => void;
+    hideFloatingItem: () => void;
+    listbox: HTMLElement | null;
+    onlogout: () => void;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const SidebarFooterMenu: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "listbox">;
+type SidebarFooterMenu = InstanceType<typeof SidebarFooterMenu>;
+export default SidebarFooterMenu;
+//# sourceMappingURL=_SidebarFooterMenu.svelte.d.ts.map

package/dist/components/sidebarfooter/_SidebarFooterMenu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_SidebarFooterMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/sidebarfooter/_SidebarFooterMenu.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,KAAK;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAgDH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,iBAAiB;;;;;;iBAAqF,CAAC;AAC3F,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAClE,eAAe,iBAAiB,CAAC"}

package/dist/components/sidebarheader/README.md

@@ -0,0 +1,11 @@
+# `m-sidebar-header`
+
+SidebarHeader is a component that renders the header of a sidebar, displaying a logo and a main title.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `title*` | The main title text displayed in the sidebar header. | `string` |   |
+| `logo*` | URL of the logo image displayed in the sidebar header. | `string` |   |
+