diff --git a/n-link-core/components/AppButton.spec.ts b/n-link-core/components/AppButton.spec.ts
index 29979e7..9a0b5f1 100644
--- a/n-link-core/components/AppButton.spec.ts
+++ b/n-link-core/components/AppButton.spec.ts
@@ -32,4 +32,25 @@ describe('AppButton', () => {
     });
     expect(wrapper.get('button').attributes('disabled')).toBeDefined();
   });
+
+  it('applies the secondary variant', () => {
+    const wrapper = mount(AppButton, { props: { variant: 'secondary' }, slots: { default: 'x' } });
+    expect(wrapper.get('button').classes()).toContain('bg-raised');
+  });
+
+  it('applies the success variant', () => {
+    const wrapper = mount(AppButton, { props: { variant: 'success' }, slots: { default: 'x' } });
+    expect(wrapper.get('button').classes()).toContain('bg-success');
+  });
+
+  it('applies the small size class', () => {
+    const wrapper = mount(AppButton, { props: { size: 'sm' }, slots: { default: 'x' } });
+    expect(wrapper.get('button').classes()).toContain('px-3');
+  });
+
+  it('does not emit click when disabled', async () => {
+    const wrapper = mount(AppButton, { props: { disabled: true }, slots: { default: 'x' } });
+    await wrapper.get('button').trigger('click');
+    expect(wrapper.emitted('click')).toBeUndefined();
+  });
 });
diff --git a/n-link-core/components/Popover.spec.ts b/n-link-core/components/Popover.spec.ts
index 0ad99b5..3ff6576 100644
--- a/n-link-core/components/Popover.spec.ts
+++ b/n-link-core/components/Popover.spec.ts
@@ -49,4 +49,36 @@ describe('Popover', () => {
     await wrapper.get('.trg').trigger('click');
     expect(wrapper.get('[data-testid="panel"]').attributes('style')).toContain('width: 200px');
   });
+
+  it('applies bottom-end placement classes', async () => {
+    const wrapper = mount(Popover, {
+      attachTo: document.body,
+      props: { placement: 'bottom-end' },
+      slots: { trigger: '<button class="trg">o</button>', default: '<div>b</div>' },
+    });
+    await wrapper.get('.trg').trigger('click');
+    expect(wrapper.get('[data-testid="panel"]').classes()).toEqual(
+      expect.arrayContaining(['top-full', 'right-0']));
+  });
+
+  it('applies top-start placement classes', async () => {
+    const wrapper = mount(Popover, {
+      attachTo: document.body,
+      props: { placement: 'top-start' },
+      slots: { trigger: '<button class="trg">o</button>', default: '<div>b</div>' },
+    });
+    await wrapper.get('.trg').trigger('click');
+    expect(wrapper.get('[data-testid="panel"]').classes()).toEqual(
+      expect.arrayContaining(['bottom-full', 'left-0', 'mb-1']));
+  });
+
+  it('applies a string width verbatim', async () => {
+    const wrapper = mount(Popover, {
+      attachTo: document.body,
+      props: { width: '12rem' },
+      slots: { trigger: '<button class="trg">o</button>', default: '<div>b</div>' },
+    });
+    await wrapper.get('.trg').trigger('click');
+    expect(wrapper.get('[data-testid="panel"]').attributes('style')).toContain('width: 12rem');
+  });
 });
diff --git a/n-link-core/components/ProgressBar.spec.ts b/n-link-core/components/ProgressBar.spec.ts
index b582615..20d5c6c 100644
--- a/n-link-core/components/ProgressBar.spec.ts
+++ b/n-link-core/components/ProgressBar.spec.ts
@@ -26,4 +26,9 @@ describe('ProgressBar', () => {
     const wrapper = mount(ProgressBar, { props: { fraction: 0.5, color: 'ok' } });
     expect(fill(wrapper).classes()).toContain('bg-ok');
   });
+
+  it('applies the warn color class', () => {
+    const wrapper = mount(ProgressBar, { props: { fraction: 0.5, color: 'warn' } });
+    expect(fill(wrapper).classes()).toContain('bg-warn');
+  });
 });
diff --git a/n-link-core/components/ProgressBar.vue b/n-link-core/components/ProgressBar.vue
index 4d3c137..60e6adb 100644
--- a/n-link-core/components/ProgressBar.vue
+++ b/n-link-core/components/ProgressBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="w-full bg-edge rounded-full overflow-hidden">
-    <div data-testid="fill" class="py-1 rounded-full" :class="`bg-${color}`"
+    <div data-testid="fill" class="py-1 rounded-full" :class="fillClass"
          :style="{ width: `${percent}%` }"/>
   </div>
 </template>
@@ -16,4 +16,9 @@ const props = withDefaults(defineProps<{
 });
 
 const percent = computed(() => Math.min(100, Math.max(0, props.fraction * 100)));
+const fillClass = computed(() => ({
+  accent: 'bg-accent',
+  ok: 'bg-ok',
+  warn: 'bg-warn',
+}[props.color]));
 </script>