@mozaic-ds/web-components 1.5.0 → 1.6.0

package/dist/components/sidebarnavitem/SidebarNavItem.svelte.d.ts

@@ -0,0 +1,58 @@
+/**
+ * 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.
+ * @slot icon - Use this slot to display an icon alongside the sidebar item.
+ * @event item-click {CustomEvent<void>} - Emits when a navigation item is clicked.
+ */
+interface Props {
+    tag?: string;
+    /**
+     * Identifier used for listbox controlling.
+     */
+    id?: string;
+    /**
+     * The text label displayed for the navigation item.
+     */
+    label: string;
+    /**
+     * The URL the navigation item links to.
+     */
+    href?: string;
+    /**
+     * Marks the item as locked. Shows a lock icon and prevents interaction.
+     */
+    locked?: boolean;
+    /**
+     * Indicates the link is external. Opens in a new tab and shows an external link icon.
+     */
+    external?: boolean;
+    /**
+     * Marks the item as active, applying the active styling.
+     */
+    active?: boolean;
+    /**
+     * Callback to trigger when an item is clicked
+     */
+    onclick?: () => void;
+    sub?: boolean;
+}
+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;
+}
+declare const SidebarNavItem: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+}, {}, "">;
+type SidebarNavItem = InstanceType<typeof SidebarNavItem>;
+export default SidebarNavItem;
+//# sourceMappingURL=SidebarNavItem.svelte.d.ts.map

package/dist/components/sidebarnavitem/SidebarNavItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNavItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/sidebarnavitem/SidebarNavItem.svelte.ts"],"names":[],"mappings":"AAUE;;;;GAIG;AAEH,UAAU,KAAK;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAsGH,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;AAUD,QAAA,MAAM,cAAc;;;;UAAqF,CAAC;AACxF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAC5D,eAAe,cAAc,CAAC"}

package/dist/components/sidebarshortcutitem/README.md

@@ -0,0 +1,17 @@
+# `m-sidebar-shortcut-item`
+
+SidebarShortcutItem is a component that renders a sidebar shortcut link with an optional icon and label, providing quick access to a specific URL.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `label*` | The text label displayed for the shortcut item. | `string` |   |
+| `href*` | The URL the shortcut item links to. | `string` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `icon` | Use this slot to display an icon alongside the shortcut item. |
+

package/dist/components/sidebarshortcutitem/SidebarShortcutItem.js

