@mozaic-ds/web-components 1.5.1 → 1.7.0

package/dist/components/sidebarfooter/SidebarFooter.svelte

@@ -0,0 +1,1018 @@
+<svelte:options
+  customElement={{
+    tag: 'm-sidebar-footer',
+    props: {
+      expandable: { reflect: true, type: 'Boolean', attribute: 'expandable' },
+    },
+  }}
+/>
+
+<script lang="ts">
+  import { SidebarExpand24, ChevronDown24, ChevronUp24 } from '@mozaic-ds/icons-svelte';
+  import Divider from '../divider/Divider.svelte';
+  import IconButton from '../iconbutton/IconButton.svelte';
+  import SidebarFooterMenu from './_SidebarFooterMenu.svelte';
+  import { useFloatingItem } from '../sidebar/floating-item.svelte';
+  import { getSidebarState, setSubItems } from '../sidebar/sidebar-state.svelte';
+  import { MediaQuery } from 'svelte/reactivity';
+
+  /**
+   * 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;
+  }
+
+  let {
+    title,
+    subtitle,
+    avatar,
+    expandable = true,
+    logOutLabel = 'Log out',
+    onlogout,
+  }: Props = $props();
+
+  let element: HTMLElement;
+
+  let expanded = $state(false);
+
+  let desktopTrigger: HTMLElement | null = $state(null);
+  let mobileTrigger: HTMLElement | null = $state(null);
+  let listbox: HTMLElement | null = $state(null);
+
+  const isMobile = $derived(new MediaQuery('(max-width: 780px)').current);
+
+  const {
+    floatingItemIsDisplayed,
+    hideFloatingItem,
+    showFloatingItem,
+    onTriggerKeydown,
+    onListboxKeydown,
+  } = useFloatingItem(
+    () => (isMobile ? mobileTrigger : desktopTrigger),
+    () => listbox,
+    { position: 'top' },
+  );
+
+  function toggleSidebar() {
+    element.dispatchEvent(new CustomEvent('toggle', { bubbles: true, composed: true }));
+  }
+
+  const MenuIcon = $derived(floatingItemIsDisplayed ? ChevronUp24 : ChevronDown24);
+
+  const desktopTriggerAttrs = $derived.by(() => {
+    if (isMobile) return {};
+
+    const baseAttrs = {
+      id: 'trigger-footer',
+      ['aria-expanded']: floatingItemIsDisplayed,
+      ['aria-haspopup']: 'listbox',
+      ['aria-controls']: 'listbox-footer',
+    };
+
+    return expanded
+      ? {
+          ...baseAttrs,
+          ['aria-expanded']: floatingItemIsDisplayed,
+          onclick: showFloatingItem,
+        }
+      : {
+          ...baseAttrs,
+          ['aria-expanded']: floatingItemIsDisplayed,
+          onmouseenter: showFloatingItem,
+          onfocus: showFloatingItem,
+          onkeydown: onTriggerKeydown,
+          onmouseleave: hideFloatingItem,
+          onblur: hideFloatingItem,
+        };
+  });
+
+  function handleLogOut() {
+    onlogout?.();
+    element.dispatchEvent(new CustomEvent('logout', { bubbles: true, composed: true }));
+  }
+</script>
+
+<footer
+  {@attach getSidebarState({ setExpanded: (value) => (expanded = value) })}
+  {@attach setSubItems('M-SIDEBAR-FOOTER')}
+  bind:this={element}
+  class={{
+    'mc-sidebar__footer': true,
+    'mc-sidebar__footer--expanded': expanded,
+    'mc-sidebar__footer--collapsed': !expanded,
+  }}
+>
+  <Divider />
+  <div class="mc-sidebar__footer-container">
+    {#if avatar || title || subtitle}
+      <svelte:element
+        this={isMobile ? 'div' : 'button'}
+        bind:this={desktopTrigger}
+        class="mc-sidebar__footer-profile mc-sidebar__footer-trigger"
+        {...desktopTriggerAttrs}
+      >
+        {#if avatar}
+          <img class="mc-sidebar__footer-avatar" src={avatar} alt={title} loading="lazy" />
+        {/if}
+
+        {#if title || subtitle}
+          <div class="mc-sidebar__footer-content">
+            {#if title}
+              <p class="mc-sidebar__footer-title">
+                {title}
+              </p>
+            {/if}
+
+            {#if subtitle}
+              <p class="mc-sidebar__footer-subtitle">
+                {subtitle}
+              </p>
+            {/if}
+          </div>
+        {/if}
+
+        {#if !isMobile}
+          <SidebarFooterMenu
+            bind:listbox
+            {logOutLabel}
+            {expanded}
+            {onListboxKeydown}
+            {hideFloatingItem}
+            onlogout={handleLogOut}
+          >
+            <slot />
+          </SidebarFooterMenu>
+        {/if}
+      </svelte:element>
+    {/if}
+
+    {#if expandable}
+      <span class="mc-sidebar__footer-expand">
+        <IconButton
+          ghost
+          aria-label="Expand"
+          aria-expanded={expanded}
+          onclick={() => toggleSidebar()}
+        >
+          <SidebarExpand24 slot="icon" />
+        </IconButton>
+      </span>
+    {/if}
+
+    {#if isMobile}
+      <button
+        bind:this={mobileTrigger}
+        class="mc-button mc-button--icon-button mc-button--ghost mc-sidebar__footer-expand--mobile"
+        aria-label="Profile menu"
+        aria-expanded={floatingItemIsDisplayed}
+        onclick={() => showFloatingItem()}
+      >
+        <MenuIcon />
+
+        <SidebarFooterMenu
+          bind:listbox
+          {logOutLabel}
+          {expanded}
+          {onListboxKeydown}
+          {hideFloatingItem}
+          onlogout={handleLogOut}
+        >
+          <slot />
+        </SidebarFooterMenu>
+      </button>
+    {/if}
+  </div>
+</footer>
+
+<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;
+}
+
+.mc-button {
+  color: var(--button-color-filled-standard-font, #ffffff);
+  background-color: var(--button-color-filled-standard-background, #464e63);
+}
+.mc-button:hover {
+  background-color: var(--button-color-filled-standard-hover-background, #343b4c);
+}
+.mc-button:active {
+  background-color: var(--button-color-filled-standard-active-background, #242938);
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button {
+  font-weight: var(--font-weight-semi-bold, 600);
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+  border-radius: var(--button-border-radius-m, 0.25rem);
+}
+.mc-button .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button {
+  display: inline-flex;
+  justify-content: center;
+  vertical-align: middle;
+  text-align: center;
+  border: 2px solid transparent;
+  transition: all ease 200ms;
+  transition: box-shadow 200ms ease;
+  align-items: center;
+  box-sizing: border-box;
+  font-family: inherit;
+  fill: currentcolor;
+  gap: 0.25rem;
+  cursor: pointer;
+}
+.mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button__icon {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button: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-button--s {
+  padding: 0 calc(0.75rem - 0.125rem);
+  min-height: 2rem;
+  min-width: 2rem;
+  border-radius: var(--button-border-radius-s, 0.25rem);
+}
+.mc-button--s .mc-button__label {
+  font-size: var(--font-size-100, 0.875rem);
+}
+.mc-button--s .mc-button__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-button--s .mc-button__icon:only-child {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-button--m {
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+  border-radius: var(--button-border-radius-m, 0.25rem);
+}
+.mc-button--m .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button--m .mc-button__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button--m .mc-button__icon:only-child {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button--l {
+  padding: 0 calc(1.25rem - 0.125rem);
+  min-height: 4rem;
+  min-width: 4rem;
+  border-radius: var(--button-border-radius-l, 0.25rem);
+}
+.mc-button--l .mc-button__label {
+  font-size: var(--font-size-200, 1.125rem);
+}
+.mc-button--l .mc-button__icon {
+  width: 2rem;
+  height: 2rem;
+}
+.mc-button--l .mc-button__icon:only-child {
+  width: 2rem;
+  height: 2rem;
+}
+.mc-button--icon-only {
+  padding: 0.25rem;
+}
+.mc-button--outlined {
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
+}
+.mc-button--outlined:hover {
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
+}
+.mc-button--outlined:active {
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
+}
+.mc-button--outlined:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost {
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost:hover {
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
+}
+.mc-button--ghost:active {
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
+}
+.mc-button--ghost:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--accent {
+  color: var(--button-color-filled-accent-font, #ffffff);
+  background-color: var(--button-color-filled-accent-background, #117f03);
+}
+.mc-button--accent:hover {
+  background-color: var(--button-color-filled-accent-hover-background, #006902);
+}
+.mc-button--accent:active {
+  background-color: var(--button-color-filled-accent-active-background, #035010);
+}
+.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--danger {
+  color: var(--button-color-filled-danger-font, #ffffff);
+  background-color: var(--button-color-filled-danger-background, #c61112);
+}
+.mc-button--danger:hover {
+  background-color: var(--button-color-filled-danger-hover-background, #8c0003);
+}
+.mc-button--danger:active {
+  background-color: var(--button-color-filled-danger-active-background, #530000);
+}
+.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--inverse {
+  --focus-color-mid: var(--focus-color-outline-outer, #000000);
+  --focus-color-outer: var(--focus-color-outline-mid, #ffffff);
+  color: var(--button-color-filled-inverse-font, #242938);
+  background-color: var(--button-color-filled-inverse-background, #ffffff);
+}
+.mc-button--inverse:hover {
+  background-color: var(--button-color-filled-inverse-hover-background, #e6e6e6);
+}
+.mc-button--inverse:active {
+  background-color: var(--button-color-filled-inverse-active-background, #cccccc);
+}
+.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--icon-button {
+  border-radius: var(--border-radius-full, 100%);
+  padding: 0;
+}
+.mc-button--loading {
+  pointer-events: none;
+}
+.mc-button--loading .mc-button__loader {
+  position: absolute;
+  color: currentcolor;
+}
+.mc-button--loading .mc-button__label,
+.mc-button--loading .mc-button__icon {
+  visibility: hidden;
+}
+.mc-button--outlined.mc-button--standard {
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
+}
+.mc-button--outlined.mc-button--standard:hover {
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
+}
+.mc-button--outlined.mc-button--standard:active {
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
+}
+.mc-button--outlined.mc-button--standard:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--accent {
+  color: var(--button-color-outlined-accent-font, #117f03);
+  border-color: var(--button-color-outlined-accent-border, #78be20);
+  background-color: var(--button-color-outlined-accent-background, #ffffff);
+}
+.mc-button--outlined.mc-button--accent:hover {
+  background-color: var(--button-color-outlined-accent-hover-background, #ebf5de);
+}
+.mc-button--outlined.mc-button--accent:active {
+  background-color: var(--button-color-outlined-accent-active-background, #c5e39e);
+}
+.mc-button--outlined.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--danger {
+  color: var(--button-color-outlined-danger-font, #c61112);
+  border-color: var(--button-color-outlined-danger-border, #ef5f5c);
+  background-color: var(--button-color-outlined-danger-background, #ffffff);
+}
+.mc-button--outlined.mc-button--danger:hover {
+  background-color: var(--button-color-outlined-danger-hover-background, #fdeaea);
+}
+.mc-button--outlined.mc-button--danger:active {
+  background-color: var(--button-color-outlined-danger-active-background, #f8bcbb);
+}
+.mc-button--outlined.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--inverse {
+  color: var(--button-color-outlined-inverse-font, #ffffff);
+  border-color: var(--button-color-outlined-inverse-border, #ffffff);
+  background-color: var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--outlined.mc-button--inverse:hover {
+  background-color: var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));
+}
+.mc-button--outlined.mc-button--inverse:active {
+  background-color: var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));
+}
+.mc-button--outlined.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--standard {
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--standard:hover {
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
+}
+.mc-button--ghost.mc-button--standard:active {
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
+}
+.mc-button--ghost.mc-button--standard:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--accent {
+  color: var(--button-color-ghost-accent-font, #117f03);
+  background-color: var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--accent:hover {
+  background-color: var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));
+}
+.mc-button--ghost.mc-button--accent:active {
+  background-color: var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));
+}
+.mc-button--ghost.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--danger {
+  color: var(--button-color-ghost-danger-font, #c61112);
+  background-color: var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--danger:hover {
+  background-color: var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));
+}
+.mc-button--ghost.mc-button--danger:active {
+  background-color: var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));
+}
+.mc-button--ghost.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--inverse {
+  color: var(--button-color-ghost-inverse-font, #ffffff);
+  background-color: var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--inverse:hover {
+  background-color: var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));
+}
+.mc-button--ghost.mc-button--inverse:active {
+  background-color: var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));
+}
+.mc-button--ghost.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}</style>