apps/docs/src/docs/components/form-rating.md (3)

109-116: Correct the clear behavior and disabled note

Two issues:

• The component clears to 0 (not null) on click.
• The note mentions disabled, but that state is not implemented yet and the component currently gates only on readonly.

Apply this diff:

-Optionally show a clear icon via the `show-clear` prop. The value will be set to `null` when the clear icon is clicked.
+Optionally show a clear icon via the `show-clear` prop. The value will be set to `0` when the clear icon is clicked.
@@
-**Notes:**
-
-- The clear icon will not be shown when the props `readonly` or `disabled` are set.
+**Notes:**
+
+- The clear icon will not be shown when the prop `readonly` is set.

---

182-183: Update implementation note to reflect actual markup

Docs say the root element is an <output>, but the component uses a <div role="slider">. Please update the implementation notes to match.

---

150-153: Remove or Update “Icon props (Advanced)” Section

The icon-empty, icon-half, icon-full, and icon-clear props no longer exist on BFormRating. Instead, custom icons are provided via slots:

• Use the default slot (props: { starIndex, isFilled, isHalf }) to override empty/half/full star icons.
• Use the icon-clear slot to override the clear-button icon.

Please remove or rewrite the “Icon props (Advanced)” section so it reflects slot-based customization rather than nonexistent props.

packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.spec.ts (1)

222-259: Wrap new tests in a describe block and enable auto-unmount

The three added tests are outside the existing describe('rating', ...) where enableAutoUnmount(afterEach) is called. As-is, these wrappers will not be auto-unmounted, which can lead to leaking DOM and flaky tests over time. Group them under a describe and call enableAutoUnmount to match the rest of the suite.

Apply this diff to encapsulate the new tests and ensure consistent teardown:

+describe('rating: icon-clear slot', () => {
+  enableAutoUnmount(afterEach)
 it('renders fallback clear icon when showClear is true (no slot provided)', async () => {
   const wrapper = mount(BFormRating, {
     props: {modelValue: 3, showClear: true, readonly: false},
   })
   const clearArea = wrapper.find('.clear-button-spacing')
   expect(clearArea.exists()).toBe(true)

   await clearArea.trigger('click')
   expect(wrapper.emitted('update:modelValue')).toBeTruthy()
   expect(wrapper.emitted('update:modelValue')![0]).toEqual([0])
 })
 
 it('uses #icon-clear slot content when provided', async () => {
   const wrapper = mount(BFormRating, {
     props: {modelValue: 4, showClear: true},
     slots: {
       'icon-clear': '<button id="custom-clear" type="button">Clear</button>',
     },
   })
   const clearArea = wrapper.find('.clear-button-spacing')
   expect(clearArea.exists()).toBe(true)
   expect(wrapper.find('#custom-clear').exists()).toBe(true)

   await clearArea.trigger('click')
   expect(wrapper.emitted('update:modelValue')).toBeTruthy()
   expect(wrapper.emitted('update:modelValue')![0]).toEqual([0])
 })
 
 it('does not render clear when readonly is true', () => {
   const wrapper = mount(BFormRating, {
     props: {showClear: true, readonly: true},
     slots: {'icon-clear': '<span id="slot-should-not-render">X</span>'},
   })
   expect(wrapper.find('.clear-button-spacing').exists()).toBe(false)
   expect(wrapper.find('#slot-should-not-render').exists()).toBe(false)
 })
+})

packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue (1)

175-196: Optional: add keyboard affordances to clear and jump to ends

Currently, arrow keys work, but there is no keyboard shortcut to clear. Consider enhancing onKeydown to support Home (min), End (max), and Delete/Backspace (clear to 0). This improves accessibility and avoids making the clear container focusable (which could conflict when users provide a focusable element in the #icon-clear slot).

Example update (outside the changed lines, shown for clarity):

function onKeydown(e: KeyboardEvent) {
  if (props.readonly) return

  let newValue = localValue.value

  switch (e.key) {
    case 'ArrowRight':
    case 'ArrowUp':
      newValue = Math.min(newValue + 1, clampedStars.value)
      break
    case 'ArrowLeft':
    case 'ArrowDown':
      newValue = Math.max(newValue - 1, 0)
      break
    case 'Home':
      newValue = 0
      break
    case 'End':
      newValue = clampedStars.value
      break
    case 'Delete':
    case 'Backspace':
      newValue = 0
      break
    default:
      return
  }

  e.preventDefault()
  localValue.value = newValue
}

apps/docs/src/data/components/FormRating.data.ts (1)

104-106: Clarify that the slot is not scoped

The icon-clear slot takes no scope. Consider reflecting that in the description.

Apply this diff:

-          description: 'Content for the optional clear button',
+          description: 'Content for the optional clear button (not scoped)',

apps/docs/src/docs/components/demo/RatingCustomClear.vue (1)

1-18: Great demo; minor consistency nit

The example clearly demonstrates the new slot. For consistency with other docs examples, consider using <BButton> casing and adding an accessible label.

Apply this diff:

-        <b-button variant="dark"> Clear </b-button>
+        <BButton variant="dark" aria-label="Clear rating" type="button">Clear</BButton>

packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.spec.ts (3)

223-233: Strengthen the fallback clear icon assertion (avoid duplicating an existing behavior-only test)

This test currently duplicates the earlier "has clear button to reset rating to 0" behavior test (Lines 110–124) without actually asserting the fallback icon renders. Add a minimal check to prove the default SVG fallback is present, differentiating this test from the previous one.

   const clearArea = wrapper.find('.clear-button-spacing')
   expect(clearArea.exists()).toBe(true)
+  // Assert that the default fallback icon (SVG) is rendered when no slot is provided
+  expect(clearArea.find('svg').exists()).toBe(true)

Optionally, consider consolidating the earlier clear-button behavior test with this one to reduce redundancy.

---

235-249: Trigger click on the actual slotted control to verify slot-driven interaction

Clicking the container works today because the click handler is on the wrapper, but it doesn't validate that a custom slotted control remains operable. Trigger the click on the slotted button to ensure the slot content can drive the clear action.

-  await clearArea.trigger('click')
+  await wrapper.find('#custom-clear').trigger('click')

---

251-258: Also assert no emission occurs in readonly mode

This test verifies the clear UI isn’t rendered when readonly is true. Add a quick check that no update event was emitted as an extra guard.

   expect(wrapper.find('.clear-button-spacing').exists()).toBe(false)
   expect(wrapper.find('#slot-should-not-render').exists()).toBe(false)
+  expect(wrapper.emitted('update:modelValue')).toBeFalsy()

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.