fix(ui): make ProgressBar color JIT-safe and expand primitive tests

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

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();
+  });
 });

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');
+  });
 });

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');
+  });
 });

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>