@mozaic-ds/web-components 1.5.1 → 1.6.0

package/dist/components/sidebarheader/SidebarHeader.js

@@ -0,0 +1,18 @@
+import{c as g,e as v,a as f,p as o,k as y,q as x,t as u,b as w,d as S,f as j,j as m,v as k,i as h,r as c,s as z,h as E,l as p,m as q}from"../../custom-element.js";import{c as D,s as H}from"../../attributes.js";import{g as A}from"../../sidebar-state.svelte.js";var B=j('<header><img class="mc-sidebar__header-logo svelte-1h67ayb" alt="logo"/> <p class="mc-sidebar__header-title svelte-1h67ayb"> </p></header>');const C={hash:"svelte-1h67ayb",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@media screen and (min-width: 680px) {
+}
+@media screen and (min-width: 680px) {
+}
+@media screen and (min-width: 680px) {
+}
+@media screen and (min-width: 680px) {
+}
+@media screen and (min-width: 680px) {
+}
+@media screen and (min-width: 680px) {
+}
+@media screen and (min-width: 680px) {
+}.mc-sidebar__header.svelte-1h67ayb {display:flex;align-items:center;justify-content:center;gap:0.5rem;}.mc-sidebar__header-logo.svelte-1h67ayb {width:2.5rem;height:2.5rem;}.mc-sidebar__header-title.svelte-1h67ayb {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.svelte-1h67ayb .mc-sidebar__header-title:where(.svelte-1h67ayb) {display:block;}.mc-sidebar__header--collapsed.svelte-1h67ayb .mc-sidebar__header-title:where(.svelte-1h67ayb) {display:none;}`};function F(i,t){v(t,!0),f(i,C);let s=o(t,"title",7),r=o(t,"logo",7),d=k(!1);var b={get title(){return s()},set title(a){s(a),h()},get logo(){return r()},set logo(a){r(a),h()}},e=B(),n=m(e),l=y(n,2),_=m(l,!0);return c(l),c(e),D(e,()=>A({setExpanded:a=>x(d,a,!0)})),u(()=>{z(e,1,E({"mc-sidebar__header":!0,"mc-sidebar__header--expanded":p(d),"mc-sidebar__header--collapsed":!p(d)}),"svelte-1h67ayb"),H(n,"src",r()),q(_,s())}),w(i,e),S(b)}customElements.define("m-sidebar-header",g(F,{title:{},logo:{}},[],[],{mode:"open"}));
+//# sourceMappingURL=SidebarHeader.js.map

package/dist/components/sidebarheader/SidebarHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarHeader.js","sources":["../../../src/components/sidebarheader/SidebarHeader.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-sidebar-header',\n  }}\n/>\n\n<script lang=\"ts\">\n  import { getSidebarState } from '../sidebar/sidebar-state.svelte';\n  /**\n   * SidebarHeader is a component that renders the header of a sidebar, displaying a logo and a main title.\n   */\n\n  interface Props {\n    /**\n     * The main title text displayed in the sidebar header.\n     */\n    title: string;\n    /**\n     * URL of the logo image displayed in the sidebar header.\n     */\n    logo: string;\n  }\n\n  let { title, logo }: Props = $props();\n\n  let expanded = $state(false);\n</script>\n\n<header\n  {@attach getSidebarState({ setExpanded: (value) => (expanded = value) })}\n  class={{\n    'mc-sidebar__header': true,\n    'mc-sidebar__header--expanded': expanded,\n    'mc-sidebar__header--collapsed': !expanded,\n  }}\n>\n  <img class=\"mc-sidebar__header-logo\" src={logo} alt=\"logo\" />\n  <p class=\"mc-sidebar__header-title\">{title}</p>\n</header>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/sidebar';\n</style>\n"],"names":["title","$.prop","$$props","logo","expanded","$.state","header","root","img","$.child","p","$.reset","getSidebarState","value","$.set","$.set_attribute","$.append","$$anchor"],"mappings":";;;;;;;;;;;;;;;;2mBAMA,oBAiBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAEbE,EAAWC,EAAO,EAAK,sGAG5BC,EAAAC,EAAA,EAQEC,EAAGC,EARLH,CAAA,EASEI,IADAF,EAAG,CAAA,MACHE,EAAC,EAAA,WAADA,CAAC,EATHC,EAAAL,CAAA,IAAAA,EAAA,IACUM,GAAkB,YAAcC,GAAKC,EAAMV,EAAWS,EAAK,EAAA,CAAA,CAAA,CAAA,WADrEP,OAGG,qBAAsB,GACtB,iCAAgCF,CAAQ,EACxC,mCAAkCA,CAAQ,sBAG3CW,EAAAP,QAAyCL,GAAI,MACTH,GAAK,IAT3CgB,EAAAC,EAAAX,CAAA,MAFO"}

package/dist/components/sidebarheader/SidebarHeader.spec.js

@@ -0,0 +1,37 @@
+import { render, cleanup } from '@testing-library/svelte';
+import SidebarHeader from './SidebarHeader.svelte';
+import { describe, it, expect, afterEach } from 'vitest';
+import { tick } from 'svelte';
+afterEach(() => {
+    cleanup();
+});
+describe('SidebarHeader component', () => {
+    it('renders provided title and logo and has collapsed class by default', () => {
+        const { getByText, container } = render(SidebarHeader, {
+            props: { title: 'My Sidebar', logo: '/assets/logo.png' },
+        });
+        expect(getByText('My Sidebar')).toBeTruthy();
+        const img = container.querySelector('img.mc-sidebar__header-logo');
+        expect(img).toBeTruthy();
+        expect(img.src).toContain('/assets/logo.png');
+        const header = container.querySelector('header.mc-sidebar__header');
+        expect(header).toBeTruthy();
+        expect(header.classList.contains('mc-sidebar__header--collapsed')).toBe(true);
+        expect(header.classList.contains('mc-sidebar__header--expanded')).toBe(false);
+    });
+    it('toggles classes when update:expanded events are dispatched', async () => {
+        const { container } = render(SidebarHeader, {
+            props: { title: 'T', logo: '/l' },
+        });
+        const header = container.querySelector('header.mc-sidebar__header');
+        expect(header.classList.contains('mc-sidebar__header--collapsed')).toBe(true);
+        document.dispatchEvent(new CustomEvent('update:expanded', { detail: true }));
+        await tick();
+        expect(header.classList.contains('mc-sidebar__header--expanded')).toBe(true);
+        expect(header.classList.contains('mc-sidebar__header--collapsed')).toBe(false);
+        document.dispatchEvent(new CustomEvent('update:expanded', { detail: false }));
+        await tick();
+        expect(header.classList.contains('mc-sidebar__header--expanded')).toBe(false);
+        expect(header.classList.contains('mc-sidebar__header--collapsed')).toBe(true);
+    });
+});

package/dist/components/sidebarheader/SidebarHeader.svelte

@@ -0,0 +1,499 @@
+<svelte:options
+  customElement={{
+    tag: 'm-sidebar-header',
+  }}
+/>
+
+<script lang="ts">
+  import { getSidebarState } from '../sidebar/sidebar-state.svelte';
+  /**
+   * SidebarHeader is a component that renders the header of a sidebar, displaying a logo and a main title.
+   */
+
+  interface Props {
+    /**
+     * The main title text displayed in the sidebar header.
+     */
+    title: string;
+    /**
+     * URL of the logo image displayed in the sidebar header.
+     */
+    logo: string;
+  }
+
+  let { title, logo }: Props = $props();
+
+  let expanded = $state(false);
+</script>
+
+<header
+  {@attach getSidebarState({ setExpanded: (value) => (expanded = value) })}
+  class={{
+    'mc-sidebar__header': true,
+    'mc-sidebar__header--expanded': expanded,
+    'mc-sidebar__header--collapsed': !expanded,
+  }}
+>
+  <img class="mc-sidebar__header-logo" src={logo} alt="logo" />
+  <p class="mc-sidebar__header-title">{title}</p>
+</header>
+
+<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/sidebarheader/SidebarHeader.svelte.d.ts

@@ -0,0 +1,17 @@
+/**
+ * SidebarHeader is a component that renders the header of a sidebar, displaying a logo and a main title.
+ */
+interface Props {
+    /**
+     * The main title text displayed in the sidebar header.
+     */
+    title: string;
+    /**
+     * URL of the logo image displayed in the sidebar header.
+     */
+    logo: string;
+}
+declare const SidebarHeader: import("svelte").Component<Props, {}, "">;
+type SidebarHeader = ReturnType<typeof SidebarHeader>;
+export default SidebarHeader;
+//# sourceMappingURL=SidebarHeader.svelte.d.ts.map

package/dist/components/sidebarheader/SidebarHeader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/sidebarheader/SidebarHeader.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AAEH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AA2BH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/sidebarnavitem/README.md

@@ -0,0 +1,30 @@
+# `m-sidebar-nav-item`
+
+SidebarNavItem is a component that renders a sidebar navigation item with optional icon support. It handles active, locked, and external states, shows tooltips or floating items when the sidebar is collapsed, and supports click events.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `tag` |  | `string` | `li` |
+| `id` | Identifier used for listbox controlling. | `string` | `crypto.randomUUID()` |
+| `label*` | The text label displayed for the navigation item. | `string` |   |
+| `href` | The URL the navigation item links to. | `string` |   |
+| `locked` | Marks the item as locked. Shows a lock icon and prevents interaction. | `boolean` |   |
+| `external` | Indicates the link is external. Opens in a new tab and shows an external link icon. | `boolean` |   |
+| `active` | Marks the item as active, applying the active styling. | `boolean` |   |
+| `onclick` | Callback to trigger when an item is clicked | `() => void` |   |
+| `sub` |  | `boolean` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `icon` | Use this slot to display an icon alongside the sidebar item. |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `item-click` | Emits when a navigation item is clicked. | `CustomEvent<void>` |
+

package/dist/components/sidebarnavitem/SidebarNavItem.js

@@ -0,0 +1,18 @@
+import{c as le,e as me,a as de,p as a,l as o,y as K,x as f,q as U,k as D,t as ce,b as c,d as be,v as j,f as p,w as O,j as C,i as s,D as _e,r as F,m as ue}from"../../custom-element.js";import{o as ve}from"../../index-client.js";import{i as T}from"../../if.js";import{a as fe,s as pe}from"../../slot.js";import{c as ze}from"../../svelte-component.js";import{e as P}from"../../svelte-element.js";import{c as ge,a as Q}from"../../attributes.js";import{b as L}from"../../this.js";import{o as he,E as ke}from"../../Condition20.js";import{T as xe}from"../tooltip/Tooltip.js";import{u as we}from"../../floating-item.svelte.js";import{g as ye}from"../../sidebar-state.svelte.js";import"../../branches.js";import"../../media-query.js";var Ie=p('<span class="mc-sidebar__icon svelte-izmpz1"><!></span>'),Ee=p('<!> <span class="mc-sidebar__text svelte-izmpz1"> </span> <!>',1),Se=p('<div class="mc-sidebar__floating-item mc-sidebar__floating-item--tooltip mc-sidebar__floating-item--hidden svelte-izmpz1"><!></div>'),Be=p("<!> <!>",1);const Ue={hash:"svelte-izmpz1",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@media screen and (min-width: 680px) {
+}
+@media screen and (min-width: 680px) {
+}
+@media screen and (min-width: 680px) {
+}.mc-sidebar__floating-item.svelte-izmpz1 {position:absolute;padding-left:1.25rem;left:3rem;}.mc-sidebar__floating-item--tooltip.svelte-izmpz1 {top:0.25rem;}
+@media screen and (min-width: 680px) {
+}.mc-sidebar__floating-item--hidden.svelte-izmpz1 {visibility:hidden;overflow:hidden;opacity:0;height:0;pointer-events:none;}
+@media screen and (min-width: 680px) {
+}
+@media screen and (min-width: 680px) {
+}
+@media screen and (min-width: 680px) {
+}.mc-sidebar__link.svelte-izmpz1 {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-izmpz1 {color:var(--sidebar-color-section-item-text-selected, #006902);background:var(--sidebar-color-section-item-background-selected, #ebf5de);}.mc-sidebar__link--locked.svelte-izmpz1 {pointer-events:none;}.mc-sidebar__link.svelte-izmpz1:not(.mc-sidebar__link--selected):hover {background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));}.mc-sidebar__link.svelte-izmpz1: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.svelte-izmpz1:is(summary:where(.svelte-izmpz1)) .mc-sidebar__text:where(.svelte-izmpz1) {flex-grow:1;}.mc-sidebar__icon.svelte-izmpz1 {fill:currentcolor;width:1.5rem;height:1.5rem;}.mc-sidebar__text.svelte-izmpz1 {display:block;}.mc-sidebar__item.svelte-izmpz1 {position:relative;}.mc-sidebar__item--sub.mc-sidebar__item.svelte-izmpz1 .mc-sidebar__link:where(.svelte-izmpz1) {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.svelte-izmpz1 .mc-sidebar__link:where(.svelte-izmpz1) .mc-sidebar__text:where(.svelte-izmpz1) {display:block;font-size:var(--font-body-s, 0.875rem);font-weight:var(--font-weight-regular, 400);}.mc-sidebar__item--sub.mc-sidebar__item.svelte-izmpz1 .mc-sidebar__link--selected:where(.svelte-izmpz1) {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.svelte-izmpz1 .mc-sidebar__link:where(.svelte-izmpz1):not(.mc-sidebar__item--sub.mc-sidebar__item:where(.svelte-izmpz1) .mc-sidebar__link--selected:where(.svelte-izmpz1)):hover {background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));}.mc-sidebar__item--sub.mc-sidebar__item.svelte-izmpz1 .mc-sidebar__link:where(.svelte-izmpz1):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.svelte-izmpz1 .mc-sidebar__text:where(.svelte-izmpz1) {display:none;}.mc-sidebar__item--collapsed.svelte-izmpz1 .mc-sidebar__link:where(.svelte-izmpz1) {padding-left:0;justify-content:center;}`};function De(M,t){const R=fe(t);me(t,!0),de(M,Ue);let z=a(t,"tag",7,"li"),g=a(t,"id",23,()=>crypto.randomUUID()),b=a(t,"label",7),l=a(t,"href",7),_=a(t,"locked",7),u=a(t,"external",7),h=a(t,"active",7),k=a(t,"onclick",7),n=a(t,"sub",7),x,w=j(null),y=j(null);const{hideFloatingItem:q,showFloatingItem:A}=we(()=>o(w),()=>o(y),{allowItemHover:!1}),V=O(()=>_()?he:ke);let I=j(!1);function W(){k()?.(),x.dispatchEvent(new CustomEvent("item-click",{bubbles:!0,composed:!0}))}const X=O(()=>{if(l())return u()?"_blank":"_self"});ve(()=>{if(n()!==void 0)return;const e=_e("SUB_ITEM");e!==void 0&&n(e??!1)});var Y={get tag(){return z()},set tag(e="li"){z(e),s()},get id(){return g()},set id(e=crypto.randomUUID()){g(e),s()},get label(){return b()},set label(e){b(e),s()},get href(){return l()},set href(e){l(e),s()},get locked(){return _()},set locked(e){_(e),s()},get external(){return u()},set external(e){u(e),s()},get active(){return h()},set active(e){h(e),s()},get onclick(){return k()},set onclick(e){k(e),s()},get sub(){return n()},set sub(e){n(e),s()}},H=K(),Z=f(H);return P(Z,z,!1,(e,$)=>{ge(e,()=>ye({setExpanded:i=>U(I,i,!0)})),L(e,i=>x=i,()=>x),Q(e,()=>({class:{"mc-sidebar__item":!0,"mc-sidebar__item--collapsed":!o(I)&&!n(),"mc-sidebar__item--sub":n()}}),void 0,void 0,void 0,"svelte-izmpz1");var N=Be(),G=f(N);P(G,()=>l()?"a":"button",!1,(i,m)=>{L(i,r=>U(w,r,!0),()=>o(w));var E=()=>W();Q(i,()=>({href:l(),role:l()?"link":"button",target:o(X),class:{"mc-sidebar__link":!0,"mc-sidebar__link--selected":h(),"mc-sidebar__link--locked":_()},"aria-label":b(),onmouseenter:A,onfocus:A,onmouseleave:q,onblur:q,onclick:E}),void 0,void 0,void 0,"svelte-izmpz1");var v=Ee(),J=f(v);{var ie=r=>{var d=Ie(),B=C(d);pe(B,t,"icon",{},null),F(d),c(r,d)};T(J,r=>{R.icon&&r(ie)})}var S=D(J,2),re=C(S,!0);F(S);var ae=D(S,2);{var se=r=>{var d=K(),B=f(d);ze(B,()=>o(V),(oe,ne)=>{ne(oe,{})}),c(r,d)};T(ae,r=>{(_()||u())&&r(se)})}ce(()=>ue(re,b())),c(m,v)});var ee=D(G,2);{var te=i=>{var m=Se(),E=C(m);xe(E,{get id(){return g()},get text(){return b()},standalone:!0,pointer:!1}),F(m),L(m,v=>U(y,v),()=>o(y)),c(i,m)};T(ee,i=>{!o(I)&&!n()&&i(te)})}c($,N)}),c(M,H),be(Y)}customElements.define("m-sidebar-nav-item",le(De,{locked:{attribute:"locked",reflect:!0,type:"Boolean"},external:{attribute:"external",reflect:!0,type:"Boolean"},active:{attribute:"active",reflect:!0,type:"Boolean"},sub:{attribute:"sub",reflect:!0,type:"Boolean"},tag:{},id:{},label:{},href:{},onclick:{}},["icon"],[],{mode:"open"}));export{De as S};
+//# sourceMappingURL=SidebarNavItem.js.map

package/dist/components/sidebarnavitem/SidebarNavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNavItem.js","sources":["../../../src/components/sidebarnavitem/SidebarNavItem.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-sidebar-nav-item',\n    props: {\n      locked: { reflect: true, type: 'Boolean', attribute: 'locked' },\n      external: { reflect: true, type: 'Boolean', attribute: 'external' },\n      active: { reflect: true, type: 'Boolean', attribute: 'active' },\n      sub: { reflect: true, type: 'Boolean', attribute: 'sub' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { Lock20, ExternalLink20 } from '@mozaic-ds/icons-svelte';\n  import Tooltip from '../tooltip/Tooltip.svelte';\n  import { useFloatingItem } from '../sidebar/floating-item.svelte';\n  import { getContext, onMount } from 'svelte';\n  import { getSidebarState } from '../sidebar/sidebar-state.svelte';\n\n  /**\n   * SidebarNavItem is a component that renders a sidebar navigation item with optional icon support. It handles active, locked, and external states, shows tooltips or floating items when the sidebar is collapsed, and supports click events.\n   * @slot icon - Use this slot to display an icon alongside the sidebar item.\n   * @event item-click {CustomEvent<void>} - Emits when a navigation item is clicked.\n   */\n\n  interface Props {\n    tag?: string;\n    /**\n     * Identifier used for listbox controlling.\n     */\n    id?: string;\n    /**\n     * The text label displayed for the navigation item.\n     */\n    label: string;\n    /**\n     * The URL the navigation item links to.\n     */\n    href?: string;\n    /**\n     * Marks the item as locked. Shows a lock icon and prevents interaction.\n     */\n    locked?: boolean;\n    /**\n     * Indicates the link is external. Opens in a new tab and shows an external link icon.\n     */\n    external?: boolean;\n    /**\n     * Marks the item as active, applying the active styling.\n     */\n    active?: boolean;\n    /**\n     * Callback to trigger when an item is clicked\n     */\n    onclick?: () => void;\n    sub?: boolean; // Not documented as this is internal\n  }\n\n  let {\n    tag = 'li',\n    id = crypto.randomUUID(),\n    label,\n    href,\n    locked,\n    external,\n    active,\n    onclick,\n    sub,\n  }: Props = $props();\n\n  let element: HTMLElement;\n\n  let trigger: HTMLElement | null = $state(null);\n  let tooltip: HTMLElement | null = $state(null);\n\n  const { hideFloatingItem, showFloatingItem } = useFloatingItem(\n    () => trigger,\n    () => tooltip,\n    {\n      allowItemHover: false,\n    },\n  );\n\n  const Icon = $derived(locked ? Lock20 : ExternalLink20);\n\n  let expanded = $state(false);\n\n  function handleClick() {\n    onclick?.();\n\n    element.dispatchEvent(new CustomEvent('item-click', { bubbles: true, composed: true }));\n  }\n\n  const targetAttr = $derived.by(() => {\n    if (!href) return undefined;\n    return external ? '_blank' : '_self';\n  });\n\n  onMount(() => {\n    if (sub !== undefined) return;\n    const isSubItem: boolean | undefined = getContext('SUB_ITEM');\n\n    if (isSubItem === undefined) return;\n    sub = isSubItem ?? false;\n  });\n</script>\n\n<svelte:element\n  this={tag}\n  {@attach getSidebarState({ setExpanded: (value) => (expanded = value) })}\n  bind:this={element}\n  class={{\n    'mc-sidebar__item': true,\n    'mc-sidebar__item--collapsed': !expanded && !sub,\n    'mc-sidebar__item--sub': sub,\n  }}\n>\n  <svelte:element\n    this={href ? 'a' : 'button'}\n    bind:this={trigger}\n    {href}\n    role={href ? 'link' : 'button'}\n    target={targetAttr}\n    class={{\n      'mc-sidebar__link': true,\n      'mc-sidebar__link--selected': active,\n      'mc-sidebar__link--locked': locked,\n    }}\n    aria-label={label}\n    onmouseenter={showFloatingItem}\n    onfocus={showFloatingItem}\n    onmouseleave={hideFloatingItem}\n    onblur={hideFloatingItem}\n    onclick={() => handleClick()}\n  >\n    {#if $$slots.icon}\n      <span class=\"mc-sidebar__icon\">\n        <slot name=\"icon\" />\n      </span>\n    {/if}\n\n    <span class=\"mc-sidebar__text\">{label}</span>\n\n    {#if locked || external}\n      <Icon />\n    {/if}\n  </svelte:element>\n\n  {#if !expanded && !sub}\n    <div\n      bind:this={tooltip}\n      class=\"mc-sidebar__floating-item mc-sidebar__floating-item--tooltip mc-sidebar__floating-item--hidden\"\n    >\n      <Tooltip id={id!} text={label} standalone pointer={false} />\n    </div>\n  {/if}\n</svelte:element>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/sidebar';\n</style>\n"],"names":["tag","id","$.prop","$$props","label","href","locked","external","active","onclick","sub","element","trigger","$.state","tooltip","hideFloatingItem","showFloatingItem","useFloatingItem","$.get","Icon","$.derived","Lock20","ExternalLink20","expanded","handleClick","targetAttr","onMount","isSubItem","getContext","$$value","$$element","$$anchor","$.attach","getSidebarState","value","$.set","$.bind_this","$$element_1","span","root_3","$$slots","$$render","consequent","span_1","$.sibling","node_2","Icon_1","consequent_1","div","root_5","node_7","$.child","Tooltip","$.reset","$.append","consequent_2"],"mappings":";;;;;;;;;;;;;;;;+jGAYA,iCA+CI,IAAAA,cAAM,IAAI,EACVC,EAAEC,EAAAC,EAAA,KAAA,GAAA,IAAG,OAAO,YAAU,EACtBC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EACLE,EAAIH,EAAAC,EAAA,OAAA,CAAA,EACJG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAAMN,EAAAC,EAAA,SAAA,CAAA,EACNM,EAAOP,EAAAC,EAAA,UAAA,CAAA,EACPO,EAAGR,EAAAC,EAAA,MAAA,CAAA,EAGDQ,EAEAC,EAA8BC,EAAO,IAAI,EACzCC,EAA8BD,EAAO,IAAI,QAErC,iBAAAE,EAAkB,iBAAAC,CAAgB,EAAKC,GAAe,IAAAC,EACtDN,CAAO,EAAA,IAAAM,EACPJ,CAAO,EAAA,CAEX,eAAgB,EAAK,CAAA,EAInBK,EAAIC,EAAA,IAAYd,EAAM,EAAGe,GAASC,EAAc,MAElDC,EAAWV,EAAO,EAAK,EAElB,SAAAW,GAAc,CACrBf,MAAO,EAEPE,EAAQ,cAAa,IAAK,YAAY,aAAY,CAAI,QAAS,GAAM,SAAU,EAAI,CAAA,CAAA,CACrF,CAEM,MAAAc,EAAUL,EAAA,IAAqB,CAC9B,GAAAf,EAAI,SACFE,EAAQ,EAAG,SAAW,OAC/B,CAAC,EAEDmB,GAAO,IAAO,CACR,GAAAhB,EAAG,IAAK,OAAS,aACfiB,EAAiCC,GAAW,UAAU,EAExDD,IAAc,QAClBjB,EAAMiB,GAAa,EAAK,CAC1B,CAAC,yCA7CO,KAAI,gCACL,IAAA,GAAAE,EAAA,OAAO,WAAU,EAAA,qXAgDlB7B,EAAG,GAAA,CAAA8B,EAAAC,IAAA,CACAC,GAAAF,EAAA,IAAAG,IAAkB,YAAcC,GAAKC,EAAMZ,EAAWW,EAAK,EAAA,CAAA,CAAA,CAAA,EACzDE,EAAAN,EAAAD,GAAAlB,QAAAA,CAAO,mBAEhB,mBAAoB,GACpB,8BAA6B,CAAAO,EAAGK,CAAQ,GAAA,CAAKb,EAAG,EAChD,wBAAyBA,EAAG,qEAItBL,IAAO,IAAM,SAAQ,GAAA,CAAAgC,EAAAN,IAAA,CAChBK,EAAAC,EAAAR,GAAAM,EAAAvB,cAAAA,CAAO,CAAA,YAcHY,EAAW,iBAbzBnB,EAAI,OACCA,IAAO,OAAS,kBACdoB,CAAU,SAEhB,mBAAoB,GACpB,6BAA8BjB,EAAM,EACpC,2BAA4BF,EAAM,gBAExBF,EAAK,eACHY,UACLA,eACKD,SACNA,sFAILuB,EAAIC,GAAA,MAAJD,CAAI,2BAAJA,CAAI,MAAJA,CAAI,WADFE,EAAQ,MAAIC,EAAAC,EAAA,QAMhBC,EAAIC,EAAAC,EAAA,CAAA,OAAJF,EAAI,EAAA,IAAJA,CAAI,WAAJA,EAAI,CAAA,uDAGFG,GAAIf,GAAA,EAAA,sBADFzB,EAAM,GAAIC,MAAQkC,EAAAM,EAAA,iBAFS3C,EAAK,CAAA,CAAA,qCAQpC,IAAA4C,EAAAC,GAAA,EAAAC,EAAAC,EAAAH,CAAA,EAIEI,GAAOF,EAAA,iBAAKjD,EAAE,qBAASG,EAAK,yBAAsB,KAJpDiD,EAAAL,CAAA,IAAAA,EAAAnB,GAAAM,EACYrB,WAAAA,CAAO,CAAA,EADnBwC,EAAAvB,EAAAiB,CAAA,YADG,CAAA9B,EAAAK,CAAQ,IAAKb,EAAG,GAAA+B,EAAAc,EAAA,yBA3ChB"}