@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.5

package/src/components/AutoGroupModal.vue

@@ -0,0 +1,294 @@
+<script setup lang="ts">
+/**
+ * Smart Group modal. Parses sample naming patterns into candidate grouping
+ * fields (auto / "Field Recipe") or lets you assign cohorts by hand (manual),
+ * staying wired to the `useAutoGroup` engine. The UI is the Smart Group design
+ * (`SmartGroupFieldRecipe` / `SmartGroupManual`) driven in controlled mode; this
+ * component is the adapter that maps engine state ↔ that UI and emits the
+ * resulting `AutoGroupResult`. Public props/emits are unchanged so existing
+ * consumers (`SampleSelector`, template catalog) keep working.
+ */
+import { ref, computed, watch } from 'vue'
+import BaseModal from './BaseModal.vue'
+import AlertBox from './AlertBox.vue'
+import SmartGroupFieldRecipe from './SmartGroupFieldRecipe.vue'
+import SmartGroupManual from './SmartGroupManual.vue'
+import { useAutoGroup, parseCSV } from '../composables/useAutoGroup'
+import { useApi } from '../composables/useApi'
+import { readFileAsText } from '../composables/useFileImport'
+import {
+  engineGroupsToRail,
+  engineSchemasToCards,
+  engineToQcRoute,
+  manualSamplesToResult,
+  qcRouteToEngine,
+  seedFromGroups,
+} from './AutoGroupModal.adapter'
+import { SAMPLE_GROUP_COLOR_OPTIONS } from './SampleSelector.colors'
+import type { QcRoute } from './SmartGroupFieldRecipe.groups'
+import type { ManualSample } from './SmartGroupManual.cohorts'
+import type { ManualPaletteEntry } from './SmartGroup.types'
+import type { AutoGroupResult } from '../types/auto-group'
+import type { SampleGroup } from '../types'
+
+type GroupingWorkflow = 'auto' | 'manual'
+
+export interface Props {
+  modelValue: boolean
+  samples?: string[]
+  groups?: SampleGroup[]
+  initialMode?: GroupingWorkflow
+  experimentId?: number
+  /** Pre-fetched design data — bypasses API fetch when provided */
+  designData?: Record<string, unknown>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  samples: () => [],
+  groups: () => [],
+  initialMode: 'auto',
+  experimentId: undefined,
+  designData: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'apply': [result: AutoGroupResult]
+}>()
+
+const autoGroup = useAutoGroup()
+const api = useApi()
+const activeWorkflow = ref<GroupingWorkflow>(props.initialMode)
+const experimentError = ref<string | null>(null)
+const experimentLoading = ref(false)
+
+// QC routing — a 3-way state stored as two booleans so downstream engine
+// dispositions stay stable; the UI presents it as overlay / exclude / mix.
+const qcAsOverlay = ref(true)
+const excludeQc = ref(false)
+type QcRouting = 'overlay' | 'exclude' | 'mix'
+const qcRouting = computed<QcRouting>(() => {
+  if (excludeQc.value) return 'exclude'
+  if (qcAsOverlay.value) return 'overlay'
+  return 'mix'
+})
+function setQcRouting(value: QcRouting) {
+  qcAsOverlay.value = value === 'overlay'
+  excludeQc.value = value === 'exclude'
+  autoGroup.setClassDispositions(
+    c => c.kind !== 'biological' && c.kind !== 'unknown',
+    value === 'exclude' ? 'exclude' : value === 'overlay' ? 'overlay' : 'group',
+  )
+}
+
+// ── Auto mode (Field Recipe) ─────────────────────────────────────────
+// The recipe represents the whole batch, including fields that only exist in
+// another class or token-length schema split.
+const fieldCards = computed(() =>
+  engineSchemasToCards(autoGroup.schemas.value, autoGroup.activeClassKey.value),
+)
+const railGroups = computed(() =>
+  engineGroupsToRail(autoGroup.result.value.experimentalGroups ?? autoGroup.groups.value),
+)
+const qcSampleCount = computed(() =>
+  autoGroup.classes.value
+    .filter(c => c.kind !== 'biological' && c.kind !== 'unknown')
+    .reduce((acc, c) => acc + c.members.length, 0),
+)
+const qcChip = computed(() =>
+  qcRouting.value !== 'mix' && qcSampleCount.value > 0
+    ? { name: 'QC_Pool', count: qcSampleCount.value }
+    : null,
+)
+const fieldRecipeRoute = computed<QcRoute>(() => engineToQcRoute(qcRouting.value))
+const headerCount = computed(() => autoGroup.samples.value.length)
+
+// The cards describe the batch, not one class, so edits fan out to every class
+// exposing the field — otherwise a multi-class batch (e.g. a Liver class and a
+// Kidney class) ends up with only half its groups reordered.
+function onToggleField(cardIndex: number) {
+  const field = fieldCards.value.fields[cardIndex]
+  if (!field) return
+  autoGroup.toggleGroupByField(field.key)
+}
+function onMoveField(cardIndex: number, direction: 'up' | 'down') {
+  const field = fieldCards.value.fields[cardIndex]
+  if (!field) return
+  autoGroup.moveGroupByField(field.key, direction)
+}
+function onRouteChange(route: QcRoute) {
+  setQcRouting(qcRouteToEngine(route))
+}
+function applyAuto() {
+  emit('apply', autoGroup.result.value)
+  close()
+}
+
+// CSV upload from the Field Recipe header: parse the file into the engine's CSV
+// path. `samples` derives reactively from csvData and `parseInput()` builds the
+// classes/fields/groups; re-apply the current QC routing like the open watcher.
+async function onCsvFile(file: File) {
+  experimentError.value = null
+  try {
+    // Parse BEFORE mutating engine state so a malformed/empty/header-only CSV
+    // (parseCSV throws) leaves the engine untouched instead of half-set.
+    const text = await readFileAsText(file)
+    const parsed = parseCSV(text)
+    autoGroup.csvData.value = parsed
+    autoGroup.inputMode.value = 'csv'
+    autoGroup.parseInput()
+    setQcRouting(qcRouting.value)
+  } catch (e) {
+    experimentError.value = e instanceof Error ? e.message : 'Could not read that CSV file.'
+  }
+}
+
+// Template downloads via the engine. `downloadTemplate(mode, format)` defaults to
+// ('prefilled', 'csv'); pass the explicit mode for each menu action.
+function onDownloadTemplate() {
+  autoGroup.downloadTemplate('blank', 'csv')
+}
+function onDownloadPrefilled() {
+  autoGroup.downloadTemplate('prefilled', 'csv')
+}
+
+// ── Manual mode ──────────────────────────────────────────────────────
+// Hex swatches (the SDK's existing manual palette) rather than SmartGroupManual's
+// var(--grp-*) story default: SampleSelector tints group colours via hex8 string
+// concatenation (`group.color + '20'`), so an emitted cohort colour must be a
+// concrete hex value — matching the colours the previous manual modal produced.
+const MANUAL_SWATCH_LABELS = ['Blue', 'Green', 'Amber', 'Red', 'Violet']
+const manualPalette: ManualPaletteEntry[] = SAMPLE_GROUP_COLOR_OPTIONS.map((c, i) => ({
+  c,
+  k: MANUAL_SWATCH_LABELS[i] ?? c,
+}))
+// Source from the engine once input is parsed (paste of props.samples, an
+// experiment fetch, OR an uploaded CSV) so CSV-loaded samples reach manual mode
+// too; fall back to the raw prop before the engine has parsed anything.
+const manualSampleNames = computed(() =>
+  autoGroup.samples.value.length > 0 ? autoGroup.samples.value : props.samples,
+)
+const manualSeed = computed(() => seedFromGroups(props.groups))
+// Remount the manual builder when the sample set changes so it re-seeds from
+// freshly-loaded experiment data rather than a stale snapshot.
+const manualKey = computed(() => manualSampleNames.value.join('\n'))
+function applyManual(payload: { samples: ManualSample[] }) {
+  emit('apply', manualSamplesToResult(payload.samples, props.groups))
+  close()
+}
+
+function close() {
+  emit('update:modelValue', false)
+}
+
+async function fetchExperimentData() {
+  if (!props.experimentId && !props.designData) return
+  autoGroup.inputMode.value = 'experiment'
+  experimentError.value = null
+  experimentLoading.value = true
+  try {
+    let pluginData: Record<string, unknown> | undefined
+    if (props.designData) {
+      pluginData = props.designData
+    } else {
+      const result = await api.get<Record<string, unknown>>(`/experiments/${props.experimentId}/data`)
+      pluginData = result.data as Record<string, unknown> | undefined
+    }
+    if (!pluginData || typeof pluginData !== 'object') {
+      experimentError.value = 'No design data found for this experiment'
+      return
+    }
+    if (!autoGroup.loadExperimentData(pluginData, { samples: props.samples })) {
+      experimentError.value = 'No sample metadata found in this experiment'
+      return
+    }
+    setQcRouting(qcRouting.value)
+  } catch (e) {
+    experimentError.value = e instanceof Error ? e.message : 'Failed to fetch experiment data'
+  } finally {
+    experimentLoading.value = false
+  }
+}
+
+// Populate the engine from props when the modal opens. Sample ingestion still
+// comes from the `samples` / `designData` / `experimentId` props exactly as
+// before — the redesign just drops the multi-step input/schema/merge UI.
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (!open) return
+    activeWorkflow.value = props.initialMode
+    experimentError.value = null
+    qcAsOverlay.value = true
+    excludeQc.value = false
+    autoGroup.reset()
+    if (props.experimentId || props.designData) {
+      fetchExperimentData()
+    } else if (props.samples.length > 0) {
+      autoGroup.rawText.value = props.samples.join('\n')
+      autoGroup.inputMode.value = 'paste'
+      autoGroup.parseInput()
+      setQcRouting(qcRouting.value)
+    } else {
+      autoGroup.inputMode.value = 'paste'
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <BaseModal
+    class="sg-host"
+    :model-value="modelValue"
+    :closable="false"
+    :close-on-overlay="false"
+    :close-on-escape="false"
+    size="lg"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <AlertBox v-if="experimentError" type="error" class="sg-host__error">
+      {{ experimentError }}
+    </AlertBox>
+
+    <SmartGroupFieldRecipe
+      v-if="activeWorkflow === 'auto'"
+      :fields="fieldCards.fields"
+      :enabled="fieldCards.enabled"
+      :layers="fieldCards.layers"
+      :groups="railGroups"
+      :qc-chip="qcChip"
+      :route="fieldRecipeRoute"
+      :header-count="headerCount"
+      :qc-count="qcSampleCount"
+      :can-download-template="autoGroup.canDownloadTemplate.value"
+      :loading="experimentLoading"
+      experiment-label=""
+      @toggle="onToggleField"
+      @move="onMoveField"
+      @update:route="onRouteChange"
+      @csv-file="onCsvFile"
+      @download-template="onDownloadTemplate"
+      @download-prefilled="onDownloadPrefilled"
+      @apply="applyAuto"
+      @manual="activeWorkflow = 'manual'"
+      @cancel="close"
+      @close="close"
+    />
+    <SmartGroupManual
+      v-else
+      :key="manualKey"
+      :sample-names="manualSampleNames"
+      :seed="manualSeed"
+      :palette="manualPalette"
+      @done="applyManual"
+      @auto="activeWorkflow = 'auto'"
+      @cancel="close"
+      @close="close"
+    />
+  </BaseModal>
+</template>
+
+<style>
+@import '../styles/components/smart-group.css';
+</style>

package/src/components/Avatar.story.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import Avatar from './Avatar.vue'
+
+const sizes: ('xs' | 'sm' | 'md' | 'lg' | 'xl')[] = ['xs', 'sm', 'md', 'lg', 'xl']
+
+const users = [
+  { name: 'Alice Morscher', color: undefined },
+  { name: 'Bob Chen', color: undefined },
+  { name: 'Clara Diaz', color: undefined },
+  { name: 'David Kim', color: undefined },
+  { name: 'Elena Rossi', color: undefined },
+]
+</script>
+
+<template>
+  <Story title="Data Display/Avatar">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <Avatar
+            :name="state.name"
+            :initials="state.initials || undefined"
+            :src="state.src || undefined"
+            :size="state.size"
+            :color="state.color || undefined"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.name" title="Name" />
+        <HstText v-model="state.initials" title="Initials (override)" />
+        <HstText v-model="state.src" title="Image URL" />
+        <HstText v-model="state.color" title="Color (hex)" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; display: flex; gap: 1.5rem; align-items: center; justify-content: center;">
+        <div v-for="size in sizes" :key="size" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <Avatar name="Alice Morscher" :size="size" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ size }}
+          </span>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Name-based Colors">
+      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center; justify-content: center;">
+        <div v-for="user in users" :key="user.name" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <Avatar :name="user.name" size="lg" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">{{ user.name.split(' ')[0] }}</span>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Default vs explicit initials">
+      <!-- Default: single letter from `name` (matches the platform's
+           getAvatarInitial helper). Pass `:initials="'XX'"` to override
+           with two letters or any other label. -->
+      <div style="padding: 2rem; display: flex; gap: 2rem; align-items: center; justify-content: center;">
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <Avatar name="Estrella Pan" size="lg" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">name="Estrella Pan" → "E"</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <Avatar name="Estrella Pan" initials="EP" size="lg" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">initials="EP" → "EP"</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <Avatar initials="QC" name="Quality Control" size="lg" color="#10B981" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">role badge "QC"</span>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="With Image">
+      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center; justify-content: center;">
+        <Avatar
+          src="https://api.dicebear.com/7.x/initials/svg?seed=AM&backgroundColor=3B82F6"
+          name="Alice Morscher"
+          size="lg"
+        />
+        <Avatar
+          src="https://api.dicebear.com/7.x/initials/svg?seed=BC&backgroundColor=8B5CF6"
+          name="Bob Chen"
+          size="lg"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Fallback (No Name)">
+      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center; justify-content: center;">
+        <Avatar v-for="size in sizes" :key="size" :size="size" />
+      </div>
+    </Variant>
+
+    <Variant title="With status dot">
+      <div style="padding: 2rem; display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;">
+        <Avatar name="Sarah Chen" size="md" status="online" />
+        <Avatar name="Alex Morgan" size="md" status="away" />
+        <Avatar name="Jordan Park" size="md" status="busy" />
+        <Avatar name="Riley Wu" size="md" status="offline" />
+        <Avatar name="Sam Lee" size="lg" src="https://i.pravatar.cc/80?img=11" status="online" />
+        <Avatar name="Taylor Kim" size="xl" status="online" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/Avatar.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+/** Displays a user avatar as an image, a single derived initial, or a fallback icon, with a deterministic background color and optional status dot. */
+import { computed } from 'vue'
+
+interface Props {
+  name?: string
+  initials?: string
+  src?: string
+  alt?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  color?: string
+  status?: 'online' | 'away' | 'busy' | 'offline'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  alt: '',
+  size: 'md',
+})
+
+const PALETTE = ['#3B82F6', '#8B5CF6', '#EC4899', '#F97316', '#10B981', '#F59E0B', '#06B6D4', '#6366F1']
+
+// Default: first letter of `name`, uppercased — matches the platform's
+// canonical `getAvatarInitial(user)` helper. Consumers wanting two letters
+// (e.g. role badges like "PI", "QC") pass `:initials="'XX'"` explicitly.
+const computedInitials = computed(() =>
+  props.initials || props.name?.charAt(0).toUpperCase() || ''
+)
+
+const backgroundColor = computed(() => {
+  if (props.color) return props.color
+  if (!props.name) return undefined
+
+  let hash = 0
+  for (let i = 0; i < props.name.length; i++) {
+    hash = props.name.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  return PALETTE[Math.abs(hash) % PALETTE.length]
+})
+</script>
+
+<template>
+  <span
+    :class="['mint-avatar', `mint-avatar--${size}`]"
+    role="img"
+    :aria-label="alt || name || 'User avatar'"
+  >
+    <span
+      class="mint-avatar__face"
+      :style="backgroundColor ? { backgroundColor } : undefined"
+    >
+      <img
+        v-if="src"
+        :src="src"
+        :alt="alt || name || ''"
+        class="mint-avatar__image"
+      >
+      <span v-else-if="computedInitials" class="mint-avatar__initials">
+        {{ computedInitials }}
+      </span>
+      <svg
+        v-else
+        class="mint-avatar__fallback"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+      >
+        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+      </svg>
+    </span>
+    <span
+      v-if="status"
+      :class="['mint-avatar__status', `mint-avatar__status--${status}`]"
+      aria-hidden="true"
+    />
+  </span>
+</template>
+
+<style>
+@import '../styles/components/avatar.css';
+</style>

package/src/components/BaseButton.story.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import BaseButton from './BaseButton.vue'
+import type { ButtonVariant, ButtonSize } from '../types'
+
+const variants: ButtonVariant[] = ['primary', 'secondary', 'cta', 'danger', 'success', 'ghost']
+const sizes: ButtonSize[] = ['sm', 'md', 'lg']
+
+function handleClick() {
+  console.log('Button clicked')
+}
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseButton">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <BaseButton
+            :variant="state.variant"
+            :size="state.size"
+            :disabled="state.disabled"
+            :loading="state.loading"
+            :full-width="state.fullWidth"
+            @click="handleClick"
+          >
+            {{ state.label }}
+          </BaseButton>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.label" title="Label" />
+        <HstSelect
+          v-model="state.variant"
+          title="Variant"
+          :options="variants.map(v => ({ label: v, value: v }))"
+        />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstCheckbox v-model="state.fullWidth" title="Full Width" />
+      </template>
+    </Variant>
+
+    <Variant title="All Variants">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem;">
+        <div v-for="size in sizes" :key="size">
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ size }}
+          </p>
+          <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
+            <BaseButton
+              v-for="variant in variants"
+              :key="variant"
+              :variant="variant"
+              :size="size"
+              @click="handleClick"
+            >
+              {{ variant }}
+            </BaseButton>
+          </div>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Loading States">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
+        <BaseButton
+          v-for="variant in variants"
+          :key="variant"
+          :variant="variant"
+          loading
+        >
+          {{ variant }}
+        </BaseButton>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled States">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
+        <BaseButton
+          v-for="variant in variants"
+          :key="variant"
+          :variant="variant"
+          disabled
+        >
+          {{ variant }}
+        </BaseButton>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/BaseButton.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+/** Renders a styled `<button>` with variant, size, loading spinner, and full-width options. */
+import type { ButtonVariant, ButtonSize } from '../types'
+
+interface Props {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  disabled?: boolean
+  loading?: boolean
+  type?: 'button' | 'submit' | 'reset'
+  fullWidth?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  size: 'md',
+  disabled: false,
+  loading: false,
+  type: 'button',
+  fullWidth: false,
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+function handleClick(event: MouseEvent) {
+  if (!props.disabled && !props.loading) {
+    emit('click', event)
+  }
+}
+</script>
+
+<template>
+  <button
+    :type="type"
+    :disabled="disabled || loading"
+    :class="[
+      'mint-button',
+      `mint-button--${variant}`,
+      `mint-button--${size}`,
+      fullWidth ? 'mint-button--full-width' : '',
+      (disabled || loading) ? 'mint-button--disabled' : '',
+    ]"
+    @click="handleClick"
+  >
+    <svg
+      v-if="loading"
+      class="mint-button__spinner"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        style="opacity: 0.25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        style="opacity: 0.75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+    <slot name="icon-left" />
+    <slot />
+    <slot name="icon-right" />
+  </button>
+</template>
+
+<style>
+@import '../styles/components/button.css';
+</style>