<svelte:options
  customElement={{
    tag: 'm-sidebar-shortcuts',
    props: {
      stacked: { reflect: true, type: 'Boolean', attribute: 'stacked' },
    },
  }}
/>

<script lang="ts">
  import { ViewGridX424 } from '@mozaic-ds/icons-svelte';
  import { useFloatingItem } from '../sidebar/floating-item.svelte';
  import { getSidebarState } from '../sidebar/sidebar-state.svelte';

  /**
   * SidebarShortcuts is a component that displays a list of sidebar shortcut items. It supports stacked or grid layouts, shows a floating overlay when the sidebar is collapsed, and allows custom shortcut items via slots.
   */

  interface Props {
    /**
     * Identifier used for listbox controlling.
     */
    id?: string;
    /**
     * Determines the layout of the sidebar shortcuts. When true, the shortcuts are displayed in a vertical stacked list. When false or not provided, the shortcuts are arranged in a grid layout.
     * @slot default - Slot for sidebar shortcut items. Should contain one or more `MSidebarShortcutItem` components.
     */
    stacked?: boolean;
  }

  let { id = crypto.randomUUID(), stacked }: Props = $props();

  let element: HTMLElement | null = $state(null);

  $effect(() => {
    const el = expanded ? element : trigger;

    el?.dispatchEvent(
      new CustomEvent('update:stacked', {
        detail: stacked,
        bubbles: true,
        composed: true,
      }),
    );
  });

  let trigger: HTMLElement | null = $state(null);
  let listbox: HTMLElement | null = $state(null);

  const {
    floatingItemIsDisplayed,
    hideFloatingItem,
    showFloatingItem,
    onTriggerKeydown,
    onListboxKeydown,
  } = useFloatingItem(
    () => trigger,
    () => listbox,
  );

  let expanded = $state(false);
</script>

{#if expanded}
  <section
    {@attach getSidebarState({ setExpanded: (value) => (expanded = value) })}
    bind:this={element}
  >
    <nav aria-label="shortcut items">
      <ul
        class={{
          'mc-sidebar__shortcut-list': true,
          'mc-sidebar__shortcut-list--stacked': stacked,
          'mc-sidebar__shortcut-list--grid': !stacked,
        }}
        role="menu"
      >
        <slot />
      </ul>
    </nav>
  </section>
{:else}
  <div
    {@attach getSidebarState({ setExpanded: (value) => (expanded = value) })}
    class="mc-sidebar__shortcut-wrapper"
  >
    <button
      bind:this={trigger}
      id={`trigger-${id}`}
      class="mc-sidebar__shortcut-item mc-sidebar__trigger"
      aria-label="Sidebar shortcuts"
      aria-haspopup="menu"
      aria-expanded={floatingItemIsDisplayed}
      aria-controls={`listbox-${id}`}
      onmouseenter={showFloatingItem}
      onfocus={showFloatingItem}
      onkeydown={onTriggerKeydown}
      onmouseleave={hideFloatingItem}
      onblur={hideFloatingItem}
    >
      <ViewGridX424 />
    </button>

    <div
      bind:this={listbox}
      id={`listbox-${id}`}
      tabindex="0"
      role="menu"
      class="mc-sidebar__floating-item mc-sidebar__floating-item--hidden"
      onkeydown={onListboxKeydown}
      onmouseleave={hideFloatingItem}
      onblur={hideFloatingItem}
    >
      <div class="mc-sidebar__listbox">
        <ul
          class="mc-sidebar__shortcut-list mc-sidebar__shortcut-list--floating mc-sidebar__shortcut-list mc-sidebar__shortcut-list--stacked"
        >
          <slot />
        </ul>
      </div>
    </div>
  </div>
{/if}

<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>