@@ -0,0 +1,18 @@
+import{c as E,e as q,a as D,p as u,k as I,t as A,b as f,d as B,f as x,j as s,i as _,r as a,q as b,s as C,h as F,l as p,m as G,v as g}from"../../custom-element.js";import{i as H}from"../../if.js";import{a as J,s as K}from"../../slot.js";import{c as w,s as L}from"../../attributes.js";import{g as M,a as N}from"../../sidebar-state.svelte.js";import"../../branches.js";var O=x('<span class="mc-sidebar__shortcut-icon svelte-146rv3"><!></span>'),P=x('<li role="menuitem"><a class="mc-sidebar__shortcut-link svelte-146rv3"><!> <span class="mc-sidebar__shortcut-label svelte-146rv3"> </span></a></li>');const Q={hash:"svelte-146rv3",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__shortcut-item.svelte-146rv3 {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-146rv3:hover {background-color:var(--sidebar-color-shortcut-item-background-hover, rgba(70, 78, 99, 0.2));}.mc-sidebar__shortcut-item.svelte-146rv3:nth-child(n+5) {display:none;}.mc-sidebar__shortcut-item--grid.svelte-146rv3 {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.svelte-146rv3 .mc-sidebar__shortcut-link:where(.svelte-146rv3) {flex-direction:column;gap:0.125rem;}.mc-sidebar__shortcut-item--stacked.svelte-146rv3 {padding:0.125rem 0.25rem;width:12.5rem;height:2.5rem;}.mc-sidebar__shortcut-item--stacked.svelte-146rv3 .mc-sidebar__shortcut-label:where(.svelte-146rv3) {font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-body-m, 1rem);}.mc-sidebar__shortcut-item--stacked.svelte-146rv3 .mc-sidebar__shortcut-link:where(.svelte-146rv3) {gap:0.25rem;}.mc-sidebar__shortcut-link.svelte-146rv3: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-146rv3 {text-decoration:none;display:flex;align-items:center;justify-content:center;}.mc-sidebar__shortcut-label.svelte-146rv3 {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-146rv3 {fill:var(--sidebar-color-shortcut-item-text-default, #404040);width:1.5rem;height:1.5rem;}`};function R(l,r){const k=J(r);q(r,!0),D(l,Q);let i=u(r,"label",7),o=u(r,"href",7),d=g(!1),m=g(!1);var y={get label(){return i()},set label(e){i(e),_()},get href(){return o()},set href(e){o(e),_()}},t=P(),n=s(t),h=s(n);{var S=e=>{var c=O(),j=s(c);K(j,r,"icon",{},null),a(c),f(e,c)};H(h,e=>{k.icon&&e(S)})}var v=I(h,2),z=s(v,!0);return a(v),a(n),a(t),w(t,()=>M({setExpanded:e=>b(d,e,!0)})),w(t,()=>N({setState:e=>b(m,e,!0)})),A(()=>{C(t,1,F(["mc-sidebar__shortcut-item",!p(m)&&p(d)?"mc-sidebar__shortcut-item--grid":"mc-sidebar__shortcut-item--stacked"]),"svelte-146rv3"),L(n,"href",o()),G(z,i())}),f(l,t),B(y)}customElements.define("m-sidebar-shortcut-item",E(R,{label:{},href:{}},["icon"],[],{mode:"open"}));
+//# sourceMappingURL=SidebarShortcutItem.js.map

package/dist/components/sidebarshortcutitem/SidebarShortcutItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarShortcutItem.js","sources":["../../../src/components/sidebarshortcutitem/SidebarShortcutItem.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-sidebar-shortcut-item',\n  }}\n/>\n\n<script lang=\"ts\">\n  import { getShortcutsState, getSidebarState } from '../sidebar/sidebar-state.svelte';\n\n  /**\n   * SidebarShortcutItem is a component that renders a sidebar shortcut link with an optional icon and label, providing quick access to a specific URL.\n   * @slot icon - Use this slot to display an icon alongside the shortcut item.\n   */\n\n  interface Props {\n    /**\n     * The text label displayed for the shortcut item.\n     */\n    label: string;\n    /**\n     * The URL the shortcut item links to.\n     */\n    href: string;\n  }\n\n  let { label, href }: Props = $props();\n\n  let expanded = $state(false);\n  let stacked = $state(false);\n</script>\n\n<li\n  {@attach getSidebarState({ setExpanded: (value) => (expanded = value) })}\n  {@attach getShortcutsState({ setState: (value) => (stacked = value) })}\n  class={[\n    'mc-sidebar__shortcut-item',\n    !stacked && expanded ? 'mc-sidebar__shortcut-item--grid' : 'mc-sidebar__shortcut-item--stacked',\n  ]}\n  role=\"menuitem\"\n>\n  <a {href} class=\"mc-sidebar__shortcut-link\">\n    {#if $$slots.icon}\n      <span class=\"mc-sidebar__shortcut-icon\">\n        <slot name=\"icon\" />\n      </span>\n    {/if}\n    <span class=\"mc-sidebar__shortcut-label\">{label}</span>\n  </a>\n</li>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/sidebar';\n</style>\n"],"names":["label","$.prop","$$props","href","expanded","$.state","stacked","li","root","a","$.child","span","root_1","$$slots","$$render","consequent","span_1","$.sibling","node","$.reset","getSidebarState","value","$.set","getShortcutsState","$.get","$.set_attribute","$.append","$$anchor"],"mappings":";;;;;;;;;;;;;;;;65DAMA,iCAmBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAEbE,EAAWC,EAAO,EAAK,EACvBC,EAAUD,EAAO,EAAK,sGAG3BE,EAAAC,EAAA,EASEC,EAACC,EATHH,CAAA,MASEE,CAAC,iBAEGE,EAAIC,EAAA,MAAJD,CAAI,0BAAJA,CAAI,MAAJA,CAAI,WADFE,EAAQ,MAAIC,EAAAC,CAAA,QAKhBC,EAAIC,EAAAC,EAAA,CAAA,MAAJF,EAAI,EAAA,WAAJA,CAAI,IANNP,CAAC,EATHU,EAAAZ,CAAA,IAAAA,EAAA,IACUa,GAAkB,YAAcC,GAAKC,EAAMlB,EAAWiB,EAAK,EAAA,CAAA,CAAA,CAAA,IADrEd,EAAA,IAEUgB,GAAoB,SAAWF,GAAKC,EAAMhB,EAAUe,EAAK,EAAA,CAAA,CAAA,CAAA,WAFnEd,OAIG,4BACC,CAAAiB,EAAAlB,CAAO,KAAIF,CAAQ,EAAG,kCAAoC,wDAI5DqB,EAAAhB,SAAGN,GAAI,MAMoCH,GAAK,IAflD0B,EAAAC,EAAApB,CAAA,MAFO"}

package/dist/components/sidebarshortcutitem/SidebarShortcutItem.spec.js

@@ -0,0 +1,34 @@
+import { render } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import SidebarShortcutItem from './SidebarShortcutItem.svelte';
+describe('SidebarShortcutItem', () => {
+    it('renders the label and href correctly', () => {
+        const { container, getByText } = render(SidebarShortcutItem, {
+            props: { label: 'Shortcut', href: '/shortcut' },
+        });
+        const link = container.querySelector('a.mc-sidebar__shortcut-link');
+        expect(link).toBeTruthy();
+        expect(link.getAttribute('href')).toBe('/shortcut');
+        expect(getByText('Shortcut')).toBeTruthy();
+    });
+    it('applies the correct class based on expanded and stacked', async () => {
+        const { container } = render(SidebarShortcutItem, {
+            props: { label: 'Shortcut', href: '/shortcut' },
+        });
+        const li = container.querySelector('li.mc-sidebar__shortcut-item');
+        expect(li.classList.contains('mc-sidebar__shortcut-item--stacked')).toBe(true);
+        document.dispatchEvent(new CustomEvent('update:expanded', { detail: true }));
+        await new Promise((r) => setTimeout(r, 0)); // attendre le DOM update
+        expect(li.classList.contains('mc-sidebar__shortcut-item--grid')).toBe(true);
+        document.dispatchEvent(new CustomEvent('update:stacked', { detail: true }));
+        await new Promise((r) => setTimeout(r, 0));
+        expect(li.classList.contains('mc-sidebar__shortcut-item--stacked')).toBe(true);
+    });
+    it('renders role="menuitem"', () => {
+        const { container } = render(SidebarShortcutItem, {
+            props: { label: 'Shortcut', href: '/shortcut' },
+        });
+        const li = container.querySelector('li.mc-sidebar__shortcut-item');
+        expect(li.getAttribute('role')).toBe('menuitem');
+    });
+});

package/dist/components/sidebarshortcutitem/SidebarShortcutItem.svelte

@@ -0,0 +1,509 @@
+<svelte:options
+  customElement={{
+    tag: 'm-sidebar-shortcut-item',
+  }}
+/>
+
+<script lang="ts">
+  import { getShortcutsState, getSidebarState } from '../sidebar/sidebar-state.svelte';
+
+  /**
+   * SidebarShortcutItem is a component that renders a sidebar shortcut link with an optional icon and label, providing quick access to a specific URL.
+   * @slot icon - Use this slot to display an icon alongside the shortcut item.
+   */
+
+  interface Props {
+    /**
+     * The text label displayed for the shortcut item.
+     */
+    label: string;
+    /**
+     * The URL the shortcut item links to.
+     */
+    href: string;
+  }
+
+  let { label, href }: Props = $props();
+
+  let expanded = $state(false);
+  let stacked = $state(false);
+</script>
+
+<li
+  {@attach getSidebarState({ setExpanded: (value) => (expanded = value) })}
+  {@attach getShortcutsState({ setState: (value) => (stacked = value) })}
+  class={[
+    'mc-sidebar__shortcut-item',
+    !stacked && expanded ? 'mc-sidebar__shortcut-item--grid' : 'mc-sidebar__shortcut-item--stacked',
+  ]}
+  role="menuitem"
+>
+  <a {href} class="mc-sidebar__shortcut-link">
+    {#if $$slots.icon}
+      <span class="mc-sidebar__shortcut-icon">
+        <slot name="icon" />
+      </span>
+    {/if}
+    <span class="mc-sidebar__shortcut-label">{label}</span>
+  </a>
+</li>
+
+<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/sidebarshortcutitem/SidebarShortcutItem.svelte.d.ts

@@ -0,0 +1,35 @@
+/**
+ * SidebarShortcutItem is a component that renders a sidebar shortcut link with an optional icon and label, providing quick access to a specific URL.
+ * @slot icon - Use this slot to display an icon alongside the shortcut item.
+ */
+interface Props {
+    /**
+     * The text label displayed for the shortcut item.
+     */
+    label: string;
+    /**
+     * The URL the shortcut item links to.
+     */
+    href: string;
+}
+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;
+}
+declare const SidebarShortcutItem: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+}, {}, "">;
+type SidebarShortcutItem = InstanceType<typeof SidebarShortcutItem>;
+export default SidebarShortcutItem;
+//# sourceMappingURL=SidebarShortcutItem.svelte.d.ts.map

package/dist/components/sidebarshortcutitem/SidebarShortcutItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarShortcutItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/sidebarshortcutitem/SidebarShortcutItem.svelte.ts"],"names":[],"mappings":"AAME;;;GAGG;AAEH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAiCH,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;AAUD,QAAA,MAAM,mBAAmB;;;;UAAqF,CAAC;AAC7F,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACtE,eAAe,mBAAmB,CAAC"}