fds-vue-core 2.1.11 → 2.1.15

package/src/components/Blocks/FdsBlockLink/FdsBlockLink.stories.ts

@@ -3,10 +3,51 @@ import icons from '../../../assets/icons'
 import FdsSticker from '../../FdsSticker/FdsSticker.vue'
 import FdsBlockLink from './FdsBlockLink.vue'
 
+const blockLinkTransform = (
+  _src: string,
+  storyContext: {
+    args?: {
+      label?: string
+      icon?: string
+      arrow?: boolean
+      disabled?: boolean
+      href?: string
+      interactive?: boolean
+      default?: string
+      as?: 'router-link' | 'a' | 'button'
+      target?: string
+      rel?: string
+      download?: string
+    }
+  },
+) => {
+  const args = storyContext?.args || {}
+  const attrs = []
+
+  if (args.label) attrs.push(`label="${args.label}"`)
+  if (args.icon) attrs.push(`icon="${args.icon}"`)
+  if (args.arrow) attrs.push(':arrow="true"')
+  if (args.disabled) attrs.push(':disabled="true"')
+  if (args.href) attrs.push(`href="${args.href}"`)
+  if (!args.interactive) attrs.push(':interactive="false"')
+  if (args.as && args.as !== 'router-link') attrs.push(`as="${args.as}"`)
+
+  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+  const content = args.default ? `\n  <p>${args.default}</p>\n` : ''
+  return `<FdsBlockLink${attrsStr}>${content}</FdsBlockLink>`
+}
+
 const meta: Meta<typeof FdsBlockLink> = {
   title: 'FDS/Blocks/FdsBlockLink',
   component: FdsBlockLink,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      source: {
+        transform: blockLinkTransform,
+      },
+    },
+  },
   argTypes: {
     label: { control: { type: 'text' } },
     arrow: { control: { type: 'boolean' } },
@@ -38,50 +79,12 @@ const meta: Meta<typeof FdsBlockLink> = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-const blockLinkTransform = (storyContext: {
-  args?: {
-    label?: string
-    icon?: string
-    arrow?: boolean
-    disabled?: boolean
-    href?: string
-    interactive?: boolean
-    default?: string
-    as?: 'router-link' | 'a' | 'button'
-    target?: string
-    rel?: string
-    download?: string
-  }
-}) => {
-  const args = storyContext?.args || {}
-  const attrs = []
-
-  if (args.label) attrs.push(`label="${args.label}"`)
-  if (args.icon) attrs.push(`icon="${args.icon}"`)
-  if (args.arrow) attrs.push(':arrow="true"')
-  if (args.disabled) attrs.push(':disabled="true"')
-  if (args.href) attrs.push(`href="${args.href}"`)
-  if (!args.interactive) attrs.push(':interactive="false"')
-  if (args.as && args.as !== 'router-link') attrs.push(`as="${args.as}"`)
-
-  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
-  const content = args.default ? `\n  <p>${args.default}</p>\n` : ''
-  return `<FdsBlockLink${attrsStr}>${content}</FdsBlockLink>`
-}
-
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsBlockLink },
     setup: () => ({ args }),
     template: `<FdsBlockLink v-bind="args">{{ args.default }}</FdsBlockLink>`,
   }),
