@mozaic-ds/web-components 1.5.1 → 1.6.0

package/dist/components/tileclickable/TileClickable.svelte

@@ -0,0 +1,954 @@
+<svelte:options
+  customElement={{
+    tag: 'm-tile-clickable',
+    props: {
+      bordered: { reflect: true, type: 'Boolean', attribute: 'bordered' },
+      internal: { reflect: true, type: 'Boolean', attribute: 'internal' },
+    },
+  }}
+/>
+
+<script lang="ts">
+  /**
+   * A tile is a container component used to group related content and actions within a structured layout. It provides a clickable or static area that can display text, images, icons, or interactive elements. Tiles are commonly used to present key information, navigate to detailed views, or trigger specific actions in dashboards, cards, and grid-based layouts. Their adaptable design allows them to accommodate various content types while maintaining a consistent and organized interface.
+   * @slot default - Default slot for the main content of the tile.
+   * @slot icon - Named slot for the action icon.
+   * @event action {CustomEvent<void>} - Emits when the action button is triggered.
+   */
+
+  interface Props {
+    /**
+     * Defines the visual style of the tile.
+     */
+    appearance?: 'primary' | 'secondary' | 'inverse';
+    /**
+     * Adds a border around the tile.
+     */
+    bordered?: boolean;
+    /**
+     * If set, the tile becomes an external link (`<a>`).
+     * Used to navigate to a full URL.
+     * Set `internal` prop to `true` for internal navigation.
+     */
+    href?: string;
+    /**
+     * If set, the tile becomes an internal link.
+     * Used for navigation within the app.
+     */
+    internal?: boolean;
+    /**
+     * Position of the icon relative to the content.
+     */
+    iconposition?: 'bottom' | 'right';
+    /**
+     * Callback to trigger when button action is clicked.
+     */
+    onAction?: () => void;
+  }
+
+  let {
+    appearance = 'primary',
+    bordered = true,
+    href,
+    internal,
+    iconposition = 'right',
+    onAction,
+  }: Props = $props();
+
+  let element: HTMLElement;
+
+  const rootTag = $derived(href ? 'a' : 'button');
+
+  const behaviorClass = $derived.by(() => {
+    if (href) {
+      if (internal) {
+        return 'mc-tile--navigate';
+      }
+
+      return 'mc-tile--external-link';
+    }
+
+    return 'mc-tile--open';
+  });
+
+  const targetAttr = $derived.by(() => {
+    if (href) {
+      if (internal) {
+        return '_self';
+      }
+
+      return '_blank';
+    }
+
+    return undefined;
+  });
+
+  function handleAction() {
+    onAction?.();
+    element.dispatchEvent(new CustomEvent('action', { bubbles: true, composed: true }));
+  }
+</script>
+
+<svelte:element
+  this={rootTag}
+  bind:this={element}
+  class={{
+    'mc-tile mc-tile--clickable': true,
+    [`mc-tile--${appearance}`]: appearance !== 'primary',
+    [behaviorClass]: true,
+    'mc-tile--bordered': bordered,
+    'mc-tile--action-right': iconposition === 'right',
+  }}
+  {href}
+  target={targetAttr}
+  {...rootTag === 'button' ? { onclick: () => handleAction(), type: 'button' } : {}}
+>
+  <div class="mc-tile__body">
+    <slot />
+  </div>
+
+  <div class="mc-tile__action">
+    <div class="mc-tile__action-icon">
+      <slot name="icon" />
+    </div>
+  </div>
+</svelte:element>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-tile {
+  border-radius: var(--border-radius-m, 0.5rem);
+  background-color: var(--tile-color-background-primary, #ffffff);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile {
+    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile {
+    transition: none;
+  }
+}
+.mc-tile {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+.mc-tile--secondary {
+  background-color: var(--tile-color-background-secondary, #eff1f6);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--secondary {
+    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--secondary {
+    transition: none;
+  }
+}
+.mc-tile--inverse {
+  background-color: var(--tile-color-background-inverse, #242938);
+  color: var(--color-text-primary-inverse, #ffffff);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--inverse {
+    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--inverse {
+    transition: none;
+  }
+}
+.mc-tile--inverse svg,
+.mc-tile--inverse .mc-tile__action::after,
+.mc-tile--inverse .mc-tile__action-icon {
+  color: var(--color-text-primary-inverse, #ffffff);
+  fill: var(--color-text-primary-inverse, #ffffff);
+}
+.mc-tile--inverse.mc-tile--navigate .mc-tile__action::after {
+  background-color: var(--color-text-primary-inverse, #ffffff);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;
+}
+.mc-tile--inverse.mc-tile--open .mc-tile__action::after {
+  background-color: var(--color-text-primary-inverse, #ffffff);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;
+}
+.mc-tile--inverse.mc-tile--external-link .mc-tile__action::after {
+  background-color: var(--color-text-primary-inverse, #ffffff);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E") no-repeat center/contain;
+}
+.mc-tile__body {
+  flex: 1;
+}
+.mc-tile--bordered {
+  box-shadow: 0 0 0 1px var(--tile-color-border-default, #cccccc);
+}
+.mc-tile--action-right {
+  flex-direction: row;
+  align-items: stretch;
+}
+.mc-tile--action-right .mc-tile__body {
+  border-radius: var(--border-radius-m, 0.5rem) 0 0 var(--border-radius-m, 0.5rem);
+}
+.mc-tile--action-right .mc-tile__action {
+  border-radius: 0 var(--border-radius-m, 0.5rem) var(--border-radius-m, 0.5rem) 0;
+  min-width: 4rem;
+  justify-content: center;
+}
+.mc-tile__action {
+  border-radius: 0 0 var(--border-radius-m, 0.5rem) var(--border-radius-m, 0.5rem);
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0.5rem 0.5rem;
+  gap: 0.5rem;
+}
+.mc-tile__action-icon {
+  margin: 0.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.mc-tile--navigate .mc-tile__action::after {
+  content: "";
+  margin: 0.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--button-color-filled-inverse-font, #242938);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;
+}
+.mc-tile--open .mc-tile__action::after {
+  content: "";
+  margin: 0.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--button-color-filled-inverse-font, #242938);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E") no-repeat center/contain;
+}
+.mc-tile--external-link .mc-tile__action::after {
+  content: "";
+  margin: 0.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--button-color-filled-inverse-font, #242938);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E") no-repeat center/contain;
+}
+.mc-tile__item {
+  display: flex;
+  flex-direction: column;
+}
+
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable) {
+  border-radius: var(--border-radius-m, 0.5rem);
+  background-color: var(--tile-color-background-primary, #ffffff);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable) {
+    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable) {
+    transition: none;
+  }
+}
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable) {
+  cursor: default;
+  pointer-events: none;
+}
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--secondary {
+  background-color: var(--tile-color-background-secondary, #eff1f6);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--secondary {
+    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--secondary {
+    transition: none;
+  }
+}
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse {
+  background-color: var(--tile-color-background-inverse, #242938);
+  color: var(--color-text-primary-inverse, #ffffff);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse {
+    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse {
+    transition: none;
+  }
+}
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse svg,
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse .mc-tile__action::after,
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--inverse .mc-tile__action-icon {
+  color: var(--color-text-primary-inverse, #ffffff);
+  fill: var(--color-text-primary-inverse, #ffffff);
+}
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable).mc-tile--bordered {
+  box-shadow: 0 0 0 1px var(--tile-color-border-default, #cccccc);
+}
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__content) {
+  display: flex;
+  flex-direction: column;
+}
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__content) .mc-tile__content {
+  border-top: 1px solid var(--tile-color-border-default, #cccccc);
+}
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action) {
+  pointer-events: auto;
+  display: flex;
+  flex-direction: column;
+}
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action) .mc-tile__header {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: space-between;
+}
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action) .mc-tile__body {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action) .mc-tile__action {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 0.75rem;
+  pointer-events: auto;
+  background-color: transparent;
+}
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action) .mc-tile__action .mc-tile__action-button {
+  pointer-events: auto;
+}
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action) .mc-tile__action .mc-tile__action-button svg {
+  color: inherit;
+  fill: currentcolor;
+}
+.mc-tile:not(.mc-tile--clickable, .mc-tile--expandable, .mc-tile--selectable):has(.mc-tile__action).mc-tile--inverse .mc-tile__action .mc-tile__action-button svg {
+  color: var(--color-text-primary-inverse, #ffffff);
+  fill: var(--color-text-primary-inverse, #ffffff);
+}
+
+.mc-tile--clickable {
+  border-radius: var(--border-radius-m, 0.5rem);
+  background-color: var(--tile-color-background-primary, #ffffff);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--clickable {
+    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--clickable {
+    transition: none;
+  }
+}
+.mc-tile--clickable:hover {
+  box-shadow: 0 0 0 2px var(--tile-color-border-default, #cccccc);
+}
+.mc-tile--clickable:active {
+  box-shadow: 0 0 0 2px var(--tile-color-border-default, #cccccc);
+}
+.mc-tile--clickable.mc-tile--bordered:hover {
+  box-shadow: 0 0 0 3px var(--tile-color-border-default, #cccccc);
+}
+.mc-tile--clickable.mc-tile--bordered:active {
+  box-shadow: 0 0 0 3px var(--tile-color-border-default, #cccccc);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--clickable {
+    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--clickable {
+    transition: none;
+  }
+}
+.mc-tile--clickable {
+  transition: box-shadow 200ms ease;
+  cursor: pointer;
+  position: relative;
+}
+.mc-tile--clickable::before {
+  border-radius: var(--border-radius-s, 0.25rem);
+  content: "";
+  position: absolute;
+  inset: 0.25rem;
+  background-color: transparent;
+  pointer-events: none;
+  outline: 0 solid transparent;
+  outline-offset: -0.125rem;
+}
+.mc-tile--clickable.mc-tile--secondary {
+  background-color: var(--tile-color-background-secondary, #eff1f6);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--clickable.mc-tile--secondary {
+    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--clickable.mc-tile--secondary {
+    transition: none;
+  }
+}
+.mc-tile--clickable.mc-tile--secondary:hover {
+  box-shadow: 0 0 0 2px var(--tile-color-border-default, #cccccc);
+}
+.mc-tile--clickable.mc-tile--secondary:active {
+  box-shadow: 0 0 0 2px var(--tile-color-border-default, #cccccc);
+}
+.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered:hover {
+  box-shadow: 0 0 0 3px var(--tile-color-border-default, #cccccc);
+}
+.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered:active {
+  box-shadow: 0 0 0 3px var(--tile-color-border-default, #cccccc);
+}
+.mc-tile--clickable.mc-tile--inverse {
+  background-color: var(--tile-color-background-inverse, #242938);
+  color: var(--color-text-primary-inverse, #ffffff);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--clickable.mc-tile--inverse {
+    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--clickable.mc-tile--inverse {
+    transition: none;
+  }
+}
+.mc-tile--clickable.mc-tile--inverse:hover {
+  box-shadow: 0 0 0 2px var(--tile-color-border-default, #cccccc);
+}
+.mc-tile--clickable.mc-tile--inverse:active {
+  box-shadow: 0 0 0 2px var(--tile-color-border-default, #cccccc);
+}
+.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered:hover {
+  box-shadow: 0 0 0 3px var(--tile-color-border-default, #cccccc);
+}
+.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered:active {
+  box-shadow: 0 0 0 3px var(--tile-color-border-default, #cccccc);
+}
+.mc-tile--clickable.mc-tile--inverse svg,
+.mc-tile--clickable.mc-tile--inverse .mc-tile__action::after,
+.mc-tile--clickable.mc-tile--inverse .mc-tile__action-icon {
+  color: var(--color-text-primary-inverse, #ffffff);
+  fill: var(--color-text-primary-inverse, #ffffff);
+}
+.mc-tile--clickable.mc-tile--bordered {
+  box-shadow: 0 0 0 1px var(--tile-color-border-default, #cccccc);
+}
+.mc-tile--clickable: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-tile--clickable:is(button) {
+  width: 100%;
+  border: 0;
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  text-align: left;
+  appearance: none;
+}
+.mc-tile--clickable:is(a) {
+  display: flex;
+  text-decoration: none;
+  color: inherit;
+}
+.mc-tile--clickable:is(a):visited {
+  color: inherit;
+}
+.mc-tile--clickable:is(a):not(.mc-tile--action-right) {
+  flex-direction: column;
+}
+.mc-tile--clickable:is(div[role=button]) {
+  width: 100%;
+  cursor: pointer;
+}
+
+.mc-tile--expandable {
+  border-radius: var(--border-radius-m, 0.5rem);
+  background-color: var(--tile-color-background-primary, #ffffff);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--expandable {
+    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--expandable {
+    transition: none;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--expandable {
+    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--expandable {
+    transition: none;
+  }
+}
+.mc-tile--expandable {
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+@supports (interpolate-size: allow-keywords) {
+  .mc-tile--expandable {
+    interpolate-size: allow-keywords;
+  }
+}
+.mc-tile--expandable.mc-tile--secondary {
+  background-color: var(--tile-color-background-secondary, #eff1f6);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--expandable.mc-tile--secondary {
+    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--expandable.mc-tile--secondary {
+    transition: none;
+  }
+}
+.mc-tile--expandable.mc-tile--bordered {
+  box-shadow: 0 0 0 1px var(--tile-color-border-default, #cccccc);
+}
+.mc-tile--expandable.mc-tile--borderless {
+  border: none;
+}
+.mc-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) {
+  cursor: default;
+}
+.mc-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button] {
+  cursor: pointer;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action::after {
+    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action::after {
+    transition: none;
+  }
+}
+.mc-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action::after {
+  transform: rotateX(0deg);
+  background-color: var(--button-color-filled-inverse-font, #242938);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E") no-repeat center/contain;
+  content: "";
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 1rem;
+}
+.mc-tile--expandable .mc-tile__header {
+  display: flex;
+  align-items: stretch;
+  position: relative;
+  z-index: 2;
+}
+.mc-tile--expandable .mc-tile__header::after {
+  border-radius: var(--border-radius-m, 0.5rem);
+  content: "";
+  position: absolute;
+  inset: 0.25rem;
+  background-color: transparent;
+  pointer-events: none;
+  z-index: -1;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--expandable .mc-tile__header::after {
+    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--expandable .mc-tile__header::after {
+    transition: none;
+  }
+}
+.mc-tile--expandable .mc-tile__header[type=button] {
+  width: 100%;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  text-align: inherit;
+  cursor: pointer;
+  appearance: none;
+}
+.mc-tile--expandable .mc-tile__header[type=button]:focus-visible {
+  outline: none;
+}
+.mc-tile--expandable .mc-tile__header[type=button]:focus-visible::after {
+  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-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button]:hover::after {
+  background-color: var(--tile-color-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button]:active::after {
+  background-color: var(--tile-color-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-tile--expandable .mc-tile__body {
+  flex-grow: 1;
+  position: relative;
+  z-index: 1;
+}
+.mc-tile--expandable:has(.mc-tile__action) .mc-tile__body {
+  border-radius: var(--border-radius-m, 0.5rem) 0 0 0;
+}
+.mc-tile--expandable .mc-tile__action {
+  border-radius: 0 var(--border-radius-m, 0.5rem) var(--border-radius-m, 0.5rem) 0;
+  box-sizing: border-box;
+  min-width: 4rem;
+  flex-shrink: 0;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 1;
+}
+.mc-tile--expandable .mc-tile__content {
+  width: 100%;
+  overflow: hidden;
+  max-height: 0;
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  position: relative;
+  z-index: 1;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--expandable .mc-tile__content {
+    transition: max-height 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--expandable .mc-tile__content {
+    transition: none;
+  }
+}
+.mc-tile--expandable .mc-tile__content[aria-hidden=false] {
+  max-height: 50rem;
+}
+@supports (interpolate-size: allow-keywords) {
+  .mc-tile--expandable .mc-tile__content {
+    height: 0;
+    max-height: none;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .mc-tile--expandable .mc-tile__content {
+      transition: height 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+      transition-behavior: allow-discrete;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mc-tile--expandable .mc-tile__content {
+      transition: none;
+    }
+  }
+  .mc-tile--expandable .mc-tile__content[aria-hidden=false] {
+    height: auto;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action::after {
+    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action::after {
+    transition: none;
+  }
+}
+.mc-tile--expandable:not(.mc-tile--trigger-icon, .mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action::after {
+  transform: rotateX(180deg);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg {
+    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg {
+    transition: none;
+  }
+}
+.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg {
+  transform: rotateX(180deg);
+}
+.mc-tile--expandable .mc-tile__action-button {
+  position: relative;
+  z-index: 2;
+}
+.mc-tile--expandable .mc-tile__action-button svg {
+  fill: currentcolor;
+}
+.mc-tile--expandable .mc-tile__action-button:not(.mc-button) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: 0;
+  background-color: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  text-align: left;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  appearance: none;
+}
+.mc-tile--expandable .mc-tile__action-button:not(.mc-button):focus-visible {
+  outline: 0.125rem solid var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline-offset: 0.125rem;
+  border-radius: var(--border-radius-s, 0.25rem);
+}
+.mc-tile--expandable .mc-tile__action-label {
+  font-size: var(--font-size-100, 0.875rem);
+  font-weight: var(--font-weight-semi-bold, 600);
+  line-height: var(--line-height-m, 1.5);
+}
+.mc-tile--expandable.mc-tile--trigger-icon {
+  cursor: default;
+}
+.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__body {
+  cursor: default;
+}
+.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action {
+  justify-content: center;
+}
+.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action::after {
+  content: none;
+  display: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg {
+    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg {
+    transition: none;
+  }
+}
+.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg {
+  transform: rotateX(0deg);
+  fill: currentcolor;
+}
+.mc-tile--expandable.mc-tile--trigger-button {
+  cursor: default;
+  display: flex;
+  flex-direction: column;
+}
+.mc-tile--expandable.mc-tile--trigger-button .mc-tile__body {
+  cursor: default;
+  order: 1;
+}
+.mc-tile--expandable.mc-tile--trigger-button .mc-tile__header {
+  display: contents;
+}
+.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action {
+  cursor: pointer;
+  min-width: auto;
+  justify-content: flex-start;
+  padding: 0.5rem;
+  order: 3;
+  box-shadow: 0 1px 0 0 var(--tile-color-border-default, #cccccc);
+  border-radius: 0;
+}
+.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action::after {
+  display: none;
+}
+.mc-tile--expandable.mc-tile--trigger-button .mc-tile__content {
+  order: 2;
+  border-radius: 0;
+}
+.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button {
+  font-weight: var(--font-weight-semi-bold, 600);
+  width: 100%;
+  margin: 0;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg {
+    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg {
+    transition: none;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg {
+    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg {
+    transition: none;
+  }
+}
+.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg {
+  transform: rotateX(0deg);
+  fill: currentcolor;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg {
+    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg {
+    transition: none;
+  }
+}
+.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg {
+  transform: rotateX(180deg);
+}
+.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-label {
+  flex: initial;
+}
+
+.mc-tile--selectable {
+  border-radius: var(--border-radius-m, 0.5rem);
+  background-color: var(--tile-color-background-primary, #ffffff);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--selectable {
+    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--selectable {
+    transition: none;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-tile--selectable {
+    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-tile--selectable {
+    transition: none;
+  }
+}
+.mc-tile--selectable {
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: space-between;
+  overflow: hidden;
+  box-shadow: 0 0 0 1px var(--tile-color-border-default, #cccccc);
+}
+.mc-tile--selectable .mc-tile__body {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.mc-tile--selectable .mc-tile__action {
+  background-color: transparent;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  border-radius: initial;
+  padding: 0.75rem 0.75rem;
+}
+.mc-tile--selectable:has(.mc-tile__content) {
+  flex-direction: column;
+  align-items: stretch;
+}
+.mc-tile--selectable:has(.mc-tile__content) .mc-tile__header {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: space-between;
+}
+.mc-tile--selectable:has(.mc-tile__content) .mc-tile__header .mc-tile__body {
+  display: flex;
+  flex-direction: column;
+}
+.mc-tile--selectable:has(.mc-tile__content) .mc-tile__content {
+  border-top: 1px solid var(--tile-color-border-default, #cccccc);
+}
+.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-left {
+  flex-direction: column;
+}
+.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-left .mc-tile__header {
+  flex-direction: row-reverse;
+}
+.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-center {
+  align-items: stretch;
+}
+.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-center .mc-tile__header {
+  align-items: center;
+}
+.mc-tile--selectable.mc-tile--input-left {
+  flex-direction: row-reverse;
+}
+.mc-tile--selectable.mc-tile--input-center {
+  align-items: center;
+}
+.mc-tile--selectable:hover {
+  box-shadow: 0 0 0 2px var(--tile-color-border-default, #cccccc);
+}
+.mc-tile--selectable.mc-tile--selected {
+  box-shadow: 0 0 0 2px var(--color-brand, #78be20), 0 0 0 4px var(--color-background-accent, #ebf5de);
+}
+.mc-tile--selectable.mc-tile--no-input .mc-tile__action {
+  visibility: hidden;
+  position: absolute;
+}</style>