-  parameters: {
-    docs: {
-      source: {
-        transform: blockLinkTransform,
-      },
-    },
-  },
   args: {
     label: 'Enter some text',
     default: 'Nothing will happen',

package/src/components/Blocks/FdsBlockLink/FdsBlockLink.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import { computed, useAttrs, type Slot } from 'vue'
 import { useHasSlot } from '../../../composables/useHasSlots'
 import FdsIcon from '../../FdsIcon/FdsIcon.vue'
 import type { FdsInteractionBlockProps } from './types'
@@ -82,12 +82,18 @@ const linkAttrs = computed(() => {
 const componentAttrs = computed(() => ({
   ...linkAttrs.value,
   ...attrs,
+  'data-testid': props.dataTestid,
 }))
 
 const componentType = computed(() => {
   if (props.as) return props.as
   return props.href ? 'a' : 'button'
 })
+
+defineSlots<{
+  default?: Slot
+  sticker?: Slot
+}>()
 </script>
 
 <template>
@@ -104,7 +110,6 @@ const componentType = computed(() => {
     :aria-disabled="disabled"
     @click="handleClick"
     @keydown="handleKeydown"
-    :data-testid="dataTestid"
   >
     <div class="flex w-full flex-1" :class="contentClasses">
       <FdsIcon

package/src/components/Buttons/ButtonBaseProps.ts

@@ -15,5 +15,9 @@ export interface FdsButtonBaseProps {
   target?: string
   rel?: string
   type?: 'button' | 'submit' | 'reset'
+  invert?: boolean
+  dataTestid?: string
+  ariaLabel?: string
+  ariaExpanded?: boolean
   onClick?: ((ev: MouseEvent) => void) | Array<(ev: MouseEvent) => void>
 }

package/src/components/Buttons/FdsButtonCopy/FdsButtonCopy.stories.ts

@@ -45,7 +45,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonCopy },
     setup: () => ({ args }),
     template: '<FdsButtonCopy v-bind="args" />',

package/src/components/Buttons/FdsButtonDownload/FdsButtonDownload.stories.ts

@@ -53,7 +53,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonDownload },
     setup() {
       return { args }
@@ -67,7 +67,7 @@ export const Default: Story = {
 }
 
 export const WithText: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonDownload },
     setup() {
       return { args }
@@ -81,7 +81,7 @@ export const WithText: Story = {
 }
 
 export const Loading: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonDownload },
     setup() {
       return { args }
@@ -96,7 +96,7 @@ export const Loading: Story = {
 }
 
 export const Disabled: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonDownload },
     setup() {
       return { args }

package/src/components/Buttons/FdsButtonDownload/FdsButtonDownload.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, useAttrs } from 'vue'
 import FdsIcon from '../../FdsIcon/FdsIcon.vue'
 import type { FdsButtonDownloadProps } from './types'
 
@@ -7,6 +7,8 @@ defineOptions({
   inheritAttrs: false,
 })
 
+const attrs = useAttrs()
+
 const props = withDefaults(defineProps<FdsButtonDownloadProps>(), {
   loading: false,
   disabled: false,
@@ -14,6 +16,8 @@ const props = withDefaults(defineProps<FdsButtonDownloadProps>(), {
   href: undefined,
   downloadOptions: undefined,
   text: '',
+  ariaLabel: undefined,
+  dataTestid: undefined,
 })
 
 const emit = defineEmits<{
@@ -50,6 +54,12 @@ const buttonClasses = computed(() => [
 
 const iconFillClass = computed(() => (isDownloading.value ? 'fill-gray-500' : 'fill-blue-500'))
 
+const buttonAttrs = computed(() => ({
+  ...attrs,
+  'data-testid': props.dataTestid,
+  'aria-label': props.ariaLabel,
+}))
+
 async function handleDownload(ev: MouseEvent) {
   if (props.disabled || props.loading || isDownloading.value) {
     ev.preventDefault()
@@ -150,7 +160,7 @@ const onClick = (ev: MouseEvent) => {
 <template>
   <div :class="rootClasses" :aria-disabled="disabled ? 'true' : undefined">
     <button
-      v-bind="$attrs"
+      v-bind="buttonAttrs"
       :class="buttonClasses"
       :disabled="disabled || loading || isDownloading"
       type="button"

package/src/components/Buttons/FdsButtonDownload/types.ts

@@ -7,6 +7,8 @@ export interface FdsButtonDownloadProps {
   href?: string
   downloadOptions?: DownloadOptions | undefined
   text: string
+  ariaLabel?: string
+  dataTestid?: string
   onClick?: ((ev: MouseEvent) => void) | Array<(ev: MouseEvent) => void>
 }
 

package/src/components/Buttons/FdsButtonIcon/FdsButtonIcon.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import FdsButtonIcon from './FdsButtonIcon.vue'
 import icons from '../../../assets/icons'
+import FdsButtonIcon from './FdsButtonIcon.vue'
 
 const meta: Meta<typeof FdsButtonIcon> = {
   title: 'FDS/Buttons/FdsButtonIcon',
@@ -47,7 +47,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonIcon },
     setup: () => ({ args }),
     template: '<FdsButtonIcon v-bind="args" />',

package/src/components/Buttons/FdsButtonMinor/FdsButtonMinor.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import FdsButtonMinor from './FdsButtonMinor.vue'
 import icons from '../../../assets/icons'
+import FdsButtonMinor from './FdsButtonMinor.vue'
 
 const meta: Meta<typeof FdsButtonMinor> = {
   title: 'FDS/Buttons/FdsButtonMinor',
@@ -60,7 +60,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonMinor },
     setup: () => ({ args }),
     template: '<FdsButtonMinor v-bind="args" />',

package/src/components/Buttons/FdsButtonMinor/FdsButtonMinor.vue

@@ -28,6 +28,9 @@ const props = withDefaults(defineProps<FdsButtonMinorProps>(), {
   rel: undefined,
   type: 'button',
   invert: false,
+  ariaLabel: undefined,
+  dataTestid: undefined,
+  ariaExpanded: undefined,
 })
 
 const emit = defineEmits<{

package/src/components/Buttons/FdsButtonPrimary/FdsButtonPrimary.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import FdsButtonPrimary from './FdsButtonPrimary.vue'
 import icons from '../../../assets/icons'
+import FdsButtonPrimary from './FdsButtonPrimary.vue'
 
 const meta: Meta<typeof FdsButtonPrimary> = {
   title: 'FDS/Buttons/FdsButtonPrimary',
@@ -60,7 +60,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonPrimary },
     setup: () => ({ args }),
     template: '<FdsButtonPrimary v-bind="args" />',
@@ -69,7 +69,7 @@ export const Default: Story = {
 
 export const WithIcon: Story = {
   args: { icon: 'arrowRight', text: 'With icon' },
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonPrimary },
     setup: () => ({ args }),
     template: '<FdsButtonPrimary v-bind="args" />',
@@ -77,7 +77,7 @@ export const WithIcon: Story = {
 }
 
 export const Sizes: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonPrimary },
     setup: () => ({ args }),
     template:

package/src/components/Buttons/FdsButtonPrimary/FdsButtonPrimary.vue

@@ -60,11 +60,6 @@ function onClick(ev: MouseEvent) {
     ev.preventDefault()
     return
   }
-  // Support both @click event and onClick prop
-  if (props.onClick) {
-    const handlers = Array.isArray(props.onClick) ? props.onClick : [props.onClick]
-    handlers.forEach((handler) => handler(ev))
-  }
   emit('click', ev)
 }
 

package/src/components/Buttons/FdsButtonSecondary/FdsButtonSecondary.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import FdsButtonSecondary from './FdsButtonSecondary.vue'
 import icons from '../../../assets/icons'
+import FdsButtonSecondary from './FdsButtonSecondary.vue'
 
 const meta: Meta<typeof FdsButtonSecondary> = {
   title: 'FDS/Buttons/FdsButtonSecondary',
@@ -60,7 +60,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonSecondary },
     setup: () => ({ args }),
     template: '<FdsButtonSecondary v-bind="args" />',

package/src/components/FdsIcon/FdsIcon.stories.ts

@@ -24,7 +24,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Basic: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsIcon },
     setup: () => ({ args }),
     template: '<FdsIcon v-bind="args" />',

package/src/components/FdsModal/FdsModal.stories.ts

@@ -82,7 +82,7 @@ const modalTransform = (storyContext: {
 }
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsModal, FdsButtonPrimary, FdsButtonSecondary },
     setup: () => createModalStory(args),
     template: `
@@ -108,7 +108,7 @@ export const Default: Story = {
 }
 
 export const WithFooter: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsModal, FdsButtonPrimary, FdsButtonSecondary },
     setup: () => createModalStory(args),
     template: `
@@ -127,7 +127,7 @@ export const WithFooter: Story = {
 }
 
 export const Strict: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsModal, FdsButtonPrimary, FdsButtonSecondary },
     setup: () => createModalStory(args),
     template: `
@@ -148,7 +148,7 @@ export const Strict: Story = {
 }
 
 export const ValidInfo: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsModal, FdsButtonPrimary },
     setup: () => createModalStory(args),
     template: `
@@ -166,7 +166,7 @@ export const ValidInfo: Story = {
 }
 
 export const WarningInfo: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsModal, FdsButtonPrimary, FdsButtonSecondary },
     setup: () => createModalStory(args),
     template: `
@@ -188,7 +188,7 @@ export const WarningInfo: Story = {
 }
 
 export const LargeSize: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsModal, FdsButtonPrimary },
     setup: () => createModalStory(args),
     template: `
@@ -207,7 +207,7 @@ export const LargeSize: Story = {
 }
 
 export const LongContentWithStickyFooter: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsModal, FdsButtonPrimary, FdsButtonSecondary },
     setup: () => createModalStory(args),
     template: `

package/src/components/FdsModal/FdsModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, type Slot } from 'vue'
 import { useHasSlot } from '../../composables/useHasSlots'
 import FdsButtonIcon from '../Buttons/FdsButtonIcon/FdsButtonIcon.vue'
 import FdsIcon from '../FdsIcon/FdsIcon.vue'
@@ -207,6 +207,11 @@ onBeforeUnmount(() => {
     cleanupFocusTrap()
   }
 })
+
+defineSlots<{
+  default?: Slot
+  'modal-footer'?: Slot
+}>()
 </script>
 
 <template>

package/src/components/FdsPagination/FdsPagination.stories.ts

@@ -22,7 +22,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: NonNullable<Story['args']>) => ({
     components: { FdsPagination },
     setup: () => {
       const current = ref((args.current ?? 1) as number)
@@ -36,7 +36,7 @@ export const Default: Story = {
 }
 
 export const MiddlePage: Story = {
-  render: (args) => ({
+  render: (args: NonNullable<Story['args']>) => ({
     components: { FdsPagination },
     setup: () => {
       const current = ref((args.current ?? 1) as number)
@@ -54,7 +54,7 @@ export const MiddlePage: Story = {
 }
 
 export const LastPage: Story = {
-  render: (args) => ({
+  render: (args: NonNullable<Story['args']>) => ({
     components: { FdsPagination },
     setup: () => {
       const current = ref((args.current ?? 1) as number)
@@ -72,7 +72,7 @@ export const LastPage: Story = {
 }
 
 export const LargeMax: Story = {
-  render: (args) => ({
+  render: (args: NonNullable<Story['args']>) => ({
     components: { FdsPagination },
     setup: () => {
       const current = ref((args.current ?? 1) as number)
@@ -90,7 +90,7 @@ export const LargeMax: Story = {
 }
 
 export const WithLoading: Story = {
-  render: (args) => ({
+  render: (args: NonNullable<Story['args']>) => ({
     components: { FdsPagination },
     setup: () => {
       const current = ref((args.current ?? 1) as number)

package/src/components/FdsSearchSelect/FdsSearchSelect.stories.ts

@@ -158,7 +158,7 @@ const mockItems = [
 ]
 
 export const WithItems: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSearchSelect },
     setup: () => {
       const selected = ref<Record<string, unknown> | null>(null)
@@ -184,7 +184,7 @@ export const WithItems: Story = {
 }
 
 export const WithSelectedEarlier: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSearchSelect },
     setup: () => {
       const selected = ref<Record<string, unknown> | null>(null)
@@ -209,7 +209,7 @@ export const WithSelectedEarlier: Story = {
 }
 
 export const SingleOrganization: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSearchSelect },
     setup: () => {
       const selected = ref<Record<string, unknown> | null>(null)
@@ -240,7 +240,7 @@ export const SingleOrganization: Story = {
 }
 
 export const WithValidation: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSearchSelect },
     setup: () => {
       const selected = ref<Record<string, unknown> | null>(null)
@@ -268,7 +268,7 @@ export const WithValidation: Story = {
 }
 
 export const WithLabelLeft: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSearchSelect },
     setup: () => {
       const selected = ref<Record<string, unknown> | null>(null)
@@ -296,7 +296,7 @@ export const WithLabelLeft: Story = {
 }
 
 export const WithAbsoluteList: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSearchSelect },
     setup: () => {
       const selected = ref<Record<string, unknown> | null>(null)
@@ -323,7 +323,7 @@ export const WithAbsoluteList: Story = {
 }
 
 export const Disabled: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSearchSelect },
     setup: () => ({ args }),
     template: '<FdsSearchSelect v-bind="args" :items="args.items" />',
@@ -336,7 +336,7 @@ export const Disabled: Story = {
 }
 
 export const EnglishLocale: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSearchSelect },
     setup: () => {
       const selected = ref<Record<string, unknown> | null>(null)
@@ -368,7 +368,7 @@ export const EnglishLocale: Story = {
 }
 
 export const WithPagination: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSearchSelect },
     setup: () => {
       const selected = ref<Record<string, unknown> | null>(null)

package/src/components/FdsSpinner/FdsSpinner.stories.ts

@@ -23,7 +23,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Basic: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSpinner },
     setup: () => ({ args }),
     template: '<FdsSpinner v-bind="args" />',

package/src/components/FdsSticker/FdsSticker.stories.ts

@@ -1,10 +1,32 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import FdsSticker from './FdsSticker.vue'
 
+const stickerTransform = (
+  _src: string,
+  storyContext: { args?: { variant?: string; bullet?: boolean; default?: string } },
+) => {
+  const args = storyContext?.args || {}
+  const attrs = []
+
+  if (args.variant && args.variant !== 'blue') attrs.push(`variant="${args.variant}"`)
+  if (args.bullet) attrs.push(`:bullet="true"`)
+
+  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+  const content = args.default || ''
+  return `<FdsSticker${attrsStr}>${content}</FdsSticker>`
+}
+
 const meta: Meta<typeof FdsSticker> = {
   title: 'FDS/FdsSticker',
   component: FdsSticker,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      source: {
+        transform: stickerTransform,
+      },
+    },
+  },
   argTypes: {
     variant: {
       control: { type: 'radio' },
@@ -27,31 +49,12 @@ const meta: Meta<typeof FdsSticker> = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-const stickerTransform = (storyContext: { args?: { variant?: string; bullet?: boolean; default?: string } }) => {
-  const args = storyContext?.args || {}
-  const attrs = []
-
-  if (args.variant && args.variant !== 'blue') attrs.push(`variant="${args.variant}"`)
-  if (args.bullet) attrs.push(':bullet="true"')
-
-  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
-  const content = args.default || ''
-  return `<FdsSticker${attrsStr}>${content}</FdsSticker>`
-}
-
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsSticker },
     setup: () => ({ args }),
     template: `<FdsSticker v-bind="args">{{ args.default }}</FdsSticker>`,
   }),
-  parameters: {
-    docs: {
-      source: {
-        transform: stickerTransform,
-      },
-    },
-  },
   args: {
     variant: 'blue',
     default: 'Stick it!',

package/src/components/FdsSticker/FdsSticker.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, type Slot } from 'vue'
 import type { FdsStickerProps } from './types'
 
 const props = withDefaults(defineProps<FdsStickerProps>(), {
@@ -31,14 +31,15 @@ const bulletDotClasses = computed(() => [
   props.variant === 'gray' && 'bg-gray-400',
   props.variant === 't_blue' && 'bg-blue-200 border border-blue-300',
 ])
+
+defineSlots<{
+  default?: Slot
+}>()
 </script>
 
 <template>
   <span :class="stickerClasses">
-    <span
-      v-if="bullet"
-      :class="bulletDotClasses"
-    ></span>
+    <span v-if="bullet" :class="bulletDotClasses"></span>
     <slot />
   </span>
 </template